opencode-token-tracker 1.6.3 → 1.6.5

package/dist/bin/opencode-tokens.js

@@ -905,67 +905,117 @@ function getTrendValue(point, metric) {
 function formatTrendValue(value, metric) {
     return metric === "tokens" ? formatTokens(value) : metric === "messages" ? String(Math.round(value)) : formatCost(value);
 }
+function formatSignedTrendValue(value, metric) {
+    const sign = value > 0 ? "+" : value < 0 ? "-" : "";
+    return `${sign}${formatTrendValue(Math.abs(value), metric)}`;
+}
 function metricLabel(metric) {
     return metric === "tokens" ? "Token Trend" : metric === "messages" ? "Message Trend" : "Cost Trend";
 }
-function createTrendRows(height, width, gridRows) {
-    const rows = [];
-    for (let row = 0; row < height; row++) {
-        const grid = gridRows.has(row);
-        rows.push(Array.from({ length: width }, (_, x) => grid && x % 2 === 0 ? "·" : " "));
-    }
-    return rows;
-}
-function drawTrendSegment(rows, from, to) {
-    const startX = Math.min(from.x, to.x);
-    const endX = Math.max(from.x, to.x);
-    const slope = to.y - from.y;
-    for (let x = startX; x <= endX; x++) {
-        const t = x === from.x ? 0 : (x - from.x) / (to.x - from.x);
-        const y = Math.round(from.y + slope * t);
-        const char = slope > 0 ? "╱" : slope < 0 ? "╲" : "─";
-        rows[y][x] = char;
+function buildLineRows(points, width, height) {
+    const grid = Array.from({ length: height }, () => Array.from({ length: width }, () => " "));
+    // 1. Calculate the exact integer row r[x] for every column x from 0 to width - 1
+    const r = Array.from({ length: width }, () => 0);
+    for (let x = 0; x < width; x++) {
+        // Find which segment p[i] -> p[i+1] contains x
+        let i = 0;
+        for (; i < points.length - 1; i++) {
+            if (x >= points[i].x && x <= points[i + 1].x) {
+                break;
+            }
+        }
+        // Clamp to valid index
+        if (i >= points.length - 1) {
+            i = points.length - 2;
+        }
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        if (p1.x === p2.x) {
+            r[x] = p1.y;
+        }
+        else {
+            const t = (x - p1.x) / (p2.x - p1.x);
+            const y = p1.y + (p2.y - p1.y) * t;
+            r[x] = Math.round(y);
+        }
     }
-}
-function drawTrendArea(rows, points) {
-    for (let i = 1; i < points.length; i++) {
-        const from = points[i - 1];
-        const to = points[i];
-        const startX = Math.min(from.x, to.x);
-        const endX = Math.max(from.x, to.x);
-        for (let x = startX; x <= endX; x++) {
-            const t = x === from.x ? 0 : (x - from.x) / (to.x - from.x);
-            const y = Math.round(from.y + (to.y - from.y) * t);
-            for (let fillY = 0; fillY < y; fillY++) {
-                if (rows[fillY][x] === " " || rows[fillY][x] === "·") {
-                    rows[fillY][x] = "░";
+    // 2. Plot the line characters based on r[x] and r[x+1]
+    for (let x = 0; x < width; x++) {
+        const rCurr = r[x];
+        if (x === width - 1) {
+            // Last column has no next column, draw horizontal line
+            if (grid[rCurr][x] === " ") {
+                grid[rCurr][x] = "─";
+            }
+            break;
+        }
+        const rNext = r[x + 1];
+        if (rCurr === rNext) {
+            if (grid[rCurr][x] === " ") {
+                grid[rCurr][x] = "─";
+            }
+        }
+        else if (rCurr < rNext) {
+            // Going down (larger row index)
+            if (grid[rCurr][x] === " ") {
+                grid[rCurr][x] = "┐";
+            }
+            for (let y = rCurr + 1; y < rNext; y++) {
+                if (grid[y][x] === " ") {
+                    grid[y][x] = "│";
                 }
             }
+            if (grid[rNext][x] === " ") {
+                grid[rNext][x] = "└";
+            }
+        }
+        else {
+            // Going up (smaller row index)
+            if (grid[rCurr][x] === " ") {
+                grid[rCurr][x] = "┘";
+            }
+            for (let y = rNext + 1; y < rCurr; y++) {
+                if (grid[y][x] === " ") {
+                    grid[y][x] = "│";
+                }
+            }
+            if (grid[rNext][x] === " ") {
+                grid[rNext][x] = "┌";
+            }
         }
     }
+    return grid;
 }
-function drawTrendPoints(rows, points) {
-    for (const point of points) {
-        rows[point.y][point.x] = "●";
-    }
-}
+const ESC = "\x1b";
+const RESET = `${ESC}[0m`;
+const BOLD = `${ESC}[1m`;
+const DIM = `${ESC}[2m`;
+const GRAY = `${ESC}[90m`;
 function buildTrendXAxis(points, chartPoints, chartWidth) {
     const labelChars = Array.from({ length: chartWidth }, () => " ");
+    const tickChars = Array.from({ length: chartWidth }, () => "─");
     const labelStep = Math.max(1, Math.ceil(points.length / 6));
     for (let i = 0; i < chartPoints.length; i++) {
         if (i % labelStep !== 0 && i !== chartPoints.length - 1)
             continue;
         const date = new Date(points[i][0]);
         const label = `${date.getMonth() + 1}/${date.getDate()}`;
-        const start = Math.min(Math.max(0, chartPoints[i].x - Math.floor(label.length / 2)), Math.max(0, chartWidth - label.length));
+        const centerOfLabel = chartPoints[i].x;
+        const start = Math.min(Math.max(0, centerOfLabel - Math.floor(label.length / 2)), Math.max(0, chartWidth - label.length));
         const hasSpace = labelChars.slice(Math.max(0, start - 1), Math.min(chartWidth, start + label.length + 1)).every((c) => c === " ");
         if (!hasSpace)
             continue;
         for (let j = 0; j < label.length; j++) {
             labelChars[start + j] = label[j];
         }
+        if (centerOfLabel < chartWidth) {
+            tickChars[centerOfLabel] = "┬";
+        }
     }
-    return labelChars.join("");
+    return {
+        axisTicks: tickChars.join(""),
+        axisLabels: labelChars.join("")
+    };
 }
 function cmdTrend(flags) {
     const days = parseInt(String(flagValue(flags, "days") ?? "30"), 10);
@@ -1001,10 +1051,16 @@ function cmdTrend(flags) {
     const values = sorted.map(([, d]) => getTrendValue(d, metric));
     const maxVal = Math.max(...values, 1);
     const minVal = Math.min(...values);
+    const valRange = maxVal - minVal;
+    // Adaptive scaling padding (e.g. 5% of range) to show beautiful ups & downs
+    const pad = valRange === 0 ? maxVal * 0.1 : valRange * 0.05;
+    const chartMax = maxVal + pad;
+    const chartMin = Math.max(0, minVal - pad);
+    const chartRange = chartMax - chartMin || 1;
     const totalVal = values.reduce((sum, value) => sum + value, 0);
     const avgVal = totalVal / values.length;
     const deltaVal = values[values.length - 1] - values[0];
-    const H = Math.max(5, Math.min(Math.floor(width / 3), 20));
+    const chartHeight = sorted.length <= 3 ? 6 : Math.max(6, Math.min(Math.floor(width / 4), 12));
     if (width < 35) {
         // Fallback: simple sparkline
         const chars = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
@@ -1013,37 +1069,48 @@ function cmdTrend(flags) {
         return;
     }
     const chartWidth = Math.max(width - 12, 20);
-    const yLabelStep = Math.max(1, Math.floor(H / 5));
-    const gridRows = new Set();
-    for (let row = 0; row < H; row++) {
-        if (row === 0 || row === H - 1 || (H - 1 - row) % yLabelStep === 0) {
-            gridRows.add(row);
-        }
-    }
+    const yLabelStep = Math.max(1, Math.floor(chartHeight / 4));
     const chartPoints = values.map((value, i) => ({
         x: values.length === 1 ? Math.floor(chartWidth / 2) : Math.round((i / (values.length - 1)) * (chartWidth - 1)),
-        y: Math.round((value / maxVal) * (H - 1)),
+        y: Math.max(0, chartHeight - 1 - Math.round(((value - chartMin) / chartRange) * (chartHeight - 1))),
     }));
-    const rows = createTrendRows(H, chartWidth, gridRows);
-    drawTrendArea(rows, chartPoints);
-    for (let i = 1; i < chartPoints.length; i++) {
-        drawTrendSegment(rows, chartPoints[i - 1], chartPoints[i]);
+    const grid = buildLineRows(chartPoints, chartWidth, chartHeight);
+    // Metric premium color themes
+    let metricColor = "\x1b[36m"; // default Cyan
+    if (metric === "cost") {
+        metricColor = "\x1b[32m"; // Green
+    }
+    else if (metric === "messages") {
+        metricColor = "\x1b[33m"; // Yellow
+    }
+    const peakStr = `${metricColor}${BOLD}${formatTrendValue(maxVal, metric)}${RESET}`;
+    const avgStr = `${metricColor}${BOLD}${formatTrendValue(avgVal, metric)}${RESET}`;
+    let deltaColor = "\x1b[32m"; // Green
+    if (metric === "cost") {
+        deltaColor = deltaVal > 0 ? "\x1b[31m" : "\x1b[32m"; // Red for cost increase, Green for decrease
+    }
+    else {
+        deltaColor = deltaVal > 0 ? "\x1b[32m" : "\x1b[31m"; // Green for token/msg increase, Red for decrease
     }
-    drawTrendPoints(rows, chartPoints);
+    const deltaStr = `${deltaColor}${BOLD}${formatSignedTrendValue(deltaVal, metric)}${RESET}`;
     const lines = [];
-    lines.push(`${metricLabel(metric)} · ${sorted.length} days · peak ${formatTrendValue(maxVal, metric)} · avg ${formatTrendValue(avgVal, metric)} · Δ ${deltaVal >= 0 ? "+" : ""}${formatTrendValue(deltaVal, metric)}`);
-    lines.push(`range ${formatTrendValue(minVal, metric)} → ${formatTrendValue(maxVal, metric)}`);
-    for (let row = H - 1; row >= 0; row--) {
-        const valAtRow = (row / (H - 1)) * maxVal;
-        const label = gridRows.has(row)
-            ? formatTrendValue(valAtRow, metric)
-            : "";
-        const line = `${padLeft(label, 9)}${row === 0 ? " ┼" : " ┤"}${rows[row].join("")}`;
+    lines.push(`${metricColor}${BOLD}${metricLabel(metric)}${RESET} · ${sorted.length} days · peak ${peakStr} · avg ${avgStr} · Δ ${deltaStr}`);
+    lines.push(`${GRAY}range ${formatTrendValue(minVal, metric)} → ${formatTrendValue(maxVal, metric)}${RESET}`);
+    // Colorize the line chart points and connection characters
+    const colorRows = grid.map(row => row.map(char => char === " " ? " " : `${metricColor}${char}${RESET}`).join(""));
+    const { axisTicks, axisLabels } = buildTrendXAxis(sorted, chartPoints, chartWidth);
+    for (let row = 0; row < chartHeight; row++) {
+        const valueRatio = 1 - row / (chartHeight - 1);
+        const valAtRow = chartMin + valueRatio * chartRange;
+        const hasLabel = row === 0 || row === chartHeight - 1 || row % yLabelStep === 0;
+        const label = hasLabel ? formatTrendValue(valAtRow, metric) : "";
+        const tick = hasLabel ? "┤" : "│";
+        const line = `${padLeft(label, 9)} ${GRAY}${tick}${RESET}${colorRows[row]}`;
         lines.push(line);
     }
-    const axis = `${" ".repeat(9)} └${"─".repeat(chartWidth)}`;
+    const axis = `${" ".repeat(9)} ${GRAY}└${axisTicks}${RESET}`;
     lines.push(axis);
-    lines.push(`${" ".repeat(11)}${buildTrendXAxis(sorted, chartPoints, chartWidth)}`);
+    lines.push(`${" ".repeat(11)}${GRAY}${axisLabels}${RESET}`);
     console.log();
     for (const l of lines)
         console.log(`  ${l}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-token-tracker",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Real-time token usage and cost tracking plugin for OpenCode with Toast notifications and CLI stats",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",