@cardinal4/opencode-tavily-quota 1.0.0 → 1.0.2

package/README.md

@@ -26,13 +26,17 @@ polls every 10 minutes and can be refreshed on demand with the command below.
 ## Requirements
 
 - OpenCode 2 (`opencode --version` reports `2.x`).
-- A Tavily API key, supplied one of two ways:
-  - `TAVILY_API_KEY` in the environment OpenCode is started from, or
-  - the `apiKey` plugin option configured on this plugin in `cli.json`.
-
-`TAVILY_API_KEY` takes precedence when both are set. The key is read in the CLI
-process and sent only to `api.tavily.com` as a `Bearer` token. It is never
-displayed.
+- A Tavily API key, supplied by:
+  - `TAVILY_API_KEY` in the CLI environment,
+  - the `apiKey` plugin option configured in `cli.json`, or
+  - OpenCode's active Tavily connection (use `opencode auth login tavily` or
+    `/connect` to connect Tavily).
+
+The CLI environment takes precedence over `apiKey`; OpenCode's active
+connection is used when neither supplies a key. The server resolves its saved
+credential and fetches `/usage` itself. Only quota data returns to the TUI;
+the saved key is never sent over plugin RPC or displayed. With a remote server,
+install this plugin there too to use its active connection.
 
 The `apiKey` option also accepts `{file:...}` and `{env:...}` references, which
 the plugin expands itself because `cli.json` does not (unlike `opencode.jsonc`).
@@ -40,27 +44,35 @@ the plugin expands itself because `cli.json` does not (unlike `opencode.jsonc`).
 ## Layout
 
 ```
-~/.config/opencode/plugins/opencode-tavily-quota/
-├── index.ts        # server entrypoint (no-op; required for discovery)
-├── tui.tsx         # TUI entrypoint: sidebar slot + command
-├── usage.ts        # key resolution, /usage fetch, formatting
-└── usage.test.ts   # unit tests for usage.ts
+index.ts         # server entrypoint: integration credential + quota RPC
+rpc.ts           # shared RPC definition
+tui.tsx          # TUI entrypoint: sidebar slot + command
+usage.ts         # key resolution, /usage fetch, formatting
+usage.test.ts    # unit tests for usage.ts
+scripts/build.mjs
+dist/            # built entrypoints shipped to npm
 ```
 
-OpenCode discovers local plugins as directories under
-`~/.config/opencode/plugins/`, or `<project>/.opencode/plugins/`. The server
-entrypoint (`index.ts` / `server.ts`) satisfies discovery; the `tui` entrypoint
-(`tui.tsx`) is loaded by the CLI to render the sidebar.
+`npm run build` compiles the TypeScript/JSX sources into `dist/`, which is what
+`package.json` exports and what npm publishes. Published plugins ship built
+`dist/*.js`: OpenCode transpiles `.tsx` entrypoints as it loads them, and the
+Solid JSX runtime (`@opentui/solid`) is only provided at runtime, not from the
+installed plugin.
+
+OpenCode installs package plugins under `~/.cache/opencode/npm/`. The server
+entrypoint (`dist/index.js`) registers the quota RPC; the `tui` entrypoint
+(`dist/tui.js`) renders the sidebar in the CLI.
 
 ## Configuration
 
-Register the plugin in `cli.json` to pass the API key as a plugin option:
+If you already connected Tavily in OpenCode, no key option is needed. To pass
+the API key as a plugin option instead, register the plugin in `cli.json`:
 
 ```json title="cli.json"
 {
   "plugins": [
     {
-      "package": "file:///home/me/.config/opencode/plugins/opencode-tavily-quota",
+      "package": "@cardinal4/opencode-tavily-quota@latest",
       "options": {
         "apiKey": "tvly-..."
       }
@@ -84,7 +96,7 @@ reference as `apiKey` to avoid pasting the raw key into `cli.json`:
 {
   "plugins": [
     {
-      "package": "file:///home/me/.config/opencode/plugins/opencode-tavily-quota",
+      "package": "@cardinal4/opencode-tavily-quota@latest",
       "options": {
         "apiKey": "{file:~/.secrets/tavily-api-key}"
       }
@@ -116,19 +128,18 @@ therefore handled.
 ## Development
 
 `usage.ts` is deliberately free of OpenCode and OpenTUI imports so it can be
-tested anywhere. `usage.test.ts` covers the pure quota math (`deriveSnapshot`,
-`formatPercent`, `formatRemaining`), key resolution, and every `fetchQuota`
-error branch using an injected `fetch`.
+tested anywhere. The tests cover quota math, local-key precedence and fallback,
+the connected-key RPC, and HTTP error handling using a mock `fetch`.
 
 Run the tests and type check from the repository root:
 
 ```sh
 npm install
-npm test        # tsx --test usage.test.ts
+npm test
 npm run typecheck
 ```
 
 ## Notes
 
-- The plugin is a no-op on the server. All work happens in the CLI runtime,
-  which is where TUI slots live.
+- The server handles OpenCode-connected credentials and their quota requests;
+  the CLI handles local keys and renders TUI slots.

package/dist/index.js

@@ -0,0 +1,31 @@
+/**
+ * Server entrypoint. Resolve the active Tavily integration credential and
+ * fetch quota here; only the quota result crosses the RPC boundary to the TUI.
+ */
+
+import { Plugin } from "@opencode/plugin";
+import { TavilyQuotaRpc } from "./rpc.js";
+import { fetchQuota } from "./usage.js";
+export const PLUGIN_ID = "opencode-tavily-quota";
+export default Plugin.define({
+  id: PLUGIN_ID,
+  async setup(ctx) {
+    await ctx.rpc.register(TavilyQuotaRpc, {
+      usage: async () => {
+        const connection = await ctx.integration.connection.active("tavily");
+        const credential = connection && (await ctx.integration.connection.resolve(connection));
+        const key = credential?.type === "key" ? credential.key : connection?.type === "env" ? process.env[connection.name] : undefined;
+        if (!key) {
+          return {
+            ok: false,
+            message: "no active Tavily connection (run opencode auth login tavily)"
+          };
+        }
+        return fetchQuota({
+          apiKey: key,
+          env: {}
+        });
+      }
+    });
+  }
+});

package/dist/rpc.js

@@ -0,0 +1,54 @@
+import { Rpc } from "@opencode/plugin/rpc";
+
+/** The server fetches quota so the saved OpenCode credential never enters the TUI. */
+export const TavilyQuotaRpc = Rpc.define({
+  id: "opencode-tavily-quota",
+  methods: {
+    usage: {
+      input: {
+        type: "object",
+        properties: {},
+        additionalProperties: false
+      },
+      output: {
+        type: "object",
+        properties: {
+          ok: {
+            type: "boolean"
+          },
+          message: {
+            type: "string"
+          },
+          snapshot: {
+            type: "object",
+            properties: {
+              planName: {
+                type: "string"
+              },
+              used: {
+                type: "number"
+              },
+              limit: {
+                type: "number"
+              },
+              remaining: {
+                type: "number"
+              },
+              percentRemaining: {
+                type: "number"
+              },
+              updatedAt: {
+                type: "number"
+              }
+            },
+            required: ["planName", "used", "limit", "remaining", "percentRemaining", "updatedAt"],
+            additionalProperties: false
+          }
+        },
+        required: ["ok"],
+        additionalProperties: false
+      }
+    }
+  },
+  events: {}
+});

package/dist/tui.js

@@ -0,0 +1,185 @@
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+
+/**
+ * Tavily quota sidebar — an OpenCode 2 TUI plugin.
+ *
+ * Renders the remaining Tavily API credits in the session sidebar
+ * (`sidebar.content`) and exposes a `/tavily-quota` slash command /
+ * "Refresh Tavily quota" palette command that re-fetches on demand.
+ *
+ * The plugin owns no session state: Tavily credits are account-wide, so a
+ * single snapshot is shared by every sidebar render and refreshed on a timer.
+ * Colors follow the built-in quota sections: the heading uses the default text
+ * color and the body (bar included) uses the muted/subdued text color.
+ *
+ * Authenticate with `TAVILY_API_KEY`, the `apiKey` plugin option in `cli.json`,
+ * or OpenCode's active Tavily integration. A saved key is used server-side.
+ */
+
+import { Plugin } from "@opencode/plugin/tui";
+import { createSignal } from "solid-js";
+import { fetchQuotaWithFallback, formatPercent, formatQuotaLine, formatRemaining } from "./usage.js";
+import { TavilyQuotaRpc } from "./rpc.js";
+export const PLUGIN_ID = "opencode-tavily-quota";
+// Tavily's `/usage` endpoint allows at most 10 requests per 10 minutes, so poll
+// once per window and rely on the `/tavily-quota` command for on-demand reads.
+const REFRESH_INTERVAL_MS = 600_000;
+/**
+ * OpenCode 2.0.7 exposes `text.default` / `text.subdued`; later builds renamed
+ * the leaves to `text.base` / `text.muted`. Read whichever the running build
+ * provides so the plugin matches the built-in quota sections on both.
+ */
+function readThemeColors(context) {
+  const text = context.theme.text;
+  return {
+    text: text.default ?? text.base,
+    textMuted: text.subdued ?? text.muted
+  };
+}
+export function buildLines(state) {
+  if (state.status === "loading") {
+    return ["loading…"];
+  }
+  if (state.status === "error") {
+    return [`⚠ ${state.message}`];
+  }
+  const snapshot = state.snapshot;
+  return [formatQuotaLine(snapshot)];
+}
+function TavilyQuotaSidebar(props) {
+  const colors = () => readThemeColors(props.context);
+  // Keep the quota line on one line; let an error message wrap instead of
+  // truncating it, since it can be longer than the sidebar.
+  const wrapMode = () => props.state().status === "error" ? "word" : "none";
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("text"),
+      _el$3 = _$createElement("b");
+    _$insertNode(_el$, _el$2);
+    _$setProp(_el$, "gap", 0);
+    _$setProp(_el$, "flexDirection", "column");
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$3, _$createTextNode(`Tavily`));
+    _$insert(_el$, () => buildLines(props.state()).map(line => (() => {
+      var _el$5 = _$createElement("text");
+      _$insert(_el$5, line);
+      _$effect(_p$ => {
+        var _v$ = colors().textMuted,
+          _v$2 = wrapMode();
+        _v$ !== _p$.e && (_p$.e = _$setProp(_el$5, "fg", _v$, _p$.e));
+        _v$2 !== _p$.t && (_p$.t = _$setProp(_el$5, "wrapMode", _v$2, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$5;
+    })()), null);
+    _$effect(_$p => _$setProp(_el$2, "fg", colors().text, _$p));
+    return _el$;
+  })();
+}
+function TavilyQuotaCommands(props) {
+  props.context.keymap.layer(() => ({
+    mode: "global",
+    commands: [{
+      id: `${PLUGIN_ID}.refresh`,
+      title: "Refresh Tavily quota",
+      description: "Re-fetch remaining Tavily API credits and show a summary",
+      group: "Tavily",
+      palette: true,
+      slash: {
+        name: "tavily-quota"
+      },
+      run: async () => {
+        const next = await props.refresh();
+        const message = next.status === "ready" ? `${formatRemaining(next.snapshot)} · ${formatPercent(next.snapshot.percentRemaining)}` : next.status === "error" ? next.message : "still loading…";
+        props.context.ui.toast.show({
+          title: "Tavily quota",
+          message,
+          variant: next.status === "error" ? "error" : "info"
+        });
+      }
+    }]
+  }));
+  return null;
+}
+export const TavilyQuotaTuiPlugin = Plugin.define({
+  id: PLUGIN_ID,
+  async setup(context) {
+    const [state, setState] = createSignal({
+      status: "loading"
+    });
+    const apiKey = typeof context.options.apiKey === "string" ? context.options.apiKey : undefined;
+    const remote = context.client.rpc(TavilyQuotaRpc);
+    const refreshMs = typeof context.options.refreshMs === "number" && context.options.refreshMs > 0 ? context.options.refreshMs : REFRESH_INTERVAL_MS;
+    let disposed = false;
+    let inFlight = false;
+    const refresh = async () => {
+      if (inFlight) return state();
+      inFlight = true;
+      try {
+        const result = await fetchQuotaWithFallback({
+          apiKey,
+          remote: () => remote.usage({}, {
+            location: context.location ?? context.data.location.default()
+          })
+        });
+        if (!disposed) {
+          setState(result.ok ? {
+            status: "ready",
+            snapshot: result.snapshot
+          } : {
+            status: "error",
+            message: result.message
+          });
+        }
+      } catch (error) {
+        // `fetchQuota` is written never to throw, but a rejected promise here
+        // must not take down the sidebar: surface it inline instead.
+        if (!disposed) {
+          setState({
+            status: "error",
+            message: error instanceof Error ? error.message : String(error)
+          });
+        }
+      } finally {
+        inFlight = false;
+      }
+      return state();
+    };
+    const stopSidebar = context.ui.slot({
+      append: "sidebar.content",
+      render: () => _$createComponent(TavilyQuotaSidebar, {
+        context: context,
+        state: state
+      })
+    });
+
+    // `keymap.layer` reads Solid context, so it must be mounted from a slot
+    // component rather than called directly during plugin setup.
+    const stopCommands = context.ui.slot({
+      append: "app",
+      render: () => _$createComponent(TavilyQuotaCommands, {
+        context: context,
+        refresh: refresh
+      })
+    });
+    void refresh();
+    const interval = setInterval(() => void refresh(), refreshMs);
+    return () => {
+      disposed = true;
+      clearInterval(interval);
+      stopSidebar();
+      stopCommands();
+    };
+  }
+});
+export default TavilyQuotaTuiPlugin;

package/{usage.ts → dist/usage.js}

@@ -13,7 +13,6 @@
 import { readFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { isAbsolute, join, resolve } from "node:path";
-
 export const USAGE_URL = "https://api.tavily.com/usage";
 export const DEFAULT_TIMEOUT_MS = 15_000;
 
@@ -36,59 +35,31 @@ export const BAR_SEPARATOR = "  ";
 export const DEFAULT_BAR_WIDTH = SIDEBAR_WIDTH - BAR_SEPARATOR.length - PERCENT_COLUMN_WIDTH;
 
 /** Shape of `GET https://api.tavily.com/usage` (all fields optional). */
-export interface TavilyUsagePayload {
-  key?: {
-    usage?: number | null;
-    limit?: number | null;
-  } | null;
-  account?: {
-    current_plan?: string | null;
-    plan_usage?: number | null;
-    plan_limit?: number | null;
-    paygo_usage?: number | null;
-    paygo_limit?: number | null;
-  } | null;
-}
-
-export interface QuotaSnapshot {
-  /** Plan name reported by Tavily, e.g. `Researcher`. */
-  planName: string;
-  /** Credits consumed this billing cycle. */
-  used: number;
-  /** Credits included this billing cycle. */
-  limit: number;
-  /** Credits still available (`limit - used`, never negative). */
-  remaining: number;
-  /** `remaining / limit` as a percentage in `[0, 100]`. */
-  percentRemaining: number;
-  /** Milliseconds since epoch when the snapshot was produced. */
-  updatedAt: number;
-}
 
-export type QuotaResult =
-  | { ok: true; snapshot: QuotaSnapshot }
-  | { ok: false; message: string };
-
-export interface FetchQuotaOptions {
-  /** Environment to read `TAVILY_API_KEY` from. Defaults to `process.env`. */
-  env?: Record<string, string | undefined>;
-  /** Key supplied as a plugin option (e.g. from `cli.json`). */
-  apiKey?: string;
-  /** File reader for `{file:...}` references in `apiKey`. Injected by tests. */
-  readFile?: (path: string) => string;
-  /** Home directory for `~/` in `{file:...}`. Injected by tests. */
-  home?: string;
-  /** Base directory for relative `{file:...}` paths. Injected by tests. */
-  cwd?: string;
-  /** Request timeout in milliseconds. */
-  timeoutMs?: number;
-  /** Injectable fetch, used by tests. Defaults to the global `fetch`. */
-  fetchImpl?: typeof fetch;
-  /** Injectable clock, used by tests. Defaults to `Date.now`. */
-  now?: number;
+/** Prefer CLI credentials; ask the server only when the CLI has no key. */
+export async function fetchQuotaWithFallback(options) {
+  try {
+    const key = resolveApiKey(options.env, options.apiKey, options);
+    if (key) return fetchQuota({
+      ...options,
+      apiKey: key,
+      env: {}
+    });
+  } catch {
+    // Preserve the existing inline error for an unreadable {file:...} option.
+    return fetchQuota(options);
+  }
+  try {
+    return await options.remote();
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : String(error);
+    return {
+      ok: false,
+      message: `OpenCode Tavily credential unavailable: ${reason}`
+    };
+  }
 }
-
-function finite(value: unknown): number | null {
+function finite(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
 
@@ -98,16 +69,6 @@ function finite(value: unknown): number | null {
  * expansion lives here because `cli.json` passes plugin options through
  * verbatim.
  */
-export interface ExpandOptions {
-  /** Environment used by `{env:NAME}`. Defaults to `process.env`. */
-  env?: Record<string, string | undefined>;
-  /** Reads a file as UTF-8. Defaults to `readFileSync`. Injected by tests. */
-  readFile?: (path: string) => string;
-  /** Home directory for `~/`. Defaults to `os.homedir()`. */
-  home?: string;
-  /** Base directory for relative paths. Defaults to `process.cwd()`. */
-  cwd?: string;
-}
 
 const OPTION_REFERENCE = /\{(env|file):([^}]+)\}/g;
 
@@ -119,28 +80,21 @@ const OPTION_REFERENCE = /\{(env|file):([^}]+)\}/g;
  * directory and relative paths resolve against `cwd`. Unreadable files throw
  * with the offending reference and resolved path.
  */
-export function expandOptionValue(value: string, options: ExpandOptions = {}): string {
+export function expandOptionValue(value, options = {}) {
   const env = options.env ?? process.env;
-  const readFile = options.readFile ?? ((path: string) => readFileSync(path, "utf8"));
+  const readFile = options.readFile ?? (path => readFileSync(path, "utf8"));
   const home = options.home ?? homedir();
   const cwd = options.cwd ?? process.cwd();
-
-  return value.replace(OPTION_REFERENCE, (match, kind: string, body: string) => {
+  return value.replace(OPTION_REFERENCE, (match, kind, body) => {
     if (kind === "env") return env[body] ?? "";
-
     const raw = body.trim();
-    const path =
-      raw === "~"
-        ? home
-        : raw.startsWith("~/")
-          ? join(home, raw.slice(2))
-          : isAbsolute(raw)
-            ? raw
-            : resolve(cwd, raw);
+    const path = raw === "~" ? home : raw.startsWith("~/") ? join(home, raw.slice(2)) : isAbsolute(raw) ? raw : resolve(cwd, raw);
     try {
       return readFile(path).trim();
     } catch (cause) {
-      throw new Error(`bad file reference: "${match}" (${path}) could not be read`, { cause });
+      throw new Error(`bad file reference: "${match}" (${path}) could not be read`, {
+        cause
+      });
     }
   });
 }
@@ -152,16 +106,15 @@ export function expandOptionValue(value: string, options: ExpandOptions = {}): s
  * `expandOptionValue`), since `cli.json` does not expand them itself. Never
  * logs or returns the key beyond the caller.
  */
-export function resolveApiKey(
-  env: Record<string, string | undefined> = process.env,
-  apiKey?: string,
-  options: Omit<ExpandOptions, "env"> = {},
-): string {
+export function resolveApiKey(env = process.env, apiKey, options = {}) {
   const fromEnv = (env.TAVILY_API_KEY ?? "").trim();
   if (fromEnv) return fromEnv;
   const raw = (apiKey ?? "").trim();
   if (!raw) return "";
-  return expandOptionValue(raw, { ...options, env }).trim();
+  return expandOptionValue(raw, {
+    ...options,
+    env
+  }).trim();
 }
 
 /**
@@ -171,32 +124,24 @@ export function resolveApiKey(
  * is often `null` while the account still has a monthly allowance. Falls back
  * to the key limit when no positive plan limit is reported.
  */
-export function deriveSnapshot(
-  payload: TavilyUsagePayload,
-  now: number = Date.now(),
-): QuotaResult {
+export function deriveSnapshot(payload, now = Date.now()) {
   const account = payload.account ?? {};
   const key = payload.key ?? {};
-
   const planLimit = finite(account.plan_limit);
   const planUsage = finite(account.plan_usage);
   const keyLimit = finite(key.limit);
   const keyUsage = finite(key.usage);
-
   const usePlan = planLimit !== null && planLimit > 0;
   const limit = usePlan ? planLimit : keyLimit;
   const used = usePlan ? planUsage ?? 0 : keyUsage ?? 0;
-
   if (limit === null || limit <= 0) {
-    return { ok: false, message: "Tavily returned no credit limit for this key" };
+    return {
+      ok: false,
+      message: "Tavily returned no credit limit for this key"
+    };
   }
-
   const remaining = Math.max(0, limit - used);
-  const planName =
-    typeof account.current_plan === "string" && account.current_plan.trim()
-      ? account.current_plan.trim()
-      : "Tavily";
-
+  const planName = typeof account.current_plan === "string" && account.current_plan.trim() ? account.current_plan.trim() : "Tavily";
   return {
     ok: true,
     snapshot: {
@@ -204,23 +149,23 @@ export function deriveSnapshot(
       used,
       limit,
       remaining,
-      percentRemaining: (remaining / limit) * 100,
-      updatedAt: now,
-    },
+      percentRemaining: remaining / limit * 100,
+      updatedAt: now
+    }
   };
 }
 
 /** Format a remaining percentage for the sidebar. */
-export function formatPercent(percentRemaining: number): string {
+export function formatPercent(percentRemaining) {
   const clamped = Math.max(0, Math.min(100, percentRemaining));
   return `${clamped.toFixed(clamped >= 10 ? 0 : 1)}%`;
 }
 
 /** Render a fixed-width progress bar for a remaining percentage. */
-export function progressBar(percentRemaining: number, width = DEFAULT_BAR_WIDTH): string {
+export function progressBar(percentRemaining, width = DEFAULT_BAR_WIDTH) {
   const clamped = Math.max(0, Math.min(100, percentRemaining));
   const safeWidth = Math.max(1, Math.floor(width));
-  const filled = Math.round((clamped / 100) * safeWidth);
+  const filled = Math.round(clamped / 100 * safeWidth);
   return "█".repeat(filled) + "░".repeat(Math.max(0, safeWidth - filled));
 }
 
@@ -231,16 +176,13 @@ export function progressBar(percentRemaining: number, width = DEFAULT_BAR_WIDTH)
  * same right-aligned percent column, so the two sections line up. The exact
  * credit count is still available from `formatRemaining` (used by the toast).
  */
-export function formatQuotaLine(
-  snapshot: QuotaSnapshot,
-  width = DEFAULT_BAR_WIDTH,
-): string {
+export function formatQuotaLine(snapshot, width = DEFAULT_BAR_WIDTH) {
   const label = `${formatPercent(snapshot.percentRemaining)} left`;
   return `${progressBar(snapshot.percentRemaining, width)}${BAR_SEPARATOR}${label.padStart(PERCENT_COLUMN_WIDTH)}`;
 }
 
 /** Format the headline line, e.g. `839 credits left`. */
-export function formatRemaining(snapshot: QuotaSnapshot): string {
+export function formatRemaining(snapshot) {
   return `${snapshot.remaining} credits left`;
 }
 
@@ -250,50 +192,66 @@ export function formatRemaining(snapshot: QuotaSnapshot): string {
  * Never throws: every failure is returned as `{ ok: false, message }` so the
  * sidebar can render it inline.
  */
-export async function fetchQuota(options: FetchQuotaOptions = {}): Promise<QuotaResult> {
-  let key: string;
+export async function fetchQuota(options = {}) {
+  let key;
   try {
     key = resolveApiKey(options.env, options.apiKey, options);
   } catch (error) {
     // A `{file:...}` option can point at a missing or unreadable file; surface
     // that inline instead of rejecting the sidebar render.
-    return { ok: false, message: error instanceof Error ? error.message : String(error) };
+    return {
+      ok: false,
+      message: error instanceof Error ? error.message : String(error)
+    };
   }
   if (!key) {
     return {
       ok: false,
-      message: "no Tavily API key (set TAVILY_API_KEY or the apiKey plugin option)",
+      message: "no Tavily API key (set TAVILY_API_KEY or the apiKey plugin option)"
     };
   }
-
   const fetchImpl = options.fetchImpl ?? fetch;
-  let response: Response;
+  let response;
   try {
     response = await fetchImpl(USAGE_URL, {
-      headers: { Authorization: `Bearer ${key}` },
-      signal: AbortSignal.timeout(options.timeoutMs ?? DEFAULT_TIMEOUT_MS),
+      headers: {
+        Authorization: `Bearer ${key}`
+      },
+      signal: AbortSignal.timeout(options.timeoutMs ?? DEFAULT_TIMEOUT_MS)
     });
   } catch (error) {
     const reason = error instanceof Error ? error.message : String(error);
-    return { ok: false, message: `request failed: ${reason}` };
+    return {
+      ok: false,
+      message: `request failed: ${reason}`
+    };
   }
-
   if (response.status === 401) {
-    return { ok: false, message: "API key rejected (401)" };
+    return {
+      ok: false,
+      message: "API key rejected (401)"
+    };
   }
   if (response.status === 429) {
-    return { ok: false, message: "rate limited on /usage (10 req / 10 min)" };
+    return {
+      ok: false,
+      message: "rate limited on /usage (10 req / 10 min)"
+    };
   }
   if (!response.ok) {
-    return { ok: false, message: `HTTP ${response.status} from /usage` };
+    return {
+      ok: false,
+      message: `HTTP ${response.status} from /usage`
+    };
   }
-
-  let payload: TavilyUsagePayload;
+  let payload;
   try {
-    payload = (await response.json()) as TavilyUsagePayload;
+    payload = await response.json();
   } catch {
-    return { ok: false, message: "invalid JSON from /usage" };
+    return {
+      ok: false,
+      message: "invalid JSON from /usage"
+    };
   }
-
   return deriveSnapshot(payload, options.now);
 }

package/package.json

@@ -1,24 +1,25 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@cardinal4/opencode-tavily-quota",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "OpenCode 2 TUI plugin that shows remaining Tavily API credits in the sidebar.",
   "type": "module",
   "license": "MIT",
+  "main": "./dist/index.js",
   "exports": {
-    ".": "./index.ts",
-    "./server": "./index.ts",
-    "./tui": "./tui.tsx"
+    ".": "./dist/index.js",
+    "./server": "./dist/index.js",
+    "./tui": "./dist/tui.js"
   },
   "files": [
-    "index.ts",
-    "tui.tsx",
-    "usage.ts",
+    "dist",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "test": "tsx --test usage.test.ts",
+    "build": "node scripts/build.mjs",
+    "prepublishOnly": "npm run build",
+    "test": "tsx --test usage.test.ts index.test.ts",
     "typecheck": "tsc --noEmit"
   },
   "keywords": [
@@ -37,26 +38,17 @@
     "url": "https://github.com/cardin/opencode-tavily-quota/issues"
   },
   "homepage": "https://github.com/cardin/opencode-tavily-quota#readme",
-  "peerDependencies": {
-    "@opencode/plugin": "^2.0.7",
-    "@opentui/core": ">=0.5.10",
-    "@opentui/solid": ">=0.5.10",
-    "solid-js": ">=1.9.0"
-  },
-  "peerDependenciesMeta": {
-    "@opentui/core": {
-      "optional": true
-    },
-    "@opentui/solid": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
+  "dependencies": {
     "@opencode/plugin": "^2.0.7",
     "@opentui/core": "^0.5.11",
     "@opentui/solid": "^0.5.11",
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-typescript": "^7.27.1",
     "@types/node": "^22.0.0",
-    "solid-js": "^1.9.0",
+    "babel-preset-solid": "^1.9.12",
     "tsx": "^4.20.0",
     "typescript": "^5.6.0"
   },

package/index.ts

@@ -1,23 +0,0 @@
-/**
- * Server entrypoint for the Tavily quota sidebar plugin.
- *
- * OpenCode discovers a local plugin directory by its `index` (server) entry and
- * loads the `tui` entry beside it for the terminal UI. All rendering happens in
- * the CLI runtime (`tui.tsx`); this file only exists so the directory is a
- * complete plugin and shows up by id instead of as an anonymous entry.
- *
- * It deliberately imports nothing beyond `@opencode/plugin` so the background
- * service can load it in any runtime.
- */
-
-import { Plugin } from "@opencode/plugin";
-
-export const PLUGIN_ID = "opencode-tavily-quota";
-
-export default Plugin.define({
-  id: PLUGIN_ID,
-  setup() {
-    // Intentional no-op: the sidebar and command are registered by the TUI
-    // entrypoint (tui.tsx), which runs in the CLI process.
-  },
-});

package/tui.tsx

@@ -1,197 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-
-/**
- * Tavily quota sidebar — an OpenCode 2 TUI plugin.
- *
- * Renders the remaining Tavily API credits in the session sidebar
- * (`sidebar.content`) and exposes a `/tavily-quota` slash command /
- * "Refresh Tavily quota" palette command that re-fetches on demand.
- *
- * The plugin owns no session state: Tavily credits are account-wide, so a
- * single snapshot is shared by every sidebar render and refreshed on a timer.
- * Colors follow the built-in quota sections: the heading uses the default text
- * color and the body (bar included) uses the muted/subdued text color.
- *
- * Authenticate with `TAVILY_API_KEY`, or with the `apiKey` plugin option
- * configured on this plugin in `cli.json`. Resolution and the network call
- * live in `./usage.ts`.
- */
-
-import type { RGBA } from "@opentui/core";
-import { Plugin } from "@opencode/plugin/tui";
-import { createSignal } from "solid-js";
-import {
-  fetchQuota,
-  formatPercent,
-  formatQuotaLine,
-  formatRemaining,
-  type QuotaSnapshot,
-} from "./usage";
-
-type Context = Plugin.Context;
-
-export const PLUGIN_ID = "opencode-tavily-quota";
-// Tavily's `/usage` endpoint allows at most 10 requests per 10 minutes, so poll
-// once per window and rely on the `/tavily-quota` command for on-demand reads.
-const REFRESH_INTERVAL_MS = 600_000;
-
-type ViewState =
-  | { status: "loading" }
-  | { status: "ready"; snapshot: QuotaSnapshot }
-  | { status: "error"; message: string };
-
-type ThemeColors = {
-  text?: RGBA;
-  textMuted?: RGBA;
-};
-
-/**
- * OpenCode 2.0.7 exposes `text.default` / `text.subdued`; later builds renamed
- * the leaves to `text.base` / `text.muted`. Read whichever the running build
- * provides so the plugin matches the built-in quota sections on both.
- */
-function readThemeColors(context: Context): ThemeColors {
-  const text = context.theme.text as unknown as {
-    default?: RGBA;
-    base?: RGBA;
-    subdued?: RGBA;
-    muted?: RGBA;
-  };
-  return {
-    text: text.default ?? text.base,
-    textMuted: text.subdued ?? text.muted,
-  };
-}
-
-export function buildLines(state: ViewState): string[] {
-  if (state.status === "loading") {
-    return ["loading…"];
-  }
-  if (state.status === "error") {
-    return [`⚠ ${state.message}`];
-  }
-
-  const snapshot = state.snapshot;
-  return [formatQuotaLine(snapshot)];
-}
-
-function TavilyQuotaSidebar(props: { context: Context; state: () => ViewState }) {
-  const colors = () => readThemeColors(props.context);
-  // Keep the quota line on one line; let an error message wrap instead of
-  // truncating it, since it can be longer than the sidebar.
-  const wrapMode = () => (props.state().status === "error" ? "word" : "none");
-
-  return (
-    <box gap={0} flexDirection="column">
-      <text fg={colors().text}>
-        <b>Tavily</b>
-      </text>
-      {buildLines(props.state()).map((line) => (
-        <text fg={colors().textMuted} wrapMode={wrapMode()}>
-          {line}
-        </text>
-      ))}
-    </box>
-  );
-}
-
-function TavilyQuotaCommands(props: {
-  context: Context;
-  refresh: () => Promise<ViewState>;
-}) {
-  props.context.keymap.layer(() => ({
-    mode: "global",
-    commands: [
-      {
-        id: `${PLUGIN_ID}.refresh`,
-        title: "Refresh Tavily quota",
-        description: "Re-fetch remaining Tavily API credits and show a summary",
-        group: "Tavily",
-        palette: true,
-        slash: { name: "tavily-quota" },
-        run: async () => {
-          const next = await props.refresh();
-          const message =
-            next.status === "ready"
-              ? `${formatRemaining(next.snapshot)} · ${formatPercent(next.snapshot.percentRemaining)}`
-              : next.status === "error"
-                ? next.message
-                : "still loading…";
-          props.context.ui.toast.show({
-            title: "Tavily quota",
-            message,
-            variant: next.status === "error" ? "error" : "info",
-          });
-        },
-      },
-    ],
-  }));
-
-  return null;
-}
-
-export const TavilyQuotaTuiPlugin = Plugin.define({
-  id: PLUGIN_ID,
-  async setup(context) {
-    const [state, setState] = createSignal<ViewState>({ status: "loading" });
-    const apiKey = typeof context.options.apiKey === "string" ? context.options.apiKey : undefined;
-    const refreshMs =
-      typeof context.options.refreshMs === "number" && context.options.refreshMs > 0
-        ? context.options.refreshMs
-        : REFRESH_INTERVAL_MS;
-
-    let disposed = false;
-    let inFlight = false;
-
-    const refresh = async (): Promise<ViewState> => {
-      if (inFlight) return state();
-      inFlight = true;
-      try {
-        const result = await fetchQuota({ apiKey });
-        if (!disposed) {
-          setState(
-            result.ok
-              ? { status: "ready", snapshot: result.snapshot }
-              : { status: "error", message: result.message },
-          );
-        }
-      } catch (error) {
-        // `fetchQuota` is written never to throw, but a rejected promise here
-        // must not take down the sidebar: surface it inline instead.
-        if (!disposed) {
-          setState({
-            status: "error",
-            message: error instanceof Error ? error.message : String(error),
-          });
-        }
-      } finally {
-        inFlight = false;
-      }
-      return state();
-    };
-
-    const stopSidebar = context.ui.slot({
-      append: "sidebar.content",
-      render: () => <TavilyQuotaSidebar context={context} state={state} />,
-    });
-
-    // `keymap.layer` reads Solid context, so it must be mounted from a slot
-    // component rather than called directly during plugin setup.
-    const stopCommands = context.ui.slot({
-      append: "app",
-      render: () => <TavilyQuotaCommands context={context} refresh={refresh} />,
-    });
-
-    void refresh();
-    const interval = setInterval(() => void refresh(), refreshMs);
-
-    return () => {
-      disposed = true;
-      clearInterval(interval);
-      stopSidebar();
-      stopCommands();
-    };
-  },
-});
-
-export default TavilyQuotaTuiPlugin;