@mauribadnights/clooks 0.4.0 → 0.4.1

package/dist/tui.js

@@ -1,13 +1,47 @@
 "use strict";
 // clooks interactive TUI dashboard for `clooks stats -i`
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+// Modern terminal UI using raw ANSI escape codes + Node readline
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.launchDashboard = launchDashboard;
-const blessed_1 = __importDefault(require("blessed"));
 const fs_1 = require("fs");
 const constants_js_1 = require("./constants.js");
+// --- ANSI helpers ---
+const ESC = '\x1b';
+const CSI = `${ESC}[`;
+const ansi = {
+    clearScreen: `${CSI}2J`,
+    cursorHome: `${CSI}H`,
+    hideCursor: `${CSI}?25l`,
+    showCursor: `${CSI}?25h`,
+    bold: `${CSI}1m`,
+    dim: `${CSI}2m`,
+    italic: `${CSI}3m`,
+    underline: `${CSI}4m`,
+    reverse: `${CSI}7m`,
+    reset: `${CSI}0m`,
+    red: `${CSI}31m`,
+    green: `${CSI}32m`,
+    yellow: `${CSI}33m`,
+    blue: `${CSI}34m`,
+    magenta: `${CSI}35m`,
+    cyan: `${CSI}36m`,
+    white: `${CSI}37m`,
+    dimWhite: `${CSI}2;37m`,
+    bgBlue: `${CSI}44m`,
+    eraseLine: `${CSI}2K`,
+    moveTo(row, col) {
+        return `${CSI}${row};${col}H`;
+    },
+};
+function write(s) {
+    process.stdout.write(s);
+}
+function getTermSize() {
+    return {
+        rows: process.stdout.rows || 24,
+        cols: process.stdout.columns || 80,
+    };
+}
 // --- Data loading ---
 function loadAllMetricEntries() {
     if (!(0, fs_1.existsSync)(constants_js_1.METRICS_FILE))
@@ -83,53 +117,37 @@ function aggregateAllHandlers(entries) {
     return result.sort((a, b) => b.avgMs - a.avgMs);
 }
 function aggregateByAgent(entries) {
-    // Group by session_id first, then infer agent from handler patterns
-    // Since MetricEntry doesn't have agent_type, we group by session_id
-    // and label sessions by the set of handlers that fired
-    const bySid = new Map();
+    // Group by actual agent_type field from metrics
+    const byAgent = new Map();
+    let hasAgentData = false;
     for (const e of entries) {
-        const sid = e.session_id ?? 'unknown';
-        const arr = bySid.get(sid) ?? [];
+        const agent = e.agent_type ?? '';
+        if (agent)
+            hasAgentData = true;
+        const arr = byAgent.get(agent) ?? [];
         arr.push(e);
-        bySid.set(sid, arr);
-    }
-    // Derive agent name from handler prefixes (e.g., "gsd-*" => "gsd", "cq-*" => "cq")
-    const agentMap = new Map();
-    for (const [_sid, sEntries] of bySid) {
-        // Use the most common handler prefix as agent name
-        const prefixes = new Map();
-        for (const e of sEntries) {
-            const prefix = e.handler.split('-')[0] || e.handler;
-            prefixes.set(prefix, (prefixes.get(prefix) ?? 0) + 1);
-        }
-        let agent = 'unknown';
-        let maxCount = 0;
-        for (const [p, c] of prefixes) {
-            if (c > maxCount) {
-                agent = p;
-                maxCount = c;
-            }
-        }
-        const arr = agentMap.get(agent) ?? [];
-        arr.push(...sEntries);
-        agentMap.set(agent, arr);
+        byAgent.set(agent, arr);
     }
+    // If no entries have agent_type, return empty — the view will show a message
+    if (!hasAgentData)
+        return [];
     const result = [];
-    for (const [agent, aEntries] of agentMap) {
+    for (const [agent, aEntries] of byAgent) {
+        if (!agent)
+            continue; // skip entries with no agent
+        const durations = aEntries.map((e) => e.duration_ms);
         const handlers = aggregateHandlersFrom(aEntries);
         result.push({
             agent,
             fires: aEntries.length,
             errors: aEntries.filter((e) => !e.ok).length,
+            avgMs: durations.reduce((a, b) => a + b, 0) / durations.length,
             handlers,
         });
     }
     return result.sort((a, b) => b.fires - a.fires);
 }
 function aggregateByProject(entries) {
-    // MetricEntry doesn't have cwd, so we group by session_id and use 'unknown' for project
-    // If entries had cwd, we'd group by that. For now, group by session_id as proxy.
-    // Actually, let's check if there's a cwd-like field or group by session
     const bySid = new Map();
     for (const e of entries) {
         const key = e.session_id ?? 'unknown';
@@ -141,7 +159,7 @@ function aggregateByProject(entries) {
     for (const [sid, pEntries] of bySid) {
         const durations = pEntries.map((e) => e.duration_ms);
         const handlers = aggregateHandlersFrom(pEntries);
-        const label = sid.length > 16 ? sid.slice(0, 8) + '...' + sid.slice(-8) : sid;
+        const label = sid.length > 16 ? sid.slice(0, 8) + '..' + sid.slice(-8) : sid;
         result.push({
             project: label,
             fires: pEntries.length,
@@ -184,18 +202,34 @@ function fuzzyMatch(query, target) {
     }
     return qi === q.length;
 }
-// --- Color coding ---
-function colorize(avgMs, text) {
-    if (avgMs < 5)
-        return `{green-fg}${text}{/green-fg}`;
-    if (avgMs <= 50)
-        return `{yellow-fg}${text}{/yellow-fg}`;
-    return `{red-fg}${text}{/red-fg}`;
+// --- Color helpers ---
+function colorMs(ms, text) {
+    if (ms < 5)
+        return `${ansi.green}${text}${ansi.reset}`;
+    if (ms <= 50)
+        return `${ansi.yellow}${text}${ansi.reset}`;
+    return `${ansi.red}${text}${ansi.reset}`;
 }
-function colorizeErrors(errors, text) {
+function colorErrors(errors, text) {
     if (errors === 0)
-        return `{green-fg}${text}{/green-fg}`;
-    return `{red-fg}${text}{/red-fg}`;
+        return `${ansi.green}${text}${ansi.reset}`;
+    return `${ansi.red}${text}${ansi.reset}`;
+}
+// --- Row formatting ---
+// Strip ANSI codes for length calculation
+function stripAnsi(s) {
+    return s.replace(/\x1b\[[0-9;]*m/g, '');
+}
+function pad(text, width, right = false) {
+    const visible = stripAnsi(text);
+    const diff = width - visible.length;
+    if (diff <= 0)
+        return text;
+    const spaces = ' '.repeat(diff);
+    return right ? spaces + text : text + spaces;
+}
+function rpad(text, width) {
+    return pad(text, width, true);
 }
 const VIEW_ORDER = ['events', 'handlers', 'agents', 'projects'];
 const VIEW_LABELS = {
@@ -203,358 +237,494 @@ const VIEW_LABELS = {
     handlers: 'Handlers',
     agents: 'Agents',
     projects: 'Projects',
-    search: 'Search',
 };
+// --- Main TUI ---
 function launchDashboard() {
     const entries = loadAllMetricEntries();
-    const eventAggs = aggregateByEvent(entries);
-    const handlerAggs = aggregateAllHandlers(entries);
-    const agentAggs = aggregateByAgent(entries);
-    const projectAggs = aggregateByProject(entries);
-    const totalFires = entries.length;
-    const totalErrors = entries.filter((e) => !e.ok).length;
-    const totalEvents = eventAggs.length;
-    const totalHandlers = handlerAggs.length;
-    // --- Screen setup ---
-    const scr = blessed_1.default.screen({
-        smartCSR: true,
-        title: 'clooks stats',
-        fullUnicode: true,
-    });
-    let currentView = 'events';
-    let drillDown = null;
-    let searchMode = false;
-    let searchQuery = '';
-    // --- Header (tab bar) ---
-    const header = blessed_1.default.box({
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: 3,
-        tags: true,
-        border: { type: 'line' },
-        style: {
-            border: { fg: 'cyan' },
-        },
-    });
-    scr.append(header);
-    // --- Main list ---
-    const mainList = blessed_1.default.list({
-        top: 3,
-        left: 0,
-        width: '100%',
-        height: '100%-6',
-        tags: true,
-        keys: true,
-        vi: true,
-        mouse: true,
-        scrollable: true,
-        border: { type: 'line' },
-        style: {
-            border: { fg: 'blue' },
-            selected: { bg: 'blue', fg: 'white', bold: true },
-            item: { fg: 'white' },
-        },
-        scrollbar: {
-            ch: ' ',
-            style: { bg: 'blue' },
-        },
-    });
-    scr.append(mainList);
-    // --- Footer (status bar) ---
-    const footer = blessed_1.default.box({
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        height: 3,
-        tags: true,
-        border: { type: 'line' },
-        style: {
-            border: { fg: 'cyan' },
-        },
-    });
-    scr.append(footer);
-    // --- Search input (hidden by default) ---
-    const searchBox = blessed_1.default.textbox({
-        bottom: 3,
-        left: 0,
-        width: '100%',
-        height: 3,
-        tags: true,
-        border: { type: 'line' },
-        style: {
-            border: { fg: 'yellow' },
-            fg: 'white',
-        },
-        label: ' Search (Esc to cancel) ',
-        hidden: true,
-        inputOnFocus: true,
-    });
-    scr.append(searchBox);
-    // --- Rendering functions ---
-    function renderHeader() {
-        const tabs = VIEW_ORDER.map((v) => {
-            if (v === currentView)
-                return `{cyan-fg}{bold}[${VIEW_LABELS[v]}]{/bold}{/cyan-fg}`;
-            return ` ${VIEW_LABELS[v]} `;
-        });
-        if (searchMode)
-            tabs.push(`{yellow-fg}{bold}[Search]{/bold}{/yellow-fg}`);
-        header.setContent(` ${tabs.join('  ')}`);
-    }
-    function renderFooter() {
-        const statusLine = `Total: ${totalEvents} events | ${totalHandlers} handlers | ${totalFires} fires | ${totalErrors} errors`;
-        const helpLine = 'Tab=switch view  /=search  Enter=drill in  Esc=back  q=quit';
-        footer.setContent(` ${statusLine}\n ${helpLine}`);
-    }
-    function formatHandlerRow(h) {
-        const name = h.handler.padEnd(28);
-        const ev = h.event.padEnd(18);
-        const fires = String(h.fires).padStart(6);
-        const errs = colorizeErrors(h.errors, String(h.errors).padStart(6));
-        const avg = colorize(h.avgMs, h.avgMs.toFixed(1).padStart(8));
-        const max = colorize(h.maxMs, h.maxMs.toFixed(1).padStart(8));
-        return ` ${name} ${ev} ${fires} ${errs} ${avg} ${max}`;
-    }
-    function handlerTableHeader() {
-        const name = 'Handler'.padEnd(28);
-        const ev = 'Event'.padEnd(18);
-        const fires = 'Fires'.padStart(6);
-        const errs = 'Errors'.padStart(6);
-        const avg = 'Avg ms'.padStart(8);
-        const max = 'Max ms'.padStart(8);
-        return `{bold} ${name} ${ev} ${fires} ${errs} ${avg} ${max}{/bold}`;
-    }
-    function renderEventsView() {
-        if (drillDown && 'event' in drillDown && 'handlers' in drillDown) {
-            const ev = drillDown;
-            mainList.setLabel(` Event: ${ev.event} `);
-            const items = [handlerTableHeader()];
-            for (const h of ev.handlers) {
-                items.push(formatHandlerRow(h));
-            }
-            mainList.setItems(items);
+    const state = {
+        currentView: 'events',
+        selectedIndex: 0,
+        scrollOffset: 0,
+        drillDown: null,
+        searchMode: false,
+        searchQuery: '',
+        entries,
+        eventAggs: aggregateByEvent(entries),
+        handlerAggs: aggregateAllHandlers(entries),
+        agentAggs: aggregateByAgent(entries),
+        projectAggs: aggregateByProject(entries),
+    };
+    // Setup terminal
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf-8');
+    write(ansi.hideCursor);
+    write(ansi.clearScreen);
+    // Cleanup on exit
+    function cleanup() {
+        write(ansi.showCursor);
+        write(ansi.clearScreen);
+        write(ansi.cursorHome);
+        process.stdin.setRawMode(false);
+        process.exit(0);
+    }
+    process.on('SIGINT', cleanup);
+    process.on('SIGTERM', cleanup);
+    // Handle resize
+    process.stdout.on('resize', () => render(state));
+    // Input handling
+    process.stdin.on('data', (key) => {
+        if (state.searchMode) {
+            handleSearchInput(state, key, cleanup);
         }
         else {
-            mainList.setLabel(' Events ');
-            const items = [];
-            for (const ev of eventAggs) {
-                const name = ev.event.padEnd(22);
-                const fires = String(ev.fires).padStart(6);
-                const errs = colorizeErrors(ev.errors, String(ev.errors).padStart(6));
-                const avg = colorize(ev.avgMs, ev.avgMs.toFixed(1).padStart(8));
-                const max = colorize(ev.maxMs, ev.maxMs.toFixed(1).padStart(8));
-                const hCount = `(${ev.handlers.length} handlers)`.padStart(14);
-                items.push(` ${name} ${fires} fires ${errs} errs ${avg} avg ${max} max ${hCount}`);
-            }
-            mainList.setItems(items);
+            handleNormalInput(state, key, cleanup);
         }
+        render(state);
+    });
+    // Initial render
+    render(state);
+}
+function handleNormalInput(state, key, cleanup) {
+    // q or Ctrl+C: quit
+    if (key === 'q' || key === '\x03') {
+        cleanup();
+        return;
     }
-    function renderHandlersView() {
-        mainList.setLabel(' Handlers (sorted by avg latency) ');
-        const items = [handlerTableHeader()];
-        for (const h of handlerAggs) {
-            items.push(formatHandlerRow(h));
-        }
-        mainList.setItems(items);
-    }
-    function renderAgentsView() {
-        if (drillDown && 'agent' in drillDown) {
-            const ag = drillDown;
-            mainList.setLabel(` Agent: ${ag.agent} `);
-            const items = [handlerTableHeader()];
-            for (const h of ag.handlers) {
-                items.push(formatHandlerRow(h));
-            }
-            mainList.setItems(items);
+    // Tab: next view
+    if (key === '\t') {
+        switchView(state, 1);
+        return;
+    }
+    // Shift+Tab (ESC [ Z)
+    if (key === `${ESC}[Z`) {
+        switchView(state, -1);
+        return;
+    }
+    // Arrow up / k
+    if (key === `${ESC}[A` || key === 'k') {
+        if (state.selectedIndex > 0)
+            state.selectedIndex--;
+        adjustScroll(state);
+        return;
+    }
+    // Arrow down / j
+    if (key === `${ESC}[B` || key === 'j') {
+        const maxIdx = getRowCount(state) - 1;
+        if (state.selectedIndex < maxIdx)
+            state.selectedIndex++;
+        adjustScroll(state);
+        return;
+    }
+    // Enter: drill in
+    if (key === '\r') {
+        drillIn(state);
+        return;
+    }
+    // Escape or Backspace: go back
+    if (key === ESC || key === '\x7f') {
+        goBack(state);
+        return;
+    }
+    // /: search mode
+    if (key === '/') {
+        state.searchMode = true;
+        state.searchQuery = '';
+        return;
+    }
+    // 1-4: direct tab selection
+    if (key >= '1' && key <= '4') {
+        const idx = parseInt(key) - 1;
+        state.drillDown = null;
+        state.currentView = VIEW_ORDER[idx];
+        state.selectedIndex = 0;
+        state.scrollOffset = 0;
+        return;
+    }
+}
+function handleSearchInput(state, key, _cleanup) {
+    // Escape: cancel search
+    if (key === ESC || key === '\x03') {
+        state.searchMode = false;
+        state.searchQuery = '';
+        return;
+    }
+    // Enter: accept search and stay on filtered view
+    if (key === '\r') {
+        state.searchMode = false;
+        return;
+    }
+    // Backspace
+    if (key === '\x7f') {
+        state.searchQuery = state.searchQuery.slice(0, -1);
+        state.selectedIndex = 0;
+        state.scrollOffset = 0;
+        return;
+    }
+    // Printable character
+    if (key.length === 1 && key.charCodeAt(0) >= 32) {
+        state.searchQuery += key;
+        state.selectedIndex = 0;
+        state.scrollOffset = 0;
+    }
+}
+function switchView(state, direction) {
+    state.drillDown = null;
+    state.searchQuery = '';
+    const idx = VIEW_ORDER.indexOf(state.currentView);
+    const next = (idx + direction + VIEW_ORDER.length) % VIEW_ORDER.length;
+    state.currentView = VIEW_ORDER[next];
+    state.selectedIndex = 0;
+    state.scrollOffset = 0;
+}
+function drillIn(state) {
+    if (state.drillDown)
+        return; // already drilled in
+    if (state.currentView === 'events') {
+        const ev = state.eventAggs[state.selectedIndex];
+        if (ev) {
+            state.drillDown = ev;
+            state.selectedIndex = 0;
+            state.scrollOffset = 0;
         }
-        else {
-            mainList.setLabel(' Agents ');
-            const items = [];
-            for (const ag of agentAggs) {
-                const name = ag.agent.padEnd(22);
-                const fires = String(ag.fires).padStart(6);
-                const errs = colorizeErrors(ag.errors, String(ag.errors).padStart(6));
-                const hCount = `(${ag.handlers.length} handlers)`.padStart(14);
-                items.push(` ${name} ${fires} fires ${errs} errs ${hCount}`);
-            }
-            mainList.setItems(items);
+    }
+    else if (state.currentView === 'agents') {
+        const ag = state.agentAggs[state.selectedIndex];
+        if (ag) {
+            state.drillDown = ag;
+            state.selectedIndex = 0;
+            state.scrollOffset = 0;
         }
     }
-    function renderProjectsView() {
-        if (drillDown && 'project' in drillDown) {
-            const pr = drillDown;
-            mainList.setLabel(` Session: ${pr.project} `);
-            const items = [handlerTableHeader()];
-            for (const h of pr.handlers) {
-                items.push(formatHandlerRow(h));
-            }
-            mainList.setItems(items);
+    else if (state.currentView === 'projects') {
+        const pr = state.projectAggs[state.selectedIndex];
+        if (pr) {
+            state.drillDown = pr;
+            state.selectedIndex = 0;
+            state.scrollOffset = 0;
         }
-        else {
-            mainList.setLabel(' Projects / Sessions ');
-            const items = [];
-            for (const pr of projectAggs) {
-                const name = pr.project.padEnd(22);
-                const fires = String(pr.fires).padStart(6);
-                const errs = colorizeErrors(pr.errors, String(pr.errors).padStart(6));
-                const avg = colorize(pr.avgMs, pr.avgMs.toFixed(1).padStart(8));
-                items.push(` ${name} ${fires} fires ${errs} errs ${avg} avg`);
-            }
-            mainList.setItems(items);
+    }
+}
+function goBack(state) {
+    if (state.searchQuery) {
+        state.searchQuery = '';
+        state.selectedIndex = 0;
+        state.scrollOffset = 0;
+        return;
+    }
+    if (state.drillDown) {
+        state.drillDown = null;
+        state.selectedIndex = 0;
+        state.scrollOffset = 0;
+    }
+}
+function getRowCount(state) {
+    const rows = getRows(state);
+    return rows.length;
+}
+function adjustScroll(state) {
+    const { rows } = getTermSize();
+    const contentHeight = rows - 6; // header(2) + separator(1) + footer separator(1) + footer(2)
+    if (state.selectedIndex < state.scrollOffset) {
+        state.scrollOffset = state.selectedIndex;
+    }
+    else if (state.selectedIndex >= state.scrollOffset + contentHeight) {
+        state.scrollOffset = state.selectedIndex - contentHeight + 1;
+    }
+}
+function getRows(state) {
+    const query = state.searchQuery.toLowerCase();
+    if (state.entries.length === 0) {
+        return [
+            { label: 'No metrics recorded yet.' },
+            { label: '' },
+            { label: 'Start the clooks daemon and run some Claude Code sessions' },
+            { label: 'to see hook execution statistics here.' },
+        ];
+    }
+    if (state.currentView === 'events') {
+        return getEventsRows(state, query);
+    }
+    else if (state.currentView === 'handlers') {
+        return getHandlersRows(state, query);
+    }
+    else if (state.currentView === 'agents') {
+        return getAgentsRows(state, query);
+    }
+    else {
+        return getProjectsRows(state, query);
+    }
+}
+function makeEventRow(ev) {
+    const name = pad(ev.event, 22);
+    const fires = rpad(String(ev.fires), 8);
+    const errs = colorErrors(ev.errors, rpad(String(ev.errors), 8));
+    const avg = colorMs(ev.avgMs, rpad(ev.avgMs.toFixed(1), 9));
+    const max = colorMs(ev.maxMs, rpad(ev.maxMs.toFixed(1), 9));
+    return `${name}${fires}${errs}${avg}${max}`;
+}
+function makeHandlerRow(h) {
+    const name = pad(h.handler, 28);
+    const ev = pad(h.event, 18);
+    const fires = rpad(String(h.fires), 8);
+    const errs = colorErrors(h.errors, rpad(String(h.errors), 8));
+    const avg = colorMs(h.avgMs, rpad(h.avgMs.toFixed(1), 9));
+    const max = colorMs(h.maxMs, rpad(h.maxMs.toFixed(1), 9));
+    return `${name}${ev}${fires}${errs}${avg}${max}`;
+}
+function eventHeader() {
+    const name = pad('Event', 22);
+    const fires = rpad('Fires', 8);
+    const errs = rpad('Errors', 8);
+    const avg = rpad('Avg ms', 9);
+    const max = rpad('Max ms', 9);
+    return { label: `${name}${fires}${errs}${avg}${max}`, isHeader: true };
+}
+function handlerHeader() {
+    const name = pad('Handler', 28);
+    const ev = pad('Event', 18);
+    const fires = rpad('Fires', 8);
+    const errs = rpad('Errors', 8);
+    const avg = rpad('Avg ms', 9);
+    const max = rpad('Max ms', 9);
+    return { label: `${name}${ev}${fires}${errs}${avg}${max}`, isHeader: true };
+}
+function getEventsRows(state, query) {
+    if (state.drillDown && 'event' in state.drillDown && 'handlers' in state.drillDown) {
+        const ev = state.drillDown;
+        const rows = [handlerHeader()];
+        for (const h of ev.handlers) {
+            if (query && !fuzzyMatch(query, h.handler))
+                continue;
+            rows.push({ label: makeHandlerRow(h) });
         }
+        return rows;
+    }
+    const rows = [eventHeader()];
+    for (const ev of state.eventAggs) {
+        if (query && !fuzzyMatch(query, ev.event))
+            continue;
+        rows.push({ label: makeEventRow(ev) });
+    }
+    return rows;
+}
+function getHandlersRows(state, query) {
+    const rows = [handlerHeader()];
+    for (const h of state.handlerAggs) {
+        if (query && !fuzzyMatch(query, h.handler) && !fuzzyMatch(query, h.event))
+            continue;
+        rows.push({ label: makeHandlerRow(h) });
     }
-    function renderSearchView() {
-        mainList.setLabel(` Search: "${searchQuery}" `);
-        if (!searchQuery) {
-            mainList.setItems([' Type to search handlers, events, agents...']);
-            return;
+    return rows;
+}
+function getAgentsRows(state, query) {
+    if (state.agentAggs.length === 0) {
+        return [
+            { label: 'No agent data available.' },
+            { label: '' },
+            { label: 'Agent tracking requires sessions launched with:' },
+            { label: `  ${ansi.cyan}claude --agent <name>${ansi.reset}` },
+            { label: '' },
+            { label: 'The agent_type is recorded on SessionStart and' },
+            { label: 'associated with all subsequent hook events in that session.' },
+        ];
+    }
+    if (state.drillDown && 'agent' in state.drillDown) {
+        const ag = state.drillDown;
+        const rows = [handlerHeader()];
+        for (const h of ag.handlers) {
+            if (query && !fuzzyMatch(query, h.handler))
+                continue;
+            rows.push({ label: makeHandlerRow(h) });
         }
-        const results = [handlerTableHeader()];
-        // Search handlers
-        for (const h of handlerAggs) {
-            if (fuzzyMatch(searchQuery, h.handler) || fuzzyMatch(searchQuery, h.event)) {
-                results.push(formatHandlerRow(h));
-            }
+        return rows;
+    }
+    const nameW = 22;
+    const rows = [{
+            label: `${pad('Agent', nameW)}${rpad('Fires', 8)}${rpad('Errors', 8)}${rpad('Avg ms', 9)}${rpad('Handlers', 10)}`,
+            isHeader: true,
+        }];
+    for (const ag of state.agentAggs) {
+        if (query && !fuzzyMatch(query, ag.agent))
+            continue;
+        const name = pad(ag.agent, nameW);
+        const fires = rpad(String(ag.fires), 8);
+        const errs = colorErrors(ag.errors, rpad(String(ag.errors), 8));
+        const avg = colorMs(ag.avgMs, rpad(ag.avgMs.toFixed(1), 9));
+        const hCount = rpad(String(ag.handlers.length), 10);
+        rows.push({ label: `${name}${fires}${errs}${avg}${hCount}` });
+    }
+    return rows;
+}
+function getProjectsRows(state, query) {
+    if (state.drillDown && 'project' in state.drillDown) {
+        const pr = state.drillDown;
+        const rows = [handlerHeader()];
+        for (const h of pr.handlers) {
+            if (query && !fuzzyMatch(query, h.handler))
+                continue;
+            rows.push({ label: makeHandlerRow(h) });
         }
-        // Search events
-        for (const ev of eventAggs) {
-            if (fuzzyMatch(searchQuery, ev.event) && !results.some((r) => r.includes(ev.event))) {
-                const name = ev.event.padEnd(22);
-                results.push(` {cyan-fg}[event]{/cyan-fg} ${name} ${ev.fires} fires`);
-            }
+        return rows;
+    }
+    const nameW = 22;
+    const rows = [{
+            label: `${pad('Session', nameW)}${rpad('Fires', 8)}${rpad('Errors', 8)}${rpad('Avg ms', 9)}`,
+            isHeader: true,
+        }];
+    for (const pr of state.projectAggs) {
+        if (query && !fuzzyMatch(query, pr.project))
+            continue;
+        const name = pad(pr.project, nameW);
+        const fires = rpad(String(pr.fires), 8);
+        const errs = colorErrors(pr.errors, rpad(String(pr.errors), 8));
+        const avg = colorMs(pr.avgMs, rpad(pr.avgMs.toFixed(1), 9));
+        rows.push({ label: `${name}${fires}${errs}${avg}` });
+    }
+    return rows;
+}
+// --- Rendering ---
+function render(state) {
+    const { rows: termRows, cols } = getTermSize();
+    const allRows = getRows(state);
+    // Layout: line 1 = title + tabs, line 2 = separator, lines 3..N-3 = content,
+    // line N-2 = separator, line N-1 = search/status, line N = keybindings
+    const headerLines = 2;
+    const footerLines = 3;
+    const contentHeight = termRows - headerLines - footerLines;
+    write(ansi.cursorHome);
+    // --- Header line 1: title + tab bar ---
+    const drillLabel = state.drillDown
+        ? ` > ${('event' in state.drillDown) ? state.drillDown.event :
+            ('agent' in state.drillDown) ? state.drillDown.agent :
+                state.drillDown.project}`
+        : '';
+    let tabBar = '';
+    for (const v of VIEW_ORDER) {
+        if (v === state.currentView) {
+            tabBar += `${ansi.reverse}${ansi.bold} ${VIEW_LABELS[v]} ${ansi.reset}  `;
         }
-        // Search agents
-        for (const ag of agentAggs) {
-            if (fuzzyMatch(searchQuery, ag.agent)) {
-                const name = ag.agent.padEnd(22);
-                results.push(` {magenta-fg}[agent]{/magenta-fg} ${name} ${ag.fires} fires`);
-            }
+        else {
+            tabBar += `${ansi.dim} ${VIEW_LABELS[v]} ${ansi.reset}  `;
         }
-        if (results.length === 1) {
-            results.push(' No matches found.');
+    }
+    const searchIndicator = state.searchQuery
+        ? `  ${ansi.yellow}/${state.searchQuery}${ansi.reset}`
+        : '';
+    const titleLeft = `  ${ansi.bold}clooks stats${ansi.reset}${drillLabel}`;
+    const titleRight = `q: quit  `;
+    const headerLine = titleLeft + searchIndicator
+        + ' '.repeat(Math.max(1, cols - stripAnsi(titleLeft + searchIndicator).length - titleRight.length))
+        + `${ansi.dim}${titleRight}${ansi.reset}`;
+    write(ansi.eraseLine + headerLine + '\n');
+    // Tabs line
+    write(ansi.eraseLine + '  ' + tabBar + '\n');
+    // --- Separator ---
+    // (rendered as part of content area below)
+    // --- Content ---
+    // Adjust selectedIndex to skip header rows
+    // Find the first non-header index
+    let selectableStart = 0;
+    for (let i = 0; i < allRows.length; i++) {
+        if (!allRows[i].isHeader) {
+            selectableStart = i;
+            break;
         }
-        mainList.setItems(results);
-    }
-    function renderCurrentView() {
-        renderHeader();
-        renderFooter();
-        switch (currentView) {
-            case 'events':
-                renderEventsView();
-                break;
-            case 'handlers':
-                renderHandlersView();
-                break;
-            case 'agents':
-                renderAgentsView();
-                break;
-            case 'projects':
-                renderProjectsView();
-                break;
-            case 'search':
-                renderSearchView();
+    }
+    // Clamp selectedIndex to selectable rows only
+    const selectableRows = allRows.filter(r => !r.isHeader);
+    if (state.selectedIndex >= selectableRows.length) {
+        state.selectedIndex = Math.max(0, selectableRows.length - 1);
+    }
+    // Map selectedIndex to absolute index in allRows
+    let selectableCount = 0;
+    let absSelectedIndex = -1;
+    for (let i = 0; i < allRows.length; i++) {
+        if (!allRows[i].isHeader) {
+            if (selectableCount === state.selectedIndex) {
+                absSelectedIndex = i;
                 break;
-        }
-        mainList.select(0);
-        mainList.focus();
-        scr.render();
-    }
-    function switchView(direction) {
-        if (searchMode) {
-            searchMode = false;
-            searchBox.hide();
-        }
-        drillDown = null;
-        const idx = VIEW_ORDER.indexOf(currentView);
-        const next = (idx + direction + VIEW_ORDER.length) % VIEW_ORDER.length;
-        currentView = VIEW_ORDER[next];
-        renderCurrentView();
-    }
-    function drillInto() {
-        // @ts-ignore — blessed ListElement exposes .selected at runtime
-        const selected = mainList.selected ?? 0;
-        if (currentView === 'events' && !drillDown) {
-            const ev = eventAggs[selected];
-            if (ev) {
-                drillDown = ev;
-                renderCurrentView();
             }
+            selectableCount++;
         }
-        else if (currentView === 'agents' && !drillDown) {
-            const ag = agentAggs[selected];
-            if (ag) {
-                drillDown = ag;
-                renderCurrentView();
-            }
+    }
+    // Adjust scroll for absolute index
+    if (absSelectedIndex >= 0) {
+        if (absSelectedIndex < state.scrollOffset) {
+            state.scrollOffset = absSelectedIndex;
         }
-        else if (currentView === 'projects' && !drillDown) {
-            const pr = projectAggs[selected];
-            if (pr) {
-                drillDown = pr;
-                renderCurrentView();
-            }
+        else if (absSelectedIndex >= state.scrollOffset + contentHeight) {
+            state.scrollOffset = absSelectedIndex - contentHeight + 1;
         }
     }
-    function goBack() {
-        if (searchMode) {
-            searchMode = false;
-            searchBox.hide();
-            currentView = 'events';
-            renderCurrentView();
-            return;
+    // Ensure header row (index 0) is always visible by starting scroll at 0 min
+    if (state.scrollOffset > 0 && allRows.length > 0 && allRows[0].isHeader) {
+        // Keep the header pinned — we'll render it separately
+    }
+    // Render content rows
+    const hasHeader = allRows.length > 0 && allRows[0].isHeader;
+    let renderedLines = 0;
+    if (hasHeader) {
+        // Pin the column header
+        const hdr = allRows[0].label;
+        write(ansi.eraseLine + `  ${ansi.dim}${ansi.underline}${hdr}${ansi.reset}` + '\n');
+        renderedLines++;
+    }
+    const dataStart = hasHeader ? 1 : 0;
+    const visibleCount = contentHeight - renderedLines;
+    // scrollOffset applies to data rows only (after header)
+    const dataRows = allRows.slice(dataStart);
+    const startIdx = state.scrollOffset;
+    const endIdx = Math.min(dataRows.length, startIdx + visibleCount);
+    // Map selected to data-relative index
+    const dataSelectedIdx = absSelectedIndex >= 0 ? absSelectedIndex - dataStart : -1;
+    for (let i = startIdx; i < endIdx; i++) {
+        const row = dataRows[i];
+        const isSelected = (i === dataSelectedIdx - state.scrollOffset + state.scrollOffset)
+            // Simpler: is this data index === absSelectedIndex - dataStart?
+            && false; // placeholder
+        // Check if this data row is selected
+        const selected = (i + dataStart) === absSelectedIndex;
+        if (selected) {
+            write(ansi.eraseLine + `  ${ansi.bold}${ansi.cyan}\u25b8${ansi.reset} ${ansi.bold}${row.label}${ansi.reset}` + '\n');
         }
-        if (drillDown) {
-            drillDown = null;
-            renderCurrentView();
+        else {
+            write(ansi.eraseLine + `    ${row.label}` + '\n');
         }
+        renderedLines++;
     }
-    // --- Key bindings ---
-    scr.key(['q', 'C-c'], () => process.exit(0));
-    scr.key(['tab'], () => switchView(1));
-    scr.key(['S-tab'], () => switchView(-1));
-    scr.key(['enter'], () => drillInto());
-    scr.key(['escape', 'backspace'], () => goBack());
-    scr.key(['/'], () => {
-        searchMode = true;
-        currentView = 'search';
-        searchQuery = '';
-        searchBox.show();
-        searchBox.setValue('');
-        renderCurrentView();
-        searchBox.focus();
-        searchBox.readInput(() => {
-            // Input submitted
-            searchQuery = searchBox.getValue();
-            searchBox.hide();
-            mainList.focus();
-            renderCurrentView();
-        });
-        scr.render();
-    });
-    // Live search: update on each keypress in the search box
-    searchBox.on('keypress', (_ch, _key) => {
-        // Small delay to let blessed update the value
-        setTimeout(() => {
-            searchQuery = searchBox.getValue();
-            renderSearchView();
-            scr.render();
-        }, 10);
-    });
-    // --- No data state ---
-    if (entries.length === 0) {
-        mainList.setItems([
-            ' No metrics recorded yet.',
-            '',
-            ' Start the clooks daemon and run some Claude Code sessions',
-            ' to see hook execution statistics here.',
-        ]);
-        mainList.setLabel(' clooks stats ');
-        renderHeader();
-        renderFooter();
-        scr.render();
+    // Fill remaining lines with blanks
+    for (let i = renderedLines; i < contentHeight; i++) {
+        write(ansi.eraseLine + '\n');
+    }
+    // --- Footer ---
+    const totalFires = state.entries.length;
+    const totalErrors = state.entries.filter(e => !e.ok).length;
+    const totalEvents = state.eventAggs.length;
+    const totalHandlers = state.handlerAggs.length;
+    // Separator
+    write(ansi.eraseLine + `  ${ansi.dim}${'─'.repeat(Math.max(0, cols - 4))}${ansi.reset}` + '\n');
+    // Status line
+    const statusInfo = `${totalEvents} events  ${totalHandlers} handlers  ${totalFires} fires  ${totalErrors} errors`;
+    write(ansi.eraseLine + `  ${ansi.dim}${statusInfo}${ansi.reset}` + '\n');
+    // Keybinding line
+    let keyHelp;
+    if (state.searchMode) {
+        keyHelp = 'Type to filter  Enter: accept  Esc: cancel';
+    }
+    else if (state.drillDown) {
+        keyHelp = 'Esc: back  Tab: switch view  j/k: navigate  /: search  q: quit';
+    }
+    else {
+        keyHelp = 'Tab: switch view  j/k: navigate  Enter: drill in  /: search  1-4: jump to tab  q: quit';
+    }
+    write(ansi.eraseLine + `  ${ansi.dim}${keyHelp}${ansi.reset}`);
+    // If in search mode, show the cursor in the search field
+    if (state.searchMode) {
+        // Position cursor at the search indicator in header
+        write(ansi.showCursor);
     }
     else {
-        renderCurrentView();
+        write(ansi.hideCursor);
     }
 }