@spfunctions/cli 1.4.4 → 1.5.0

package/dist/tui/border.js

@@ -0,0 +1,87 @@
+"use strict";
+/**
+ * Border drawing — thin box-drawing characters
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLR = exports.bgRgb = exports.rgb = void 0;
+exports.drawBorder = drawBorder;
+exports.drawHDivider = drawHDivider;
+exports.fit = fit;
+exports.sparkline = sparkline;
+// 24-bit RGB ANSI helpers
+const rgb = (r, g, b) => `\x1b[38;2;${r};${g};${b}m`;
+exports.rgb = rgb;
+const bgRgb = (r, g, b) => `\x1b[48;2;${r};${g};${b}m`;
+exports.bgRgb = bgRgb;
+// Color palette (matching landing page: emerald on near-black)
+exports.CLR = {
+    border: (0, exports.rgb)(63, 63, 70), // zinc-700
+    borderDim: (0, exports.rgb)(39, 39, 42), // zinc-800
+    title: (0, exports.rgb)(161, 161, 170), // zinc-400
+    text: (0, exports.rgb)(212, 212, 216), // zinc-300
+    dim: (0, exports.rgb)(113, 113, 122), // zinc-500
+    veryDim: (0, exports.rgb)(63, 63, 70), // zinc-700
+    emerald: (0, exports.rgb)(16, 185, 129), // emerald-500
+    green: (0, exports.rgb)(52, 211, 153), // emerald-400
+    red: (0, exports.rgb)(239, 68, 68), // red-500
+    yellow: (0, exports.rgb)(250, 204, 21), // yellow-400
+    white: (0, exports.rgb)(244, 244, 245), // zinc-100
+    bg: (0, exports.bgRgb)(10, 10, 10), // #0a0a0a
+    bgPanel: (0, exports.bgRgb)(13, 13, 13), // #0d0d0d
+};
+/** Draw a bordered box with title */
+function drawBorder(screen, region, title) {
+    const { row, col, width, height } = region;
+    if (width < 3 || height < 3)
+        return;
+    const fg = exports.CLR.borderDim;
+    // Top
+    screen.write(row, col, '┌', fg);
+    for (let c = col + 1; c < col + width - 1; c++)
+        screen.write(row, c, '─', fg);
+    screen.write(row, col + width - 1, '┐', fg);
+    // Title
+    if (title) {
+        screen.write(row, col + 2, ` ${title} `, exports.CLR.title);
+    }
+    // Sides
+    for (let r = row + 1; r < row + height - 1; r++) {
+        screen.write(r, col, '│', fg);
+        screen.write(r, col + width - 1, '│', fg);
+    }
+    // Bottom
+    screen.write(row + height - 1, col, '└', fg);
+    for (let c = col + 1; c < col + width - 1; c++)
+        screen.write(row + height - 1, c, '─', fg);
+    screen.write(row + height - 1, col + width - 1, '┘', fg);
+}
+/** Draw a horizontal divider across a region at a relative row */
+function drawHDivider(screen, region, relRow) {
+    const r = region.row + relRow;
+    const fg = exports.CLR.borderDim;
+    screen.write(r, region.col, '├', fg);
+    for (let c = region.col + 1; c < region.col + region.width - 1; c++)
+        screen.write(r, c, '─', fg);
+    screen.write(r, region.col + region.width - 1, '┤', fg);
+}
+/** Pad/truncate string to exact width */
+function fit(s, width, align = 'left') {
+    if (s.length > width)
+        return s.slice(0, width - 1) + '…';
+    if (align === 'right')
+        return s.padStart(width);
+    return s.padEnd(width);
+}
+/** Build sparkline from values */
+function sparkline(values, colorFn) {
+    if (values.length === 0)
+        return [];
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    const blocks = '▁▂▃▄▅▆▇█';
+    return values.map(v => {
+        const idx = Math.round(((v - min) / range) * 7);
+        return { text: blocks[idx], fg: colorFn ? colorFn(v) : exports.CLR.dim };
+    });
+}

package/dist/tui/chart.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ASCII area chart using block characters
+ *
+ * Uses ▁▂▃▄▅▆▇█ to draw a filled area chart that fills the width.
+ * Much cleaner than box-drawing line charts for small datasets.
+ */
+import type { ScreenBuffer } from './screen.js';
+/**
+ * Draw an area chart at the given position.
+ *
+ * @param screen  - ScreenBuffer to write to
+ * @param row     - Top-left row of chart area
+ * @param col     - Left column (after Y-axis labels)
+ * @param width   - Total width including Y-axis labels
+ * @param height  - Total height including X-axis row
+ * @param values  - Data points (raw numbers)
+ * @param labels  - Optional X-axis labels
+ */
+export declare function drawChart(screen: ScreenBuffer, row: number, col: number, width: number, height: number, values: number[], labels?: string[]): void;

package/dist/tui/chart.js

@@ -0,0 +1,117 @@
+"use strict";
+/**
+ * ASCII area chart using block characters
+ *
+ * Uses ▁▂▃▄▅▆▇█ to draw a filled area chart that fills the width.
+ * Much cleaner than box-drawing line charts for small datasets.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawChart = drawChart;
+const border_js_1 = require("./border.js");
+/**
+ * Draw an area chart at the given position.
+ *
+ * @param screen  - ScreenBuffer to write to
+ * @param row     - Top-left row of chart area
+ * @param col     - Left column (after Y-axis labels)
+ * @param width   - Total width including Y-axis labels
+ * @param height  - Total height including X-axis row
+ * @param values  - Data points (raw numbers)
+ * @param labels  - Optional X-axis labels
+ */
+function drawChart(screen, row, col, width, height, values, labels) {
+    if (values.length === 0 || width < 10 || height < 4)
+        return;
+    const yLabelWidth = 8;
+    const chartWidth = width - yLabelWidth - 1;
+    const chartHeight = height - 2; // reserve bottom for x-axis + labels
+    if (chartWidth < 4 || chartHeight < 2)
+        return;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    // Interpolate values to fill chart width
+    const interpolated = [];
+    for (let c = 0; c < chartWidth; c++) {
+        const t = (c / (chartWidth - 1)) * (values.length - 1);
+        const lo = Math.floor(t);
+        const hi = Math.min(lo + 1, values.length - 1);
+        const frac = t - lo;
+        interpolated.push(values[lo] * (1 - frac) + values[hi] * frac);
+    }
+    // Y-axis: show 3 labels (top, zero if in range, bottom)
+    const chartCol = col + yLabelWidth + 1;
+    const yLabels = [
+        { row: 0, value: max },
+        { row: chartHeight - 1, value: min },
+    ];
+    // Add zero line if range crosses zero
+    let zeroChartRow = -1;
+    if (min < 0 && max > 0) {
+        zeroChartRow = Math.round((max / range) * (chartHeight - 1));
+        if (zeroChartRow > 0 && zeroChartRow < chartHeight - 1) {
+            yLabels.push({ row: zeroChartRow, value: 0 });
+        }
+    }
+    // Draw Y-axis
+    for (let r = 0; r < chartHeight; r++) {
+        screen.write(row + r, col + yLabelWidth, '│', border_js_1.CLR.borderDim);
+    }
+    for (const yl of yLabels) {
+        const fmt = Math.abs(yl.value) >= 100
+            ? `$${(yl.value >= 0 ? '+' : '') + yl.value.toFixed(0)}`
+            : `$${(yl.value >= 0 ? '+' : '') + yl.value.toFixed(1)}`;
+        screen.write(row + yl.row, col, fmt.padStart(yLabelWidth), border_js_1.CLR.dim);
+    }
+    // Zero line (dashed)
+    if (zeroChartRow >= 0 && zeroChartRow < chartHeight) {
+        for (let c = 0; c < chartWidth; c++) {
+            screen.write(row + zeroChartRow, chartCol + c, '╌', border_js_1.CLR.veryDim);
+        }
+    }
+    // Draw area chart using block characters
+    // Each column: compute how high the bar should go
+    const blocks = ' ▁▂▃▄▅▆▇█';
+    for (let c = 0; c < chartWidth; c++) {
+        const val = interpolated[c];
+        // Normalize to 0..1 (0=min, 1=max)
+        const norm = (val - min) / range;
+        // Height in sub-rows (chartHeight * 8 granularity levels)
+        const barHeight = norm * chartHeight * 8;
+        const color = val >= 0 ? border_js_1.CLR.green : border_js_1.CLR.red;
+        // Fill from bottom up
+        for (let r = chartHeight - 1; r >= 0; r--) {
+            const rowFromBottom = chartHeight - 1 - r;
+            const fillLevel = barHeight - rowFromBottom * 8;
+            if (fillLevel >= 8) {
+                // Full block
+                screen.write(row + r, chartCol + c, '█', color);
+            }
+            else if (fillLevel > 0) {
+                // Partial block
+                const idx = Math.round(Math.max(1, Math.min(fillLevel, 8)));
+                screen.write(row + r, chartCol + c, blocks[idx], color);
+            }
+            // else: empty (space), already default
+        }
+    }
+    // X-axis
+    const xRow = row + chartHeight;
+    screen.write(xRow, col + yLabelWidth, '└', border_js_1.CLR.borderDim);
+    for (let c = 0; c < chartWidth; c++) {
+        screen.write(xRow, chartCol + c, '─', border_js_1.CLR.borderDim);
+    }
+    // X-axis labels
+    if (labels && labels.length > 0) {
+        const labelRow = row + chartHeight + 1;
+        const numLabels = Math.min(labels.length, 6);
+        for (let i = 0; i < numLabels; i++) {
+            const srcIdx = Math.round(i * (labels.length - 1) / Math.max(numLabels - 1, 1));
+            const xPos = chartCol + Math.round(srcIdx * (chartWidth - 1) / Math.max(labels.length - 1, 1));
+            const label = labels[srcIdx] || '';
+            if (xPos >= chartCol && xPos + label.length < col + width) {
+                screen.write(labelRow, xPos, label.slice(0, 5), border_js_1.CLR.dim);
+            }
+        }
+    }
+}

package/dist/tui/dashboard.d.ts

@@ -0,0 +1,9 @@
+/**
+ * TUI Dashboard Engine — main loop
+ *
+ * Manages the render loop, data loading, keypress handling, and mode transitions.
+ * This is NOT the commander entry point — see commands/dashboard.ts for that.
+ */
+import { type DashboardState } from './state.js';
+export declare function loadAllData(state: DashboardState): Promise<void>;
+export declare function startDashboard(): Promise<void>;