@oh-my-sidebar/opencode-context-progress 0.1.0

package/README.md

@@ -0,0 +1,34 @@
+# @oh-my-sidebar/opencode-context-progress
+
+OpenCode TUI sidebar plugin that displays the current session's context usage progress.
+
+## Features
+
+- Real-time context window usage bar
+- Token count and context window limit display
+- Session cost tracking
+- Color-coded warnings (yellow at 70%, red at 90%)
+
+## Installation
+
+```bash
+npm install @oh-my-sidebar/opencode-context-progress
+```
+
+## Usage
+
+Register the plugin in your OpenCode configuration:
+
+```json
+{
+  "plugins": {
+    "oh-my-sidebar.context-progress": {
+      "tui": "@oh-my-sidebar/opencode-context-progress/tui"
+    }
+  }
+}
+```
+
+## License
+
+MIT

package/dist/tui.d.ts

@@ -0,0 +1,7 @@
+import { TuiPluginModule } from '@opencode-ai/plugin/tui';
+
+declare const plugin: TuiPluginModule & {
+    id: string;
+};
+
+export { plugin as default };

package/dist/tui.js

@@ -0,0 +1,111 @@
+// src/index.tsx
+import { TextAttributes } from "@opentui/core";
+import { createMemo } from "solid-js";
+import { jsx, jsxs } from "@opentui/solid/jsx-runtime";
+var BAR_WIDTH = 24;
+function formatInt(value) {
+  return new Intl.NumberFormat("en-US").format(Math.max(0, Math.round(value)));
+}
+function formatMoney(value) {
+  return `$${value.toFixed(2)}`;
+}
+function safeNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function messageTokenCount(message) {
+  const input = safeNumber(message?.tokens?.input);
+  const output = safeNumber(message?.tokens?.output);
+  const reasoning = safeNumber(message?.tokens?.reasoning);
+  const cacheRead = safeNumber(message?.tokens?.cache?.read);
+  const cacheWrite = safeNumber(message?.tokens?.cache?.write);
+  return input + output + reasoning + cacheRead + cacheWrite;
+}
+function buildBar(percent) {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const filled = Math.max(0, Math.min(BAR_WIDTH, Math.round(clamped / 100 * BAR_WIDTH)));
+  return {
+    bar: `${"\u2588".repeat(filled)}${"\u2591".repeat(BAR_WIDTH - filled)}`,
+    clamped
+  };
+}
+function View(props) {
+  const messages = createMemo(() => props.api.state.session.messages(props.sessionID));
+  const sessionCost = createMemo(() => {
+    const sessionState = props.api.state?.session;
+    const fromState = safeNumber(sessionState?.get?.(props.sessionID)?.cost);
+    if (fromState > 0) return fromState;
+    return messages().filter((m) => (m?.role ?? m?.info?.role) === "assistant").reduce((sum, m) => sum + safeNumber(m?.cost), 0);
+  });
+  const usage = createMemo(() => {
+    const lastAssistant = messages().findLast((m) => {
+      const role = m?.role ?? m?.info?.role;
+      const output = safeNumber(m?.tokens?.output);
+      return role === "assistant" && output > 0;
+    });
+    if (!lastAssistant) {
+      return {
+        tokens: 0,
+        contextWindow: 0,
+        percent: 0
+      };
+    }
+    const tokens = messageTokenCount(lastAssistant);
+    const providerID = lastAssistant?.providerID ?? lastAssistant?.info?.providerID;
+    const modelID = lastAssistant?.modelID ?? lastAssistant?.info?.modelID;
+    const model = props.api.state.provider.find((item) => item.id === providerID)?.models?.[modelID];
+    const contextWindow = safeNumber(model?.limit?.context);
+    const percent = contextWindow > 0 ? Math.round(tokens / contextWindow * 100) : 0;
+    return {
+      tokens,
+      contextWindow,
+      percent
+    };
+  });
+  const detailLine = createMemo(() => {
+    const state = usage();
+    const limitText = state.contextWindow > 0 ? formatInt(state.contextWindow) : "--";
+    return `${formatInt(state.tokens)} / ${limitText} / ${formatMoney(sessionCost())}`;
+  });
+  const theme = () => props.api.theme.current;
+  const progress = createMemo(() => {
+    const percent = usage().percent;
+    const bar = buildBar(percent);
+    const color = percent >= 90 ? theme().error : percent >= 70 ? theme().warning : theme().accent;
+    return {
+      bar: bar.bar,
+      color,
+      percent: bar.clamped
+    };
+  });
+  return /* @__PURE__ */ jsxs("box", { children: [
+    /* @__PURE__ */ jsx("text", { fg: theme().text, attributes: TextAttributes.BOLD, children: "Context" }),
+    /* @__PURE__ */ jsxs("box", { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsx("text", { fg: progress().color, children: progress().bar }),
+      /* @__PURE__ */ jsxs("text", { fg: progress().color, children: [
+        " ",
+        progress().percent,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("text", { fg: theme().textMuted, children: detailLine() })
+  ] });
+}
+var tui = async (api) => {
+  const { slots } = api;
+  slots.register({
+    order: 100,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return /* @__PURE__ */ jsx(View, { api, sessionID: props.session_id });
+      }
+    }
+  });
+};
+var plugin = {
+  id: "oh-my-sidebar.context-progress",
+  tui
+};
+var src_default = plugin;
+export {
+  src_default as default
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@oh-my-sidebar/opencode-context-progress",
+  "version": "0.1.0",
+  "description": "OpenCode TUI sidebar plugin for context usage progress",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/edso404/opencode-zanbo-sidebar",
+    "directory": "packages/context-progress"
+  },
+  "homepage": "https://github.com/edso404/opencode-zanbo-sidebar/tree/master/packages/context-progress",
+  "bugs": {
+    "url": "https://github.com/edso404/opencode-zanbo-sidebar/issues"
+  },
+  "type": "module",
+  "exports": {
+    "./tui": {
+      "types": "./dist/tui.d.ts",
+      "import": "./dist/tui.js",
+      "default": "./dist/tui.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "sidebar",
+    "context"
+  ],
+  "license": "MIT",
+  "engines": {
+    "opencode": ">=1.4.3"
+  },
+  "dependencies": {
+    "@opencode-ai/plugin": "catalog:",
+    "@opentui/core": "catalog:",
+    "@opentui/solid": "catalog:",
+    "solid-js": "catalog:"
+  }
+}