opencode-top 3.2.2 → 3.3.1

package/dist/cli.mjs

@@ -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) }),
@@ -21252,16 +21256,23 @@ var import_react27 = __toESM(require_react(), 1);
 var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
 function buildLines(session, contentWidth, expandedIds) {
   const lines = [];
+  let cumTokens = 0;
   for (const interaction of session.interactions) {
     if (interaction.role !== "assistant") continue;
+    cumTokens += interaction.tokens.input + interaction.tokens.cacheRead + interaction.tokens.output;
     const dur = interaction.time.completed && interaction.time.created ? formatDuration2(interaction.time.completed - interaction.time.created) : "";
+    const tokensIn = interaction.tokens.input + interaction.tokens.cacheRead;
+    const tokensOut = interaction.tokens.output;
     lines.push({
       id: `h-${interaction.id}`,
       kind: "header",
       modelId: interaction.modelId,
       agent: interaction.agent ?? null,
       duration: dur,
-      time: formatTime(interaction.time.created)
+      time: formatTime(interaction.time.created),
+      tokensIn,
+      tokensOut,
+      cumTokens
     });
     for (const part of interaction.parts) {
       if (part.type === "tool") {
@@ -21280,24 +21291,25 @@ function buildLines(session, contentWidth, expandedIds) {
           name: truncate4(p.toolName, 18),
           title: p.title ? truncate4(p.title, 28) : "",
           right: exitStr + dur2,
-          expanded
+          expanded,
+          cumTokens
         });
         if (expanded) {
           const inputKeys = Object.keys(p.input);
           if (inputKeys.length > 0) {
-            lines.push({ id: `td-${p.callId}-in`, kind: "tool-detail", label: "input", value: "", isSection: true });
+            lines.push({ id: `td-${p.callId}-in`, kind: "tool-detail", label: "input", value: "", isSection: true, cumTokens });
             for (const key of inputKeys) {
               const val = formatParamValue(p.input[key], contentWidth - key.length - 6);
-              lines.push({ id: `td-${p.callId}-in-${key}`, kind: "tool-detail", label: key, value: val, isSection: false });
+              lines.push({ id: `td-${p.callId}-in-${key}`, kind: "tool-detail", label: key, value: val, isSection: false, cumTokens });
             }
           }
           if (p.output?.trim()) {
-            lines.push({ id: `td-${p.callId}-out`, kind: "tool-detail", label: "output", value: "", isSection: true });
+            lines.push({ id: `td-${p.callId}-out`, kind: "tool-detail", label: "output", value: "", isSection: true, cumTokens });
             const outLines = p.output.trim().split("\n").slice(0, 40);
             let outIdx = 0;
             for (const ol of outLines) {
               for (const wrapped of wrapText2(ol === "" ? " " : ol, contentWidth - 5)) {
-                lines.push({ id: `td-${p.callId}-out-${outIdx++}`, kind: "tool-detail", label: "", value: wrapped, isSection: false });
+                lines.push({ id: `td-${p.callId}-out-${outIdx++}`, kind: "tool-detail", label: "", value: wrapped, isSection: false, cumTokens });
               }
             }
           }
@@ -21305,12 +21317,12 @@ function buildLines(session, contentWidth, expandedIds) {
       } else if (part.type === "text" && part.text.trim()) {
         let txtIdx = 0;
         for (const row of wrapText2(part.text.trim(), contentWidth - 3)) {
-          lines.push({ id: `tx-${interaction.id}-${txtIdx++}`, kind: "text", text: row });
+          lines.push({ id: `tx-${interaction.id}-${txtIdx++}`, kind: "text", text: row, cumTokens });
         }
       } else if (part.type === "reasoning" && part.text.trim()) {
         let rIdx = 0;
         for (const row of wrapText2(part.text.trim(), contentWidth - 5)) {
-          lines.push({ id: `r-${interaction.id}-${rIdx++}`, kind: "reasoning", text: row });
+          lines.push({ id: `r-${interaction.id}-${rIdx++}`, kind: "reasoning", text: row, cumTokens });
         }
       }
     }
@@ -21338,6 +21350,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" });
@@ -21437,6 +21454,9 @@ function MessagesPanelInner({ session, maxHeight, isActive }) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box_default, { height: maxHeight, paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: colors.textDim, children: "No messages" }) });
   }
   const visibleLines = allLines.slice(clampedOffset, clampedOffset + viewHeight);
+  const cursorLine = allLines[clampedCursor];
+  const cursorCumTokens = cursorLine?.cumTokens ?? 0;
+  const totalTokens = allLines[allLines.length - 1]?.cumTokens ?? 0;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { flexDirection: "column", height: maxHeight, paddingX: 1, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box_default, { flexDirection: "row", height: 1, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.textDim, children: [
@@ -21446,6 +21466,15 @@ function MessagesPanelInner({ session, maxHeight, isActive }) {
         "/",
         allLines.length
       ] }),
+      totalTokens > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: colors.textDim, children: " \xB7 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: colors.info, children: formatTokens4(cursorCumTokens) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.textDim, children: [
+          "/",
+          formatTokens4(totalTokens),
+          " tok"
+        ] })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box_default, { flexGrow: 1 }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.textDim, children: [
         session.interactions.filter((i) => i.role === "assistant").length,
@@ -21462,14 +21491,24 @@ 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.duration && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.textDim, children: [
+            line.tokensIn > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: colors.textDim, children: "\u2193" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: colors.warning, children: formatTokens4(line.tokensIn) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: " " })
+            ] }),
+            line.tokensOut > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: colors.textDim, children: "\u2191" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { color: colors.success, children: formatTokens4(line.tokensOut) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { children: " " })
+            ] }),
+            line.duration && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { color: colors.cyan, children: [
               line.duration,
               " "
             ] }),
@@ -21898,7 +21937,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 +22018,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 +22036,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 +22134,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 +22472,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.2",
+  "version": "3.3.1",
   "description": "Monitor OpenCode AI coding sessions - Token usage, costs, and agent analytics",
   "type": "module",
   "bin": {