opencode-copilot-budget 1.0.1 → 1.2.0

package/README.md

@@ -8,7 +8,8 @@ Shows your GitHub Copilot premium request budget in the [OpenCode](https://openc
 
 - Progress bar that turns **red** when you reach 90 % of your budget
 - Request count and percentage used
-- Reset date, updated automatically after every AI response
+- `↻ Refresh` button in the header row, with pointer cursor on hover
+- Reset date, updated automatically after prompt submit and after every AI response
 - 5-minute cache to avoid unnecessary API calls
 - Works with paid and free Copilot plans
 
@@ -81,6 +82,7 @@ export GITHUB_TOKEN=$(gh auth token)
 | Unlimited plan | `62 used (unlimited)` |
 | Overage consumed | `+5 overage` (shown below usage) |
 | Reset date known | `Resets on 1 May` (date in bold) |
+| Manual refresh | inline `🔄 Refresh` next to the first usage line |
 | Token missing / network error | `sync unavailable` |
 | First load | `syncing...` |
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "opencode-copilot-budget",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "GitHub Copilot premium budget in the OpenCode TUI sidebar",
   "author": "Bhaskar Melkani",
   "repository": {
     "type": "git",
-    "url": "https://github.com/bhaskarmelkani/opencode-copilot-budget.git"
+    "url": "git+https://github.com/bhaskarmelkani/opencode-copilot-budget.git"
   },
   "homepage": "https://github.com/bhaskarmelkani/opencode-copilot-budget#readme",
   "bugs": {

package/src/index.tsx

@@ -3,12 +3,13 @@
  * opencode-copilot-budget
  *
  * Displays your GitHub Copilot premium request budget in the OpenCode TUI
- * sidebar. Automatically refreshes after each AI response. Only visible when
- * the active provider is `github-copilot`.
+ * sidebar. Refreshes after prompt submit, after each AI response, and via an
+ * inline manual refresh action. Only visible when the active provider is
+ * `github-copilot`.
  *
  * Display format:
- *   Copilot Budget
- *   ████████░░░░░░░░ 12% Used      ← green; turns red at ≥ 90 %
+ *   Copilot Budget   ↻ Refresh
+ *   ████████░░░░░░░░ 12% Used
  *   117 / 1000 Premium Requests
  *   Resets on 1 May
  *
@@ -25,7 +26,8 @@
  */
 
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
-import { createMemo, createResource, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { createMemo, createResource, createSignal, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { RGBA } from "@opentui/core"
 import { execFile } from "node:child_process"
 import { promisify } from "node:util"
 
@@ -217,64 +219,138 @@ function ProgressBar(props: { percent: number }) {
   )
 }
 
+function RefreshButton(props: { api: TuiPluginApi; refresh: () => void; disabled: boolean }) {
+  const theme = () => props.api.theme.current
+  const color = () => props.disabled ? theme().textMuted : theme().primary
+  const bgTint = () => {
+    const c = color()
+    return RGBA.fromValues(c.r, c.g, c.b, 0.15)
+  }
+
+  return (
+    <box
+      onMouseUp={() => {
+        if (props.disabled) return
+        props.refresh()
+      }}
+      onMouseOver={() => {
+        if (!props.disabled) props.api.renderer.setMousePointer("pointer")
+      }}
+      onMouseOut={() => props.api.renderer.setMousePointer("default")}
+      marginLeft={2}
+      flexDirection="row"
+    >
+      <text fg={bgTint()} bg={theme().background}>{"▐"}</text>
+      <text fg={color()} bg={bgTint()}>
+        <b>{"↻ Refresh"}</b>
+      </text>
+      <text fg={bgTint()} bg={theme().background}>{"▌"}</text>
+    </box>
+  )
+}
+
 function UsageDetail(props: { api: TuiPluginApi }) {
   const theme = () => props.api.theme.current
   const [usage, { refetch }] = createResource(fetchCopilotUsage)
+  const [manualRefreshing, setManualRefreshing] = createSignal(false)
+  let refreshInFlight: Promise<void> | null = null
+
+  const doRefresh = (manual: boolean): Promise<void> => {
+    if (refreshInFlight) return refreshInFlight
+    if (manual) setManualRefreshing(true)
+    bustCache()
+    refreshInFlight = (async () => {
+      try {
+        await refetch()
+      } finally {
+        if (manual) setManualRefreshing(false)
+        refreshInFlight = null
+      }
+    })()
+    return refreshInFlight
+  }
+
+  const autosync = () => {
+    void doRefresh(false)
+  }
+
+  const triggerRefresh = () => {
+    void doRefresh(true)
+  }
 
   onMount(() => {
+    const offPromptSubmit = props.api.event.on("tui.command.execute", (event) => {
+      if (event.properties.command !== "prompt.submit") return
+      autosync()
+    })
+
     // Refetch whenever the AI finishes responding — exactly when a Copilot
     // request has been consumed. Bust the cache first so we always hit the
     // network and get a fresh count.
-    const off = props.api.event.on("session.idle", () => {
-      bustCache()
-      refetch()
+    const offSessionIdle = props.api.event.on("session.idle", () => {
+      autosync()
+    })
+
+    onCleanup(() => {
+      offPromptSubmit()
+      offSessionIdle()
     })
-    onCleanup(off)
   })
 
   return (
-    <Switch>
-      <Match when={usage()}>
-        {(data) => (
-          <box direction="column">
-            <Show
-              when={!data().unlimited}
-              fallback={<text fg={theme().textMuted}>{`${data().used} used (unlimited)`}</text>}
-            >
-              <ProgressBar percent={data().percent} />
-              <text fg={theme().textMuted}>{`${data().used} / ${data().entitlement} Premium Requests`}</text>
-            </Show>
-            <Show when={data().overageCount > 0}>
-              <text fg={theme().warning}>{`+${data().overageCount} overage`}</text>
-            </Show>
-            <Show when={data().resetDate}>
-              <text fg={theme().textMuted}>{"Resets on "}<b>{formatResetDate(data().resetDate!)}</b></text>
-            </Show>
-          </box>
-        )}
-      </Match>
-      <Match when={usage.loading}>
-        <text fg={theme().textMuted}>syncing...</text>
-      </Match>
-      <Match when={true}>
-        <text fg={theme().textMuted}>sync unavailable</text>
-      </Match>
-    </Switch>
+    <box flexDirection="column" gap={1}>
+      <box flexDirection="row">
+        <text fg={theme().text}><b>Copilot Budget</b></text>
+        <RefreshButton
+          api={props.api}
+          refresh={triggerRefresh}
+          disabled={usage.loading || manualRefreshing()}
+        />
+      </box>
+      <Switch>
+        <Match when={manualRefreshing()}>
+          <text fg={theme().textMuted}>syncing...</text>
+        </Match>
+        <Match when={usage()}>
+          {(data) => (
+            <box flexDirection="column">
+              <Show
+                when={!data().unlimited}
+                fallback={
+                  <text fg={theme().textMuted}>{`${data().used} used (unlimited)`}</text>
+                }
+              >
+                <ProgressBar percent={data().percent} />
+                <text fg={theme().textMuted}>{`${data().used} / ${data().entitlement} Premium Requests`}</text>
+              </Show>
+              <Show when={data().overageCount > 0}>
+                <text fg={theme().warning}>{`+${data().overageCount} overage`}</text>
+              </Show>
+              <Show when={data().resetDate}>
+                <text fg={theme().textMuted}>{"Resets on "}<b>{formatResetDate(data().resetDate!)}</b></text>
+              </Show>
+            </box>
+          )}
+        </Match>
+        <Match when={usage.loading}>
+          <text fg={theme().textMuted}>syncing...</text>
+        </Match>
+        <Match when={true}>
+          <text fg={theme().textMuted}>sync unavailable</text>
+        </Match>
+      </Switch>
+    </box>
   )
 }
 
 function View(props: { api: TuiPluginApi }) {
-  const theme = () => props.api.theme.current
   const isCopilot = createMemo(() =>
     props.api.state.provider.some((p) => p.id === "github-copilot"),
   )
 
   return (
     <Show when={isCopilot()}>
-      <box direction="column">
-        <text fg={theme().text}><b>Copilot Budget</b></text>
-        <UsageDetail api={props.api} />
-      </box>
+      <UsageDetail api={props.api} />
     </Show>
   )
 }