@johannus22/opencode-tps-meter 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jeyyy-arr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# opencode-tps-meter
+
+A plugin for [OpenCode](https://opencode.ai) that displays a live **Tokens Per Second (TPS)** meter with a visual bar indicator in the terminal UI.
+
+## Features
+
+- **Live TPS display** — real-time token generation speed with a 5-second rolling window
+- **Visual bar indicator** — fills proportionally to show performance at a glance
+- **Color-coded performance**:
+  - 🔴 Red: < 10 TPS (slow)
+  - 🟡 Yellow: 10-30 TPS (moderate)
+  - 🟢 Green: 30+ TPS (fast)
+- **Total tokens counter** — running count of tokens streamed in current response
+- **Elapsed time** — live timer since streaming started
+- **Session summary** — shows final TPS and total tokens when streaming completes
+
+## Display Format
+
+```
+TPS ▓▓▓▓▓░░░░░ 25.3 | 847 tok | 3.2s
+```
+
+## Installation
+
+### Via npm
+
+1. Add the plugin to your `opencode.json`:
+
+```json
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": ["@johannus22/opencode-tps-meter"]
+}
+```
+
+2. Install the package:
+
+```bash
+cd ~/.opencode
+npm install @johannus22/opencode-tps-meter
+```
+
+### Via local plugin
+
+Copy `src/index.tsx` to your plugin directory:
+
+- `.opencode/plugins/` — Project-level
+- `~/.config/opencode/plugins/` — Global
+
+## Requirements
+
+- OpenCode >= 1.3.14
+- OpenCode TUI (Web UI not supported)
+
+## How it works
+
+The plugin hooks into OpenCode's message streaming events:
+
+- **`message.part.delta`** — tracks token deltas as they arrive from the AI model
+- **`message.updated`** — detects completion and shows session summary
+- **`message.part.updated`** — clears live data when tool calls run
+- Calculates TPS using a 5-second rolling window
+- Estimates tokens using byte-length heuristic (~5 bytes per token)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import type { TuiPlugin } from "@opencode-ai/plugin/tui";
+declare const _default: {
+    id: string;
+    tui: TuiPlugin;
+};
+export default _default;

package/dist/index.jsx

@@ -0,0 +1,215 @@
+/** @jsxImportSource @opentui/solid */
+import { createSignal, createMemo } from "solid-js";
+const BAR_LENGTH = 10;
+const MAX_TPS_FOR_BAR = 50;
+const SAMPLE_WINDOW_MS = 5000;
+const LIVE_STALE_MS = 1500;
+const SINGLE_SAMPLE_MIN_MS = 250;
+const SINGLE_SAMPLE_MAX_MS = 1000;
+function estimateTokens(text) {
+    const byteLen = new TextEncoder().encode(text).length;
+    return Math.max(1, Math.ceil(byteLen / 5));
+}
+function formatTps(value) {
+    if (value < 0)
+        return "-";
+    if (value < 10)
+        return value.toFixed(2);
+    if (value < 100)
+        return value.toFixed(1);
+    return Math.round(value).toString();
+}
+function formatTokens(count) {
+    if (count >= 1000)
+        return `${(count / 1000).toFixed(1)}k`;
+    return count.toString();
+}
+function formatElapsed(ms) {
+    const seconds = ms / 1000;
+    if (seconds < 60)
+        return `${seconds.toFixed(1)}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}m ${remainingSeconds}s`;
+}
+function buildBar(tps) {
+    if (tps < 0)
+        return "░".repeat(BAR_LENGTH);
+    const filled = Math.min(BAR_LENGTH, Math.round((tps / MAX_TPS_FOR_BAR) * BAR_LENGTH));
+    const empty = BAR_LENGTH - filled;
+    return "▓".repeat(filled) + "░".repeat(empty);
+}
+function getTpsColor(tps, theme) {
+    if (tps < 0)
+        return theme.textMuted;
+    if (tps < 10)
+        return theme.error;
+    if (tps < 30)
+        return theme.warning;
+    return theme.success;
+}
+function calcTps(samples) {
+    if (samples.length === 0)
+        return -1;
+    if (samples.length === 1) {
+        const elapsed = Date.now() - samples[0].timestamp;
+        const duration = Math.max(SINGLE_SAMPLE_MIN_MS, Math.min(elapsed, SINGLE_SAMPLE_MAX_MS));
+        return (samples[0].tokens / duration) * 1000;
+    }
+    const now = Date.now();
+    const cutoff = now - SAMPLE_WINDOW_MS;
+    const active = samples.filter((s) => s.timestamp >= cutoff);
+    if (active.length === 0)
+        return -1;
+    const last = active[active.length - 1];
+    if (now - last.timestamp > LIVE_STALE_MS)
+        return -1;
+    let totalDuration = 0;
+    for (let i = 1; i < active.length; i++) {
+        totalDuration += Math.max(0, active[i].timestamp - active[i - 1].timestamp);
+    }
+    const tail = now - active[active.length - 1].timestamp;
+    totalDuration += Math.min(tail, 1000);
+    totalDuration = Math.max(totalDuration, SINGLE_SAMPLE_MIN_MS);
+    const totalTokens = active.reduce((sum, s) => sum + s.tokens, 0);
+    return (totalTokens / totalDuration) * 1000;
+}
+const tui = async (api, _options, _meta) => {
+    const sessions = new Map();
+    const [version, setVersion] = createSignal(0);
+    const [tick, setTick] = createSignal(0);
+    function getState(sessionID) {
+        let state = sessions.get(sessionID);
+        if (!state) {
+            state = {
+                samples: [],
+                totalTokens: 0,
+                startTime: Date.now(),
+                completed: false,
+                finalTps: 0,
+            };
+            sessions.set(sessionID, state);
+        }
+        return state;
+    }
+    function clearSession(sessionID) {
+        sessions.delete(sessionID);
+        setVersion((v) => v + 1);
+    }
+    const unsubDelta = api.event.on("message.part.delta", (evt) => {
+        const sessionID = evt.properties.sessionID;
+        if (!sessionID)
+            return;
+        if (api.state.session.status(sessionID)?.type === "idle")
+            return;
+        if (evt.properties.field !== "text")
+            return;
+        const parts = api.state.part(evt.properties.messageID);
+        const hasTextOrReasoning = parts?.some((p) => p.type === "text" || p.type === "reasoning");
+        if (!hasTextOrReasoning)
+            return;
+        const deltaText = evt.properties.delta;
+        if (!deltaText || typeof deltaText !== "string")
+            return;
+        const tokens = estimateTokens(deltaText);
+        const now = Date.now();
+        const state = getState(sessionID);
+        state.samples.push({ tokens, timestamp: now });
+        state.totalTokens += tokens;
+        state.completed = false;
+        setVersion((v) => v + 1);
+    });
+    const unsubUpdated = api.event.on("message.updated", (evt) => {
+        const info = evt.properties.info;
+        if (info.role !== "assistant")
+            return;
+        const sessionID = info.sessionID;
+        const state = sessions.get(sessionID);
+        if (!state)
+            return;
+        if (info.time.completed) {
+            state.completed = true;
+            state.finalTps = calcTps(state.samples);
+            setVersion((v) => v + 1);
+        }
+    });
+    const unsubPartUpdated = api.event.on("message.part.updated", (evt) => {
+        const part = evt.properties.part;
+        if (part.type !== "tool")
+            return;
+        const sessionID = part.sessionID;
+        const state = part.state;
+        if (state?.status === "running" || state?.status === "completed" || state?.status === "error") {
+            clearSession(sessionID);
+        }
+    });
+    const interval = setInterval(() => {
+        const now = Date.now();
+        const cutoff = now - SAMPLE_WINDOW_MS;
+        for (const [, state] of sessions) {
+            const pruned = state.samples.filter((s) => s.timestamp >= cutoff);
+            if (pruned.length !== state.samples.length) {
+                state.samples = pruned;
+            }
+        }
+        setTick((t) => t + 1);
+    }, 1000);
+    api.lifecycle.onDispose(() => {
+        unsubDelta();
+        unsubUpdated();
+        unsubPartUpdated();
+        clearInterval(interval);
+    });
+    api.slots.register({
+        slots: {
+            session_prompt_right(ctx, props) {
+                const sessionID = props.session_id;
+                const liveData = createMemo(() => {
+                    version();
+                    tick();
+                    const state = sessions.get(sessionID);
+                    if (!state)
+                        return null;
+                    const tps = calcTps(state.samples);
+                    const elapsed = Date.now() - state.startTime;
+                    const isLive = tps >= 0;
+                    return {
+                        tps,
+                        totalTokens: state.totalTokens,
+                        elapsed,
+                        isLive,
+                        completed: state.completed,
+                        finalTps: state.finalTps,
+                    };
+                });
+                return (<text>
+            {(() => {
+                        const data = liveData();
+                        if (!data)
+                            return null;
+                        if (data.completed) {
+                            const color = getTpsColor(data.finalTps, ctx.theme.current);
+                            return (<text fg={color}>
+                    TPS {formatTps(data.finalTps)} | {formatTokens(data.totalTokens)} tok
+                  </text>);
+                        }
+                        if (!data.isLive) {
+                            return (<text fg={ctx.theme.current.textMuted}>
+                    TPS - | {formatTokens(data.totalTokens)} tok | {formatElapsed(data.elapsed)}
+                  </text>);
+                        }
+                        const color = getTpsColor(data.tps, ctx.theme.current);
+                        const bar = buildBar(data.tps);
+                        return (<text fg={color}>
+                  TPS {bar} {formatTps(data.tps)} | {formatTokens(data.totalTokens)} tok | {formatElapsed(data.elapsed)}
+                </text>);
+                    })()}
+          </text>);
+            },
+        },
+    });
+};
+export default {
+    id: "opencode-tps-meter",
+    tui,
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@johannus22/opencode-tps-meter",
+  "version": "0.1.0",
+  "description": "Live tokens-per-second meter with visual bar indicator for OpenCode TUI",
+  "type": "module",
+  "scripts": {
+    "build": "tsc --pretty false",
+    "typecheck": "tsc --noEmit --pretty false",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run build"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.jsx",
+      "types": "./dist/index.d.ts"
+    },
+    "./tui": {
+      "import": "./dist/index.jsx",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "opencode": ">=1.3.14"
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": "*",
+    "@opentui/core": "*",
+    "@opentui/solid": "*",
+    "solid-js": "*"
+  },
+  "keywords": [
+    "opencode",
+    "plugin",
+    "tps",
+    "tokens-per-second",
+    "performance",
+    "meter",
+    "solid-js"
+  ],
+  "author": "jeyyy-arr",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jeyyy-arr/opencode-tps-meter.git"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.2"
+  }
+}