opencode-top 3.2.1 → 3.3.0

package/bin/octop.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { dirname, join } from "path";
-import { fileURLToPath } from "url";
+import { fileURLToPath, pathToFileURL } from "url";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-await import(join(__dirname, "..", "dist", "cli.mjs"));
+await import(pathToFileURL(join(__dirname, "..", "dist", "cli.mjs")).href);

package/dist/cli.mjs

@@ -17935,10 +17935,10 @@ var Ink = class {
       this.fullStaticOutput += staticOutput;
     }
     if (outputHeight >= this.options.stdout.rows) {
-      this.log.clear();
-      if (this.fullStaticOutput) this.options.stdout.write(this.fullStaticOutput);
-      this.log(output);
-      this.lastOutput = output;
+      if (output !== this.lastOutput) {
+        this.log(output);
+        this.lastOutput = output;
+      }
       return;
     }
     if (hasStaticOutput) {
@@ -18427,29 +18427,19 @@ var TABS = [
   { id: "overview", label: "Overview", key: "3" }
 ];
 function TabBarInner({ activeScreen, lastRefresh }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { paddingX: 1, borderStyle: "single", borderColor: colors.border, flexDirection: "row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: colors.accent, bold: true, children: [
-      "OCMonitor",
-      " "
-    ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box_default, { paddingX: 1, height: 1, flexDirection: "row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.accent, bold: true, children: "oc-top " }),
     TABS.map((tab2) => {
       const isActive = tab2.id === activeScreen;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        Text,
-        {
-          color: isActive ? colors.accent : colors.textDim,
-          bold: isActive,
-          children: [
-            "[",
-            tab2.key,
-            "]",
-            isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: colors.text, children: [
-              " ",
-              tab2.label
-            ] }) : ` ${tab2.label}`
-          ]
-        }
-      ) }, tab2.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { marginRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: isActive ? colors.accent : colors.textDim, bold: isActive, children: [
+        "[",
+        tab2.key,
+        "]",
+        isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { color: colors.text, children: [
+          " ",
+          tab2.label
+        ] }) : ` ${tab2.label}`
+      ] }) }, tab2.id);
     }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box_default, { flexGrow: 1 }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { color: colors.textDim, children: lastRefresh.toLocaleTimeString() })
@@ -18464,7 +18454,7 @@ var import_react28 = __toESM(require_react(), 1);
 var import_react23 = __toESM(require_react(), 1);
 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
 function StatusBarInner({ hints, info }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box_default, { paddingX: 1, borderStyle: "single", borderColor: colors.border, flexDirection: "row", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box_default, { paddingX: 1, height: 1, flexDirection: "row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { color: colors.textDim, children: hints }),
     info && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box_default, { flexGrow: 1 }),
@@ -20955,6 +20945,15 @@ function formatCost(d) {
   if (d.lessThan(0.01)) return `$${d.toFixed(4)}`;
   return `$${d.toFixed(2)}`;
 }
+function formatDate(ts) {
+  if (!ts) return "";
+  const d = new Date(ts);
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  const hh = String(d.getHours()).padStart(2, "0");
+  const min2 = String(d.getMinutes()).padStart(2, "0");
+  return `${mm}/${dd} ${hh}:${min2}`;
+}
 function AgentTreeInner({ workflows, selectedId, flatNodes, maxHeight = 20 }) {
   const headerHeight = 2;
   const visibleCount = Math.max(1, maxHeight - headerHeight);
@@ -20980,7 +20979,8 @@ function AgentTreeInner({ workflows, selectedId, flatNodes, maxHeight = 20 }) {
       const indent = "  ".repeat(node.depth);
       const prefix = node.depth === 0 ? node.hasChildren ? "\u25B6 " : "\u25CF " : node.hasChildren ? "\u251C\u25B6 " : "\u251C\u2500 ";
       const label = node.depth === 0 ? truncate2(node.session.title ?? node.session.projectName ?? "Untitled", 22) : truncate2(`[${agentName ?? "?"}] ${node.session.title ?? ""}`, 20);
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box_default, { flexDirection: "row", children: [
+      const date = formatDate(node.session.timeCreated);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box_default, { flexDirection: "row", height: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box_default, { width: 1 }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           Text,
@@ -20996,6 +20996,10 @@ function AgentTreeInner({ workflows, selectedId, flatNodes, maxHeight = 20 }) {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box_default, { flexGrow: 1 }),
+        date && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Text, { color: colors.textDim, children: [
+          date,
+          " "
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.textDim, dimColor: true, children: formatTokens(tokens.total) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box_default, { width: 1 }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: colors.success, children: formatCost(cost) }),
@@ -21261,7 +21265,9 @@ function buildLines(session, contentWidth, expandedIds) {
       modelId: interaction.modelId,
       agent: interaction.agent ?? null,
       duration: dur,
-      time: formatTime(interaction.time.created)
+      time: formatTime(interaction.time.created),
+      tokensIn: interaction.tokens.input + interaction.tokens.cacheRead,
+      tokensOut: interaction.tokens.output
     });
     for (const part of interaction.parts) {
       if (part.type === "tool") {
@@ -21338,6 +21344,11 @@ function wrapText2(text, maxLen) {
   }
   return out;
 }
+function formatTokens4(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return String(n);
+}
 function formatTime(ts) {
   if (!ts) return "";
   return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
@@ -21462,13 +21473,23 @@ function MessagesPanelInner({ session, maxHeight, isActive }) {
           return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { flexDirection: "row", height: 1, children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: isCursor ? colors.accent : colors.textDim, children: isCursor ? "\u203A" : " " }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: isCursor ? colors.accent : colors.purple, bold: true, children: "\u25C6 " }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: isCursor ? colors.accent : colors.info, children: truncate4(line.modelId, 26) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: isCursor ? colors.accent : colors.info, children: truncate4(line.modelId, 22) }),
             line.agent && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.cyan, children: [
               " [",
               line.agent,
               "]"
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box_default, { flexGrow: 1 }),
+            line.tokensIn > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.textDim, children: [
+              "\u2193",
+              formatTokens4(line.tokensIn),
+              " "
+            ] }),
+            line.tokensOut > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.textDim, children: [
+              "\u2191",
+              formatTokens4(line.tokensOut),
+              " "
+            ] }),
             line.duration && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.textDim, children: [
               line.duration,
               " "
@@ -21898,7 +21919,7 @@ var SparkLine = (0, import_react30.memo)(SparkLineInner);
 
 // src/ui/screens/OverviewScreen.tsx
 var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
-function formatTokens4(n) {
+function formatTokens5(n) {
   if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
   if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
   return n.toString();
@@ -21979,16 +22000,16 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textDim, children: [
         workflows.length,
         " workflows  ",
-        stats.totalTokens.total > 0 ? formatTokens4(stats.totalTokens.total) + " tokens" : ""
+        stats.totalTokens.total > 0 ? formatTokens5(stats.totalTokens.total) + " tokens" : ""
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "row", flexGrow: 1, paddingX: 1, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box_default, { flexDirection: "column", width: leftW, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionHeader, { title: "Totals" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "Total tokens", value: formatTokens4(stats.totalTokens.total) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "  input", value: formatTokens4(stats.totalTokens.input), color: colors.info }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "  output", value: formatTokens4(stats.totalTokens.output), color: colors.cyan }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "  cache r/w", value: `${formatTokens4(stats.totalTokens.cacheRead)} / ${formatTokens4(stats.totalTokens.cacheWrite)}`, color: colors.textDim }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "Total tokens", value: formatTokens5(stats.totalTokens.total) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "  input", value: formatTokens5(stats.totalTokens.input), color: colors.info }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "  output", value: formatTokens5(stats.totalTokens.output), color: colors.cyan }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "  cache r/w", value: `${formatTokens5(stats.totalTokens.cacheRead)} / ${formatTokens5(stats.totalTokens.cacheWrite)}`, color: colors.textDim }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRow2, { label: "Total cost", value: `$${stats.totalCost.toFixed(4)}`, color: colors.success }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionHeader, { title: "Token trend (7d)" }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SparkLine, { values: weeklyTokenValues, color: colors.cyan }) }),
@@ -21997,7 +22018,7 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexGrow: 1 }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textDim, children: [
             "peak ",
-            formatTokens4(maxWeeklyTokens)
+            formatTokens5(maxWeeklyTokens)
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box_default, { flexGrow: 1 }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.textDim, children: stats.weeklyTokens[6]?.date.slice(3) ?? "" })
@@ -22095,7 +22116,7 @@ function OverviewScreenInner({ workflows, isActive, contentHeight, terminalWidth
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { color: colors.info, children: data.calls }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { color: colors.textDim, children: [
             " ",
-            formatTokens4(data.tokens)
+            formatTokens5(data.tokens)
           ] })
         ] }, model))
       ] })
@@ -22433,7 +22454,7 @@ function App2({ refreshInterval = 2e3 }) {
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box_default, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { color: colors.textDim, children: "Press q to quit" }) })
     ] });
   }
-  const contentHeight = terminalHeight - 3;
+  const contentHeight = terminalHeight - 2;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box_default, { flexDirection: "column", width: terminalWidth, height: terminalHeight - 1, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabBar, { activeScreen: screen, lastRefresh }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box_default, { width: terminalWidth, height: contentHeight, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-top",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Monitor OpenCode AI coding sessions - Token usage, costs, and agent analytics",
   "type": "module",
   "bin": {

package/patches/ink+5.2.1.patch

@@ -1,13 +1,8 @@
---- /tmp/ink.js.orig	2026-03-15 03:32:19.803923699 +0100
-+++ node_modules/ink/build/ink.js	2026-03-15 03:32:24.220762248 +0100
-@@ -119,7 +119,9 @@
-             this.fullStaticOutput += staticOutput;
-         }
-         if (outputHeight >= this.options.stdout.rows) {
--            this.options.stdout.write(ansiEscapes.clearTerminal + this.fullStaticOutput + output);
-+            this.log.clear();
-+            if (this.fullStaticOutput) this.options.stdout.write(this.fullStaticOutput);
-+            this.log(output);
-             this.lastOutput = output;
-             return;
-         }
+122,123c122,125
+<             this.options.stdout.write(ansiEscapes.clearTerminal + this.fullStaticOutput + output);
+<             this.lastOutput = output;
+---
+>             if (output !== this.lastOutput) {
+>                 this.log(output);
+>                 this.lastOutput = output;
+>             }