@yinxe/opencode-tui-usage 0.0.6 → 0.0.8

package/dist/context-usage.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @opentui/solid */
+import type { JSX } from "solid-js";
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
+export interface ContextUsageViewProps {
+    api: TuiPluginApi;
+    sessionId: string;
+}
+export declare function ContextUsageView(props: ContextUsageViewProps): JSX.Element;
+//# sourceMappingURL=context-usage.d.ts.map

package/dist/context-usage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-usage.d.ts","sourceRoot":"","sources":["../src/context-usage.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAKpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,YAAY,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAiE1E"}

package/dist/context-usage.jsx

@@ -0,0 +1,54 @@
+import { createSignal, createEffect } from "solid-js";
+import { Show } from "solid-js";
+import { ProgressBar } from "./components.jsx";
+import { formatNumber, formatPercent } from "./formatters.js";
+export function ContextUsageView(props) {
+    const [contextData, setContextData] = createSignal(null);
+    createEffect(() => {
+        const sessionId = props.sessionId;
+        const messages = props.api.state.session.messages(sessionId);
+        if (!messages || messages.length === 0) {
+            setContextData(null);
+            return;
+        }
+        let latestTokens = 0;
+        let latestTime = -Infinity;
+        let limit = 0;
+        for (const msg of messages) {
+            if (msg.role !== "assistant" || !msg.tokens)
+                continue;
+            const tokens = msg.tokens.input +
+                msg.tokens.output +
+                msg.tokens.reasoning +
+                msg.tokens.cache.read +
+                msg.tokens.cache.write;
+            if (tokens <= 0)
+                continue;
+            const time = msg.time.completed ?? msg.time.created;
+            if (time > latestTime) {
+                latestTime = time;
+                latestTokens = tokens;
+                const provider = props.api.state.provider.find((p) => p.id === msg.providerID);
+                const model = provider?.models[msg.modelID];
+                limit = model?.limit?.context ?? 0;
+            }
+        }
+        if (latestTokens === 0 || limit === 0) {
+            setContextData(null);
+            return;
+        }
+        const percent = Math.min(100, (latestTokens / limit) * 100);
+        setContextData({ tokens: latestTokens, limit, percent });
+    });
+    return (<Show when={contextData()} fallback={<></>}>
+      <box flexDirection="column" gap={0}>
+        <box flexDirection="row" gap={2}>
+          <text fg="#a29bfe">Context:</text>
+          <text>
+            {formatNumber(contextData().tokens)} / {formatNumber(contextData().limit)} ({formatPercent(contextData().percent)})
+          </text>
+        </box>
+        <ProgressBar value={contextData().percent} color="#a29bfe" width={20}/>
+      </box>
+    </Show>);
+}

package/dist/formatters.d.ts

@@ -0,0 +1,5 @@
+export declare function formatNumber(n: number): string;
+export declare function formatCost(cost: number): string;
+export declare function formatDuration(totalSeconds: number): string;
+export declare function formatPercent(value: number): string;
+//# sourceMappingURL=formatters.d.ts.map

package/dist/formatters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../src/formatters.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9C;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAa3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEnD"}

package/dist/formatters.js

@@ -0,0 +1,30 @@
+export function formatNumber(n) {
+    if (n >= 1000000)
+        return (n / 1000000).toFixed(1) + "M";
+    if (n >= 1000)
+        return (n / 1000).toFixed(1) + "K";
+    return n.toString();
+}
+export function formatCost(cost) {
+    if (cost === 0)
+        return "$0";
+    const formatted = cost.toFixed(6).replace(/\.?0+$/, "");
+    return "$" + formatted;
+}
+export function formatDuration(totalSeconds) {
+    if (totalSeconds < 60) {
+        return `${totalSeconds}s`;
+    }
+    if (totalSeconds < 3600) {
+        const m = Math.floor(totalSeconds / 60);
+        const s = totalSeconds % 60;
+        return `${m}:${s.toString().padStart(2, "0")}`;
+    }
+    const h = Math.floor(totalSeconds / 3600);
+    const m = Math.floor((totalSeconds % 3600) / 60);
+    const s = totalSeconds % 60;
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+}
+export function formatPercent(value) {
+    return `${Math.round(value)}%`;
+}

package/dist/quota/providers/minimax.d.ts

@@ -1,13 +1,22 @@
 import type { QuotaData, ProviderConfig } from "../types.js";
 import { QuotaProvider } from "../provider.js";
-export declare class MiniMaxCNQuotaProvider implements QuotaProvider {
-    readonly name = "minimax-cn-coding-plan";
+declare class MiniMaxQuotaProvider implements QuotaProvider {
+    readonly name: string;
     private apiKey;
     private baseUrl;
+    private logTag;
+    constructor(name: string, baseUrl: string);
     init(config: ProviderConfig, _credentials: Record<string, unknown>): void;
     fetchQuota(): Promise<QuotaData | null>;
     resolveEnvVar(value: string | undefined): string | undefined;
     private mapResponseToQuotaData;
     private formatDuration;
 }
+export declare class MiniMaxCNQuotaProvider extends MiniMaxQuotaProvider {
+    constructor();
+}
+export declare class MiniMaxIOQuotaProvider extends MiniMaxQuotaProvider {
+    constructor();
+}
+export {};
 //# sourceMappingURL=minimax.d.ts.map

package/dist/quota/providers/minimax.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimax.d.ts","sourceRoot":"","sources":["../../../src/quota/providers/minimax.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAiB,MAAM,gBAAgB,CAAC;AAwB9D,qBAAa,sBAAuB,YAAW,aAAa;IAC1D,QAAQ,CAAC,IAAI,4BAA4B;IAEzC,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,OAAO,CAA8B;IAE7C,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAKnE,UAAU,IAAI,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IA8C7C,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;IAI5D,OAAO,CAAC,sBAAsB;IA8C9B,OAAO,CAAC,cAAc;CAMvB"}
+{"version":3,"file":"minimax.d.ts","sourceRoot":"","sources":["../../../src/quota/providers/minimax.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAiB,MAAM,gBAAgB,CAAC;AAwB9D,cAAM,oBAAqB,YAAW,aAAa;IACjD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAS;gBAEX,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;IAMzC,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAKnE,UAAU,IAAI,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IA8C7C,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;IAI5D,OAAO,CAAC,sBAAsB;IA8C9B,OAAO,CAAC,cAAc;CAMvB;AAED,qBAAa,sBAAuB,SAAQ,oBAAoB;;CAI/D;AAED,qBAAa,sBAAuB,SAAQ,oBAAoB;;CAI/D"}

package/dist/quota/providers/minimax.js

@@ -1,15 +1,21 @@
 import { resolveEnvVar } from "../provider.js";
-export class MiniMaxCNQuotaProvider {
-    name = "minimax-cn-coding-plan";
+class MiniMaxQuotaProvider {
+    name;
     apiKey;
-    baseUrl = "https://www.minimaxi.com";
+    baseUrl;
+    logTag;
+    constructor(name, baseUrl) {
+        this.name = name;
+        this.baseUrl = baseUrl;
+        this.logTag = `[${name}]`;
+    }
     init(config, _credentials) {
         const apiKeyRaw = config.apiKey;
         this.apiKey = resolveEnvVar(apiKeyRaw) || resolveEnvVar(config.apiKeyEnvVar);
     }
     async fetchQuota() {
         if (!this.apiKey) {
-            console.warn("[MiniMaxCNQuotaProvider] Missing apiKey");
+            console.warn(`${this.logTag} Missing apiKey`);
             return null;
         }
         try {
@@ -21,23 +27,23 @@ export class MiniMaxCNQuotaProvider {
                 },
             });
             if (!response.ok) {
-                console.error(`[MiniMaxCNQuotaProvider] API error: ${response.status}`);
+                console.error(`${this.logTag} API error: ${response.status}`);
                 return null;
             }
             const data = (await response.json());
             if (data.base_resp?.status_code !== 0) {
-                console.error(`[MiniMaxCNQuotaProvider] API error: ${data.base_resp?.status_msg}`);
+                console.error(`${this.logTag} API error: ${data.base_resp?.status_msg}`);
                 return null;
             }
             const codingPlanModels = data.model_remains.filter((m) => m.model_name.startsWith("MiniMax-M"));
             if (codingPlanModels.length === 0) {
-                console.warn("[MiniMaxCNQuotaProvider] No coding plan models found");
+                console.warn(`${this.logTag} No coding plan models found`);
                 return null;
             }
             return this.mapResponseToQuotaData(codingPlanModels);
         }
         catch (error) {
-            console.error("[MiniMaxCNQuotaProvider] Fetch failed:", error);
+            console.error(`${this.logTag} Fetch failed:`, error);
             return null;
         }
     }
@@ -92,3 +98,13 @@ export class MiniMaxCNQuotaProvider {
         return `${Math.round(seconds / 86400)}d`;
     }
 }
+export class MiniMaxCNQuotaProvider extends MiniMaxQuotaProvider {
+    constructor() {
+        super("minimax-cn-coding-plan", "https://www.minimaxi.com");
+    }
+}
+export class MiniMaxIOQuotaProvider extends MiniMaxQuotaProvider {
+    constructor() {
+        super("minimax-coding-plan", "https://api.minimax.io");
+    }
+}

package/dist/quota/service.d.ts

@@ -10,6 +10,9 @@ export declare class QuotaService {
     registerProvider(provider: QuotaProvider): void;
     setActiveProvider(providerName: string): boolean;
     getActiveProviderName(): string | null;
+    isProviderSupported(providerName: string): boolean;
+    getRegisteredProviderNames(): string[];
+    getConfiguredProviderNames(): string[];
     fetchQuota(): Promise<QuotaResult | null>;
 }
 //# sourceMappingURL=service.d.ts.map

package/dist/quota/service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../src/quota/service.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAKnD,qBAAa,YAAY;IACvB,OAAO,CAAC,SAAS,CAAyC;IAC1D,OAAO,CAAC,gBAAgB,CAAwB;IAChD,OAAO,CAAC,kBAAkB,CAAuB;IACjD,OAAO,CAAC,cAAc,CAA8B;IACpD,OAAO,CAAC,YAAY,CAAK;;IAOzB,gBAAgB,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI;IAI/C,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO;IAmBhD,qBAAqB,IAAI,MAAM,GAAG,IAAI;IAIhC,UAAU,IAAI,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;CAahD"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../src/quota/service.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAKnD,qBAAa,YAAY;IACvB,OAAO,CAAC,SAAS,CAAyC;IAC1D,OAAO,CAAC,gBAAgB,CAAwB;IAChD,OAAO,CAAC,kBAAkB,CAAuB;IACjD,OAAO,CAAC,cAAc,CAA8B;IACpD,OAAO,CAAC,YAAY,CAAK;;IAQzB,gBAAgB,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI;IAI/C,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO;IAmBhD,qBAAqB,IAAI,MAAM,GAAG,IAAI;IAItC,mBAAmB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO;IAIlD,0BAA0B,IAAI,MAAM,EAAE;IAItC,0BAA0B,IAAI,MAAM,EAAE;IAIhC,UAAU,IAAI,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;CAahD"}

package/dist/quota/service.js

@@ -1,5 +1,5 @@
 import { readProviderConfig, getProviderConfig } from "./config.js";
-import { MiniMaxCNQuotaProvider } from "./providers/minimax.js";
+import { MiniMaxCNQuotaProvider, MiniMaxIOQuotaProvider } from "./providers/minimax.js";
 import { OpenCodeGoQuotaProvider } from "./providers/opencode-go.js";
 export class QuotaService {
     providers = new Map();
@@ -9,6 +9,7 @@ export class QuotaService {
     refreshCount = 0;
     constructor() {
         this.registerProvider(new MiniMaxCNQuotaProvider());
+        this.registerProvider(new MiniMaxIOQuotaProvider());
         this.registerProvider(new OpenCodeGoQuotaProvider());
     }
     registerProvider(provider) {
@@ -32,6 +33,15 @@ export class QuotaService {
     getActiveProviderName() {
         return this.activeProviderName;
     }
+    isProviderSupported(providerName) {
+        return this.providers.has(providerName);
+    }
+    getRegisteredProviderNames() {
+        return Array.from(this.providers.keys());
+    }
+    getConfiguredProviderNames() {
+        return Object.keys(this.providerRegistry);
+    }
     async fetchQuota() {
         if (!this.activeProvider) {
             return null;

package/dist/tokens-usage.d.ts

@@ -0,0 +1,20 @@
+/** @jsxImportSource @opentui/solid */
+import type { JSX } from "solid-js";
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
+export interface TokenStats {
+    providerID: string;
+    modelID: string;
+    totalCost: number;
+    input: number;
+    output: number;
+    reasoning: number;
+    cacheRead: number;
+    cacheWrite: number;
+    messageCount: number;
+}
+export interface TokensUsageViewProps {
+    api: TuiPluginApi;
+    sessionId: string;
+}
+export declare function TokensUsageView(props: TokensUsageViewProps): JSX.Element;
+//# sourceMappingURL=tokens-usage.d.ts.map

package/dist/tokens-usage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens-usage.d.ts","sourceRoot":"","sources":["../src/tokens-usage.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAIpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,YAAY,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAYD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAsIxE"}

package/dist/tokens-usage.jsx

@@ -0,0 +1,119 @@
+import { createSignal, createEffect, Show, For } from "solid-js";
+import { Title } from "./components.jsx";
+import { formatNumber, formatCost } from "./formatters.js";
+function InlineMetric(props) {
+    return (<box flexDirection="row" gap={0}>
+      <text fg={props.color}>{props.label}</text>
+      <text fg="#888">:</text>
+      <text>{props.value}</text>
+    </box>);
+}
+export function TokensUsageView(props) {
+    const [stats, setStats] = createSignal([]);
+    const [totals, setTotals] = createSignal(null);
+    const [isLoading, setIsLoading] = createSignal(true);
+    createEffect(() => {
+        const sessionId = props.sessionId;
+        const messages = props.api.state.session.messages(sessionId);
+        if (!messages || messages.length === 0) {
+            setStats([]);
+            setTotals(null);
+            setIsLoading(false);
+            return;
+        }
+        const grouped = new Map();
+        let lastInput = 0;
+        messages.forEach((msg) => {
+            if (msg.role !== "assistant")
+                return;
+            const assistantMsg = msg;
+            if (!assistantMsg.tokens)
+                return;
+            const key = `${assistantMsg.providerID || "unknown"}::${assistantMsg.modelID || "unknown"}`;
+            if (!grouped.has(key)) {
+                grouped.set(key, {
+                    providerID: assistantMsg.providerID || "unknown",
+                    modelID: assistantMsg.modelID || "unknown",
+                    totalCost: 0,
+                    input: 0,
+                    output: 0,
+                    reasoning: 0,
+                    cacheRead: 0,
+                    cacheWrite: 0,
+                    messageCount: 0,
+                });
+            }
+            const stat = grouped.get(key);
+            stat.totalCost += assistantMsg.cost || 0;
+            stat.input += assistantMsg.tokens.input || 0;
+            stat.output += assistantMsg.tokens.output || 0;
+            stat.reasoning += assistantMsg.tokens.reasoning || 0;
+            stat.cacheRead += assistantMsg.tokens.cache?.read || 0;
+            stat.cacheWrite += assistantMsg.tokens.cache?.write || 0;
+            stat.messageCount += 1;
+            lastInput = assistantMsg.tokens.input || 0;
+        });
+        let totalInput = 0, totalOutput = 0, totalReasoning = 0;
+        let totalCacheRead = 0, totalCacheWrite = 0, totalCost = 0;
+        grouped.forEach((stat) => {
+            totalInput += stat.input;
+            totalOutput += stat.output;
+            totalReasoning += stat.reasoning;
+            totalCacheRead += stat.cacheRead;
+            totalCacheWrite += stat.cacheWrite;
+            totalCost += stat.totalCost;
+        });
+        setStats(Array.from(grouped.values()));
+        setTotals({
+            input: totalInput,
+            output: totalOutput,
+            reasoning: totalReasoning,
+            cacheRead: totalCacheRead,
+            cacheWrite: totalCacheWrite,
+            cost: totalCost,
+            currentInput: lastInput,
+        });
+        setIsLoading(false);
+    });
+    return (<box flexDirection="column" gap={0}>
+      <Title text="Usage Tokens" color="#a29bfe"/>
+
+      <Show when={isLoading()}>
+        <text fg="#888">...</text>
+      </Show>
+
+      <Show when={!isLoading() && stats().length === 0}>
+        <text fg="#888">-</text>
+      </Show>
+
+      <Show when={!isLoading() && stats().length > 0}>
+        <box flexDirection="column" gap={0}>
+          <box flexDirection="row" gap={2}>
+            <InlineMetric label="In" value={formatNumber(totals()?.input ?? 0)} color="#6bcf7f"/>
+            <InlineMetric label="Out" value={formatNumber(totals()?.output ?? 0)} color="#fd79a8"/>
+            <InlineMetric label="Rea" value={formatNumber(totals()?.reasoning ?? 0)} color="#fdcb6e"/>
+          </box>
+          <box flexDirection="row" gap={2}>
+            <InlineMetric label="Cache" value={`R:${formatNumber(totals()?.cacheRead ?? 0)} W:${formatNumber(totals()?.cacheWrite ?? 0)}`} color="#00cec9"/>
+          </box>
+          <box flexDirection="row" gap={2}>
+            <InlineMetric label="Cost" value={formatCost(totals()?.cost ?? 0)} color="#ffd93d"/>
+          </box>
+        </box>
+      </Show>
+
+      <Show when={!isLoading() && stats().length > 0}>
+        <For each={stats()}>
+          {(stat) => (<box flexDirection="column" gap={0}>
+              <box flexDirection="row" gap={1}>
+                <text fg="#74b9ff">{stat.modelID || "unknown"}</text>
+                <text fg="#ffd93d">· {formatCost(stat.totalCost)}</text>
+              </box>
+              <text fg="#888">
+                I:{formatNumber(stat.input)} O:{formatNumber(stat.output)} R:{formatNumber(stat.reasoning)} C:{formatNumber(stat.cacheRead + stat.cacheWrite)}({stat.messageCount})
+              </text>
+            </box>)}
+        </For>
+      </Show>
+    </box>);
+}

package/dist/tui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tui.d.ts","sourceRoot":"","sources":["../src/tui.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,yBAAyB,CAAC;AA+B1E,QAAA,MAAM,MAAM,EAAE,eAAe,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAG3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tui.d.ts","sourceRoot":"","sources":["../src/tui.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAyC1E,QAAA,MAAM,MAAM,EAAE,eAAe,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAG3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/tui.jsx

@@ -1,5 +1,7 @@
 import { UsageView } from "./usage.jsx";
 import { SessionInfoView } from "./session-info.jsx";
+import { TokensUsageView } from "./tokens-usage.jsx";
+import { ContextUsageView } from "./context-usage.jsx";
 import { QuotaService } from "./quota/service.js";
 const id = "opencode-tui-usage-plugin";
 const tui = async (api) => {
@@ -11,6 +13,8 @@ const tui = async (api) => {
                 return (<box gap={0}>
             <UsageView quotaService={quotaService} api={api} sessionId={_props.session_id}/>
             <SessionInfoView api={api} sessionId={_props.session_id}/>
+            <ContextUsageView api={api} sessionId={_props.session_id}/>
+            <TokensUsageView api={api} sessionId={_props.session_id}/>
           </box>);
             },
         },

package/dist/usage.d.ts

@@ -6,6 +6,9 @@ export interface UsageViewProps {
     quotaService: {
         fetchQuota(): Promise<QuotaResult | null>;
         setActiveProvider(providerName: string): boolean;
+        isProviderSupported(providerName: string): boolean;
+        getRegisteredProviderNames(): string[];
+        getConfiguredProviderNames(): string[];
     };
     api: TuiPluginApi;
     sessionId: string;

package/dist/usage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usage.d.ts","sourceRoot":"","sources":["../src/usage.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAGpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAmBpD,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE;QACZ,UAAU,IAAI,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QAC1C,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;KAClD,CAAC;IACF,GAAG,EAAE,YAAY,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA0L5D"}
+{"version":3,"file":"usage.d.ts","sourceRoot":"","sources":["../src/usage.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAIpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE;QACZ,UAAU,IAAI,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QAC1C,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;QACjD,mBAAmB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;QACnD,0BAA0B,IAAI,MAAM,EAAE,CAAC;QACvC,0BAA0B,IAAI,MAAM,EAAE,CAAC;KACxC,CAAC;IACF,GAAG,EAAE,YAAY,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAoCD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA2N5D"}

package/dist/usage.jsx

@@ -1,19 +1,24 @@
 import { createSignal, createEffect, onCleanup } from "solid-js";
 import { Title, ProgressBar } from "./components.jsx";
+import { formatDuration } from "./formatters.js";
 const REFRESH_INTERVAL = 60;
-function formatDuration(totalSeconds) {
-    if (totalSeconds < 60) {
-        return `${totalSeconds}s`;
+function EmptyState(props) {
+    if (!props.provider) {
+        return <text fg="#888">No LLM activity detected</text>;
     }
-    if (totalSeconds < 3600) {
-        const m = Math.floor(totalSeconds / 60);
-        const s = totalSeconds % 60;
-        return `${m}:${s.toString().padStart(2, "0")}`;
+    if (!props.supported) {
+        return (<box flexDirection="column" gap={0}>
+        <text fg="#ff6b6b">not support provider: {props.provider}</text>
+        <text fg="#74b9ff">github.com/Yinxe/opencode-tui-usage</text>
+      </box>);
     }
-    const h = Math.floor(totalSeconds / 3600);
-    const m = Math.floor((totalSeconds % 3600) / 60);
-    const s = totalSeconds % 60;
-    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+    if (props.error) {
+        return (<box flexDirection="column" gap={0}>
+        <text fg="#ff6666">Error fetching quota</text>
+        <text fg="#888">{props.error}</text>
+      </box>);
+    }
+    return <text fg="#888">No quota data available</text>;
 }
 export function UsageView(props) {
     const [result, setResult] = createSignal(null);
@@ -21,18 +26,31 @@ export function UsageView(props) {
     const [currentProvider, setCurrentProvider] = createSignal(null);
     const [currentModel, setCurrentModel] = createSignal(null);
     const [refreshCountdown, setRefreshCountdown] = createSignal(REFRESH_INTERVAL);
+    const [providerSupported, setProviderSupported] = createSignal(true);
+    const [fetchError, setFetchError] = createSignal(null);
     const doRefresh = () => {
         const providerID = currentProvider();
         if (!providerID)
             return;
         setLoading(true);
-        props.quotaService.setActiveProvider(providerID);
+        setFetchError(null);
+        const supported = props.quotaService.setActiveProvider(providerID);
+        setProviderSupported(supported);
+        if (!supported) {
+            setLoading(false);
+            setResult(null);
+            return;
+        }
         props.quotaService.fetchQuota().then((data) => {
             if (data && data.quota) {
                 setResult(data);
             }
+            else {
+                setResult(null);
+            }
             setLoading(false);
-        }).catch(() => {
+        }).catch((error) => {
+            setFetchError(String(error));
             setLoading(false);
         });
     };
@@ -42,6 +60,8 @@ export function UsageView(props) {
         if (!messages || messages.length === 0) {
             setCurrentProvider(null);
             setCurrentModel(null);
+            setFetchError(null);
+            setProviderSupported(false);
             return;
         }
         const lastAssistantMsg = [...messages]
@@ -50,11 +70,15 @@ export function UsageView(props) {
         if (!lastAssistantMsg) {
             setCurrentProvider(null);
             setCurrentModel(null);
+            setFetchError(null);
+            setProviderSupported(false);
             return;
         }
         if (!("providerID" in lastAssistantMsg)) {
             setCurrentProvider(null);
             setCurrentModel(null);
+            setFetchError(null);
+            setProviderSupported(false);
             return;
         }
         const providerID = lastAssistantMsg.providerID;
@@ -66,14 +90,21 @@ export function UsageView(props) {
     });
     createEffect(() => {
         const providerID = currentProvider();
-        const modelID = currentModel();
         if (!providerID) {
             setResult(null);
             setLoading(false);
+            setProviderSupported(false);
             return;
         }
         setLoading(true);
-        props.quotaService.setActiveProvider(providerID);
+        setFetchError(null);
+        const supported = props.quotaService.setActiveProvider(providerID);
+        setProviderSupported(supported);
+        if (!supported) {
+            setResult(null);
+            setLoading(false);
+            return;
+        }
         props.quotaService.fetchQuota().then((data) => {
             if (data && data.quota) {
                 setResult(data);
@@ -84,6 +115,7 @@ export function UsageView(props) {
             setLoading(false);
         }).catch((error) => {
             console.error("[UsageView] Failed to fetch quota:", error);
+            setFetchError(String(error));
             setResult(null);
             setLoading(false);
         });
@@ -102,7 +134,7 @@ export function UsageView(props) {
         onCleanup(() => clearInterval(id));
     });
     return (<box flexDirection="column" gap={0}>
-      <Title text="Usage" color="#6bcf7f"/>
+      <Title text="Usage Quota" color="#6bcf7f"/>
       <text fg="#888">Provider: {currentProvider() ?? "Unknown"}</text>
       {loading() ? (<>
           <box flexDirection="column" gap={0}>
@@ -157,6 +189,6 @@ export function UsageView(props) {
             <ProgressBar value={result().quota.monthly?.usage ?? 0} color="#4da6ff"/>
           </box>
           <text fg="#888">{formatDuration(refreshCountdown())} Refresh #{result().refreshCount}</text>
-        </>) : (<text>No data</text>)}
+        </>) : (<EmptyState provider={currentProvider()} supported={providerSupported()} error={fetchError()} registeredProviders={props.quotaService.getRegisteredProviderNames()} configuredProviders={props.quotaService.getConfiguredProviderNames()}/>)}
     </box>);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yinxe/opencode-tui-usage",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "OpenCode TUI 额度显示插件 - 在侧边栏显示用量和额度信息",
   "repository": "github:Yinxe/opencode-tui-usage",
   "type": "module",