@oh-my-sidebar/opencode-session-tokens 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# @oh-my-sidebar/opencode-session-tokens
+
+OpenCode TUI sidebar plugin that displays the current session's token usage breakdown by model.
+
+## Features
+
+- Total session token count
+- Per-model token breakdown
+- Expandable/collapsible details view
+- Supports input, output, reasoning, and cache write tokens
+
+## Installation
+
+```bash
+npm install @oh-my-sidebar/opencode-session-tokens
+```
+
+## Usage
+
+Add the plugin to your OpenCode TUI configuration (`tui.jsonc`):
+
+```jsonc
+{
+  "plugin": [
+    "@oh-my-sidebar/opencode-session-tokens"
+  ]
+}
+```
+
+## License
+
+MIT

package/dist/tui.tsx

@@ -0,0 +1,119 @@
+/** @jsxImportSource @opentui/solid */
+import { createMemo, createSignal, For, Show } from "solid-js"
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
+
+const MAX_MODEL_ROWS = 10
+const INT_FORMATTER = new Intl.NumberFormat("en-US")
+
+function safeNumber(value: unknown): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0
+}
+
+function spentTokenCount(tokens: any): number {
+  const input = safeNumber(tokens?.input)
+  const output = safeNumber(tokens?.output)
+  const reasoning = safeNumber(tokens?.reasoning)
+  const cacheWrite = safeNumber(tokens?.cache?.write)
+  return input + output + reasoning + cacheWrite
+}
+
+function formatInt(value: number): string {
+  return INT_FORMATTER.format(Math.max(0, Math.round(value)))
+}
+
+function shortModelLabel(label: string): string {
+  if (label.length <= 28) return label
+  return `${label.slice(0, 25)}...`
+}
+
+function View(props: { api: TuiPluginApi; sessionID: string }) {
+  const [open, setOpen] = createSignal(false)
+  const theme = () => props.api.theme.current
+  const messages = createMemo(() => props.api.state.session.messages(props.sessionID) as any[])
+  const session = createMemo(() => props.api.state.session.get(props.sessionID) as any)
+
+  const data = createMemo(() => {
+    const totals = new Map<string, number>()
+    let breakdownTotal = 0
+    const seen = new Set<string>()
+
+    for (const message of messages()) {
+      const role = message?.role ?? message?.info?.role
+      if (role !== "assistant") continue
+
+      const messageID = message?.id
+      if (typeof messageID === "string" && seen.has(messageID)) continue
+      if (typeof messageID === "string") seen.add(messageID)
+
+      const count = spentTokenCount(message?.tokens)
+      if (count <= 0) continue
+
+      const modelID = message?.modelID ?? message?.info?.modelID ?? "unknown"
+
+      breakdownTotal += count
+      totals.set(modelID, (totals.get(modelID) ?? 0) + count)
+    }
+
+    const perModel = [...totals.entries()]
+      .map(([model, tokens]) => ({ model, tokens }))
+      .sort((a, b) => b.tokens - a.tokens)
+
+    const sessionTotal = spentTokenCount(session()?.tokens)
+    const total = breakdownTotal > 0 ? breakdownTotal : sessionTotal
+
+    return {
+      total,
+      perModel,
+    }
+  })
+
+  const show = createMemo(() => data().total > 0)
+  const canExpand = createMemo(() => data().perModel.length > 0)
+
+  return (
+    <Show when={show()}>
+      <box>
+        <box flexDirection="row" gap={1} onMouseDown={() => canExpand() && setOpen((x) => !x)}>
+          <Show when={canExpand()}>
+            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+          </Show>
+          <text fg={theme().text}>
+            <b>Session Tokens</b>
+          </text>
+          <text fg={theme().textMuted}>{formatInt(data().total)}</text>
+        </box>
+
+        <Show when={canExpand() && open()}>
+          <For each={data().perModel.slice(0, MAX_MODEL_ROWS)}>{(row) => (
+            <box flexDirection="row">
+              <text fg={theme().textMuted}>{shortModelLabel(row.model)}</text>
+              <box flexGrow={1} />
+              <text fg={theme().textMuted}>{formatInt(row.tokens)}</text>
+            </box>
+          )}</For>
+          <Show when={data().perModel.length > MAX_MODEL_ROWS}>
+            <text fg={theme().textMuted}>+{data().perModel.length - MAX_MODEL_ROWS} more</text>
+          </Show>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 120,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return <View api={api} sessionID={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id: "oh-my-sidebar.session-tokens",
+  tui,
+}
+
+export default plugin

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@oh-my-sidebar/opencode-session-tokens",
+  "version": "0.1.0",
+  "description": "OpenCode TUI sidebar plugin for session token usage breakdown",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/edso404/oh-my-sidebar",
+    "directory": "packages/session-tokens"
+  },
+  "homepage": "https://github.com/edso404/oh-my-sidebar/tree/main/packages/session-tokens",
+  "bugs": {
+    "url": "https://github.com/edso404/oh-my-sidebar/issues"
+  },
+  "type": "module",
+  "exports": {
+    "./tui": "./dist/tui.tsx"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && mkdir -p dist && cp src/index.tsx dist/tui.tsx",
+    "prepublishOnly": "pnpm build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "sidebar",
+    "tokens"
+  ],
+  "license": "MIT",
+  "engines": {
+    "opencode": ">=1.4.3"
+  },
+  "dependencies": {
+    "@opencode-ai/plugin": "catalog:",
+    "@opentui/core": "catalog:",
+    "@opentui/solid": "catalog:",
+    "solid-js": "catalog:"
+  }
+}