oxlint-tui 1.0.7 → 1.0.8

package/README.md

@@ -1,9 +1,11 @@
 # oxlint-tui
 
-A lightweight, dependency-free Node.js Terminal User Interface (TUI) for browsing, toggling 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 and the number of warnings/errors they produce when toggled ON.
 
 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.
 
+Pressing <kbd>r</kbd> will lint the project using "oxlint". Pressing <kbd>t</kbd> will lint include the oxlint-tsgolint package and lint the project using "oxlint --type-aware". The results are presented directly in the interface.
+
 **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)
@@ -58,6 +60,8 @@ oxlint-tui
 | **1** |  Set selected rule to "off" |
 | **2** |  Set selected rule to "warn" |
 | **3** |  Set selected rule to "error" |
+| **r** |  Run the linter with "oxlint" |
+| **t** |  Run the linter with "-p oxlint-tsgolint@latest oxlint --type-aware" |
 | **Enter** | Open Rule Documentation in Browser |
 | **q** / **Esc** | Quit |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oxlint-tui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A Node TUI Oxlint rules and configuration browser",
   "type": "module",
   "bin": {
@@ -19,6 +19,9 @@
     "tui",
     "cli"
   ],
+  "dependencies": {
+    "oxlint-tsgolint": "0.11.1"
+  },
   "author": "holoflash",
   "license": "MIT",
   "engines": {

package/tui.js

@@ -1,150 +1,208 @@
 #!/usr/bin/env node
 
-import { execSync, exec } from 'node:child_process';
-import { stdout, stdin, exit, platform, argv } from 'node:process';
-import readline from 'readline';
-import fs from 'node:fs';
+import { execSync, exec } 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 OXLINT_VERSION = "1.41.0";
 
 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',
+    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' },
-    'escape': { type: 'EXIT' }
+    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" },
+    t: { type: "RUN_TYPE_AWARE_LINT" },
+    escape: { type: "EXIT" },
 };
 
-// TODO: Nukes comments in the json file. Find the most minimal way to avoid this, while preserveing formatting
+let state = {
+    activePane: 0,
+    selectedCatIdx: 0,
+    selectedRuleIdx: 0,
+    scrollCat: 0,
+    scrollRule: 0,
+    isLinting: false,
+    message: "Press R to lint; T to lint using --type-aware",
+    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 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 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 {
-        // TODO: Show errors in the tui
+        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(type_aware) {
+    if (state.isLinting) return;
+
+    state.isLinting = true;
+    state.message = type_aware
+        ? "Running linter with --type-aware..."
+        : "Running linter...";
+    state.messageType = "info";
+    render();
+
+    const cmd = `npx -p oxlint@${OXLINT_VERSION} ${type_aware ? "-p oxlint-tsgolint@latest oxlint --type-aware" : "oxlint"}`;
+
+    exec(cmd, (error, stdout, stderr) => {
+        const fullOutput = stdout + stderr;
+        const summaryMatch = fullOutput.match(
+            /Found (\d+) warnings? and (\d+) errors?/,
+        );
+
+        state.isLinting = false;
+        if (summaryMatch) {
+            state.message = summaryMatch[0];
+            const errors = parseInt(summaryMatch[2]);
+            state.messageType = errors > 0 ? "error" : "warn";
+        } else if (
+            fullOutput.includes("Finished") ||
+            (!error && fullOutput.length === 0)
+        ) {
+            state.message = "Linting passed! 0 issues found.";
+            state.messageType = "success";
+        } else {
+            state.message = "Something went wrong";
+            state.messageType = "error";
+        }
+        render();
+    });
+}
+
 function reducer(state, action) {
-    const { categories, rulesByCategory, selectedCatIdx, selectedRuleIdx, activePane } = state;
+    const {
+        categories,
+        rulesByCategory,
+        selectedCatIdx,
+        selectedRuleIdx,
+        activePane,
+    } = state;
     const currentCat = categories[selectedCatIdx];
     const currentRules = rulesByCategory[currentCat] || [];
-    const viewHeight = stdout.rows - 6;
-
+    const viewHeight = stdout.rows - 8;
     const statsHeight = 7;
     const catViewHeight = viewHeight - statsHeight;
 
     switch (action.type) {
-        case 'SET_STATUS': {
+        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'
+                isActive: action.value === "error" || action.value === "warn",
             };
-
             return {
                 ...state,
+                message: `Rule '${rule.value}' set to: ${action.value}`,
+                messageType: "info",
                 rulesByCategory: {
                     ...rulesByCategory,
-                    [currentCat]: updatedRules
-                }
+                    [currentCat]: updatedRules,
+                },
             };
         }
-
-        case 'MOVE_RIGHT':
-            if (activePane !== 1)
-                return { ...state, activePane: activePane + 1 };
+        case "MOVE_RIGHT":
+            if (activePane !== 1) return { ...state, activePane: activePane + 1 };
             return state;
 
-        case 'MOVE_LEFT':
-            if (activePane !== 0)
-                return { ...state, activePane: activePane - 1 };
+        case "MOVE_LEFT":
+            if (activePane !== 0) return { ...state, activePane: activePane - 1 };
             return state;
-
-        case 'MOVE_UP':
+        case "MOVE_UP":
             if (activePane === 0) {
-                const nextIdx = selectedCatIdx === 0 ? categories.length - 1 : selectedCatIdx - 1;
+                const nextIdx =
+                    selectedCatIdx === 0 ? categories.length - 1 : selectedCatIdx - 1;
                 return {
                     ...state,
                     selectedCatIdx: nextIdx,
                     selectedRuleIdx: 0,
                     scrollRule: 0,
-                    scrollCat: updateScroll(nextIdx, state.scrollCat, catViewHeight)
+                    scrollCat: updateScroll(nextIdx, state.scrollCat, catViewHeight),
                 };
             } else if (activePane === 1) {
-                const nextIdx = selectedRuleIdx === 0 ? currentRules.length - 1 : selectedRuleIdx - 1;
+                const nextIdx =
+                    selectedRuleIdx === 0 ? currentRules.length - 1 : selectedRuleIdx - 1;
                 return {
                     ...state,
                     selectedRuleIdx: nextIdx,
-                    scrollRule: updateScroll(nextIdx, state.scrollRule, viewHeight)
+                    scrollRule: updateScroll(nextIdx, state.scrollRule, viewHeight),
                 };
             }
             return state;
-
-        case 'MOVE_DOWN':
+        case "MOVE_DOWN":
             if (activePane === 0) {
-                const nextIdx = selectedCatIdx === categories.length - 1 ? 0 : selectedCatIdx + 1;
+                const nextIdx =
+                    selectedCatIdx === categories.length - 1 ? 0 : selectedCatIdx + 1;
                 return {
                     ...state,
                     selectedCatIdx: nextIdx,
                     selectedRuleIdx: 0,
                     scrollRule: 0,
-                    scrollCat: updateScroll(nextIdx, state.scrollCat, catViewHeight)
+                    scrollCat: updateScroll(nextIdx, state.scrollCat, catViewHeight),
                 };
             } else if (activePane === 1) {
-                const nextIdx = selectedRuleIdx === currentRules.length - 1 ? 0 : selectedRuleIdx + 1;
+                const nextIdx =
+                    selectedRuleIdx === currentRules.length - 1 ? 0 : selectedRuleIdx + 1;
                 return {
                     ...state,
                     selectedRuleIdx: nextIdx,
-                    scrollRule: updateScroll(nextIdx, state.scrollRule, viewHeight)
+                    scrollRule: updateScroll(nextIdx, state.scrollRule, viewHeight),
                 };
             }
             return state;
-
         default:
             return state;
     }
@@ -153,83 +211,82 @@ function reducer(state, action) {
 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) {
-            if (Array.isArray(val)) return val[0];
-            return val;
+            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;
     }
-
-    if (config.categories && config.categories[category]) {
-        return config.categories[category];
-    }
-    return 'off';
+    return (config.categories && config.categories[category]) || "off";
 }
 
 function stripJsonComments(json) {
-    return json.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => g ? "" : m);
+    return json.replace(
+        /\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,
+        (m, g) => (g ? "" : m),
+    );
 }
 
 function loadRules() {
     let rulesData;
-    let config = { rules: {}, categories: {} };
+    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'] });
+        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'.${COLORS.reset}`);
+        console.error(
+            `${COLORS.error}Error: Could not run 'npx oxlint'.${COLORS.reset}`,
+        );
         exit(1);
     }
 
     const userConfigPath = argv[2];
-    if (userConfigPath) {
-        if (!fs.existsSync(userConfigPath)) {
-            console.error(`${COLORS.error}Error: Config file '${userConfigPath}' not found.${COLORS.reset}`);
-            exit(1);
-        }
+    if (userConfigPath && fs.existsSync(userConfigPath)) {
         configPath = userConfigPath;
-    } else if (fs.existsSync('.oxlintrc.json')) {
-        configPath = '.oxlintrc.json';
+    } else if (fs.existsSync(".oxlintrc.json")) {
+        configPath = ".oxlintrc.json";
     }
 
     if (configPath) {
         try {
-            const configFile = fs.readFileSync(configPath, 'utf8');
-            const cleanConfig = stripJsonComments(configFile);
-            config = JSON.parse(cleanConfig);
-        } catch (e) {
-            console.error(`${COLORS.error}Error: Failed to parse '${configPath}'.${COLORS.reset}`);
-            exit(1);
-        }
+            config = JSON.parse(
+                stripJsonComments(fs.readFileSync(configPath, "utf8")),
+            );
+        } catch (e) { }
     }
 
     const map = {};
-    rulesData.forEach(rule => {
-        const cat = rule.category || 'Uncategorized';
+    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();
-    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);
+        map[cat].push({
+            ...rule,
+            configStatus: status,
+            isActive: status === "error" || status === "warn",
         });
     });
 
-    return { categories, rulesByCategory: map, config, configPath };
+    const categories = Object.keys(map).sort();
+    return {
+        categories,
+        rulesByCategory: map,
+        config,
+        configPath,
+    };
 }
 
 function updateScroll(idx, currentScroll, viewHeight) {
@@ -240,47 +297,77 @@ function updateScroll(idx, currentScroll, viewHeight) {
 
 function openUrl(url) {
     if (!url) return;
-    const cmd = platform === 'darwin' ? 'open' : platform === 'win32' ? 'start' : 'xdg-open';
+    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);
-    }
+    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 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, '─');
+    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 + i};${x}H${borderColor}│${" ".repeat(width - 2)}│${COLORS.reset}`,
+        );
     }
-    buffer.push(`\x1b[${y + height - 1};${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 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;
+        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}`);
         }
@@ -289,69 +376,93 @@ 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, '─');
+    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}`);
+    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++;
+    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 }
+        { 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}`);
+            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, '─');
+    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}`);
+    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}`;
+    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`]
+        ["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}`);
+        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);
+        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}`);
+                buffer.push(
+                    `\x1b[${y + 1 + line};${x + 2}H${COLORS.highlight}${lbl.padEnd(10)} ${COLORS.reset}${chunk}`,
+                );
                 line++;
             }
         });
@@ -363,46 +474,87 @@ function render() {
     const currentCat = state.categories[state.selectedCatIdx];
     const rules = state.rulesByCategory[currentCat] || [];
     const rule = rules[state.selectedRuleIdx];
-    const boxHeight = rows - 4;
+    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);
+    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 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(''));
+    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: Nav | 1-3: Status | Space: Lint | Enter: Docs | Q: Quit | ${footerConfig}${COLORS.reset}`,
+    );
+    write(buffer.join(""));
 }
 
-let state = {
-    activePane: 0,
-    selectedCatIdx: 0,
-    selectedRuleIdx: 0,
-    scrollCat: 0,
-    scrollRule: 0,
-    ...loadRules()
-};
-
 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));
+stdin.on("keypress", (_, key) => {
+    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') {
+    if (action.type === "EXIT") {
         exitAltScreen();
         exit(0);
     }
-
-    if (action.type === 'OPEN_DOCS' && state.activePane === 1) {
+    if (action.type === "RUN_LINT") {
+        runLint();
+        return;
+    }
+    if (action.type === "RUN_TYPE_AWARE_LINT") {
+        runLint(true);
+        return;
+    }
+    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);
@@ -413,6 +565,6 @@ stdin.on('keypress', (_, key) => {
     render();
 });
 
-stdout.on('resize', render);
+stdout.on("resize", render);
 enterAltScreen();
-render();
+render();