oc-plugin-litellm-budget 0.1.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "oc-plugin-litellm-budget",
+  "version": "0.1.0",
+  "description": "Display LiteLLM budget usage in OpenCode TUI sidebar and footer",
+  "type": "module",
+  "exports": {
+    "./server": {
+      "import": "./server.ts",
+      "config": {
+        "enabled": true
+      }
+    },
+    "./tui": {
+      "import": "./tui.tsx",
+      "config": {
+        "enabled": true,
+        "sidebar": true,
+        "footer": true
+      }
+    }
+  },
+  "engines": {
+    "opencode": ">=1.3.13"
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": "*",
+    "@opentui/core": "*",
+    "@opentui/solid": "*",
+    "solid-js": "*"
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "litellm",
+    "budget"
+  ],
+  "author": "Binetz",
+  "license": "MIT",
+  "files": [
+    "package.json",
+    "server.ts",
+    "tui.tsx"
+  ]
+}

package/server.ts

@@ -0,0 +1,5 @@
+// @ts-nocheck
+import type { PluginModule } from "@opencode-ai/plugin"
+
+const plugin: PluginModule = {}
+export default plugin

package/tui.tsx

@@ -0,0 +1,162 @@
+// @ts-nocheck
+import type { TuiPlugin, TuiPluginModule } from "@opencode-ai/plugin/tui"
+import { createSignal, onCleanup, Show } from "solid-js"
+
+const POLL_MS = 60_000
+
+type BudgetData = {
+  spend: number
+  max: number
+  resetAt: string
+  alias: string
+}
+
+const getConfig = () => {
+  const url = process.env.LITELLM_BASE_URL || process.env.OPENAI_BASE_URL || ""
+  const key = process.env.LITELLM_API_KEY || process.env.OPENAI_API_KEY || ""
+  return { url: url.replace(/\/+$/, ""), key }
+}
+
+const fetchBudget = async (url: string, key: string): Promise<BudgetData | null> => {
+  if (!url || !key) return null
+  try {
+    const res = await fetch(`${url}/key/info`, {
+      headers: { Authorization: `Bearer ${key}` },
+      signal: AbortSignal.timeout(10_000),
+    })
+    if (!res.ok) return null
+    const d = await res.json()
+    const info = d?.info
+    if (!info) return null
+    const bt = info.litellm_budget_table || {}
+    return {
+      spend: info.spend ?? 0,
+      max: bt.max_budget ?? 0,
+      resetAt: info.budget_reset_at ?? "",
+      alias: info.key_alias ?? "",
+    }
+  } catch {
+    return null
+  }
+}
+
+const daysUntil = (iso: string): number => {
+  if (!iso) return 0
+  const ms = new Date(iso).getTime() - Date.now()
+  return isNaN(ms) ? 0 : Math.max(0, Math.ceil(ms / 86_400_000))
+}
+
+const pctUsed = (b: BudgetData): number => {
+  if (b.max <= 0) return 0
+  return Math.min(100, Math.round((b.spend / b.max) * 100))
+}
+
+const bar = (pct: number, w: number): string =>
+  "\u2588".repeat(Math.round((pct / 100) * w)) + "\u2591".repeat(w - Math.round((pct / 100) * w))
+
+const useBudget = () => {
+  const { url, key } = getConfig()
+  const [data, setData] = createSignal<BudgetData | null>(null)
+  const [err, setErr] = createSignal(!url || !key)
+
+  const poll = async () => {
+    if (!url || !key) { setErr(true); return }
+    const b = await fetchBudget(url, key)
+    if (b) { setData(b); setErr(false) }
+    else setErr(true)
+  }
+
+  poll()
+  const timer = setInterval(poll, POLL_MS)
+  onCleanup(() => clearInterval(timer))
+
+  return { data, err, configured: !!url && !!key }
+}
+
+const Sidebar = (props: { theme: any }) => {
+  const { data, err, configured } = useBudget()
+
+  return (
+    <box paddingTop={1} width="100%" flexDirection="column">
+      <text bold fg={props.theme.current.primary}>Budget</text>
+      <Show when={configured} fallback={
+        <text fg={props.theme.current.textMuted}>Not configured</text>
+      }>
+        <Show when={!err()} fallback={
+          <text fg={props.theme.current.textMuted}>...</text>
+        }>
+          <Show when={data()}>
+            {(b) => {
+              const remaining = () => Math.max(0, b().max - b().spend).toFixed(2)
+              const pct = () => pctUsed(b())
+              const days = () => daysUntil(b().resetAt)
+              const color = () => pct() >= 80 ? props.theme.current.error : pct() >= 60 ? props.theme.current.warning : props.theme.current.success
+              return (
+                <box flexDirection="column">
+                  <text fg={color()}>${remaining()}/${b().max.toFixed(0)}</text>
+                  <text fg={color()}>{bar(pct(), 10)} {pct()}%</text>
+                  <text fg={props.theme.current.textMuted}>Reset {days()}d</text>
+                </box>
+              )
+            }}
+          </Show>
+        </Show>
+      </Show>
+    </box>
+  )
+}
+
+const FooterBudget = (props: { theme: any }) => {
+  const { data, err, configured } = useBudget()
+
+  return (
+    <box>
+      <Show when={configured} fallback={
+        <text fg={props.theme.current.textMuted}>Budget: not configured</text>
+      }>
+        <Show when={!err() && data()} fallback={
+          <text fg={props.theme.current.textMuted}>Budget: loading...</text>
+        }>
+          {(b) => {
+            const remaining = () => Math.max(0, b().max - b().spend).toFixed(2)
+            const pct = () => pctUsed(b())
+            const days = () => daysUntil(b().resetAt)
+            const color = () => pct() >= 80 ? props.theme.current.error : pct() >= 60 ? props.theme.current.warning : props.theme.current.success
+            return (
+              <text fg={color()}>
+                Budget: ${remaining()}/${b().max.toFixed(0)} [{bar(pct(), 10)}] {pct()}% ({days()}d)
+              </text>
+            )
+          }}
+        </Show>
+      </Show>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 52,
+    slots: {
+      sidebar_content(ctx) {
+        return <Sidebar theme={ctx.theme} />
+      },
+    },
+  })
+
+  api.slots.register({
+    order: 10,
+    slots: {
+      home_footer(ctx) {
+        return <FooterBudget theme={ctx.theme} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id: "litellm-budget",
+  tui,
+}
+
+export default plugin