Skip to content

feat(client): add plans & quota sidebar panel, real-time session cost readout, and price table remote - #36

Open
xer-on wants to merge 1 commit into
Mars-Sea:mainfrom
xer-on:main
Open

feat(client): add plans & quota sidebar panel, real-time session cost readout, and price table remote#36
xer-on wants to merge 1 commit into
Mars-Sea:mainfrom
xer-on:main

Conversation

@xer-on

@xer-on xer-on commented Sep 12, 2026

Copy link
Copy Markdown

Summary

This PR introduces three major UI and client-side capability upgrades for the Command Code provider plugin:

  1. Plans & Quota Dashboard & Sidebar Footer Card: A dedicated footer action in the sidebar (sidebar.footer.action) that reveals current plan details, 5-hour and weekly quota depletion bars, monthly credit balances (limit - remaining), and token statistics, which opens a full dashboard in the center workspace column (main slot).
  2. In-Composer Real-time Session Cost Readout: An unobtrusive cost indicator injected into the composer dock (conversation.composer.dock) that decorates the official token-usage pill with session cost estimates in USD and adds per-token cost breakdown rows into the usage dialog.
  3. Vendored Model Pricing Catalog & Remote Contract: A new Host-side price table (commandcode/prices) exposing official per-token rates (input, output, cache-read, cache-write) in USD per million tokens, factoring in weekday peak/off-peak pricing schedules.

Key Features & Changes

1. Plans & Quota Sidebar Card & Center Dashboard

  • Sidebar Footer Card: Registers under sidebar.footer.action (order 1), placing it immediately above the Settings seat. Shows live status and opens the dashboard on click via ctx.layout.selectPanel().
  • Center Dashboard Panel: Registers in the layout's main slot as commandcode-panel. Renders:
    • Account plan badge and billing cycle end dates.
    • 5-hour and weekly quota usage progress bars with automatic reset timers.
    • Monthly credit consumption using the official CLI derivation formula (limit - remaining).
    • Purchased vs. free credit tile breakdown.
  • Throttled Auto-Refresh: Background refresher keeps quota and token statistics current without overwhelming the API gateway.
  • Pure / React-Free Controller: Implemented in src/client/panel.ts so view-model logic and formatting can be tested without a DOM.

2. In-Composer Session Cost & Dialog Breakdown

  • Non-Destructive Pill Injection: Rather than replacing the stock stats dock cell (which would break upstream i18n and formatting), src/client/session-cost-display.ts decorates the existing token-usage button pill with dollar figures (e.g. · $0.02).
  • Usage Dialog Breakdown: Uses a lightweight MutationObserver on document.body to match and inject cost lines directly into the token details dialog (Uncached input, Completion, Cache read, Cache write).
  • Strict Guardrails:
    • Only computes cost for sessions routed through the commandcode provider.
    • Never fabricates unpriced cache-write rates; leaves unpriced rates clearly indicated.
    • Renders invisible if unpriceable or unknown, avoiding misleading zero-dollar figures.

3. Model Pricing Remote (commandcode/prices)

  • Vendored Pricing Data: src/model-prices.ts defines official pricing rows matching Command Code docs in USD / 1M tokens.
  • Typert Gateway Contract: Declares the commandcode/prices endpoint in src/usage-wire.ts and wires it in src/usage-remote.ts.
  • Peak / Off-Peak Calculation: Accurately determines weekday peak windows and applies peak-rate overrides for time-of-day models.

Architectural Notes

  • Clean Decoupling: All new controllers (src/client/panel.ts, src/client/session-cost.ts, src/client/prices.ts) are decoupled from React and JSX.
  • Resilient Registration: Slot injections (main, sidebar.footer.action, conversation.composer.dock) are wrapped in defensive guards so individual surface failures cannot crash the entire plugin fiber.

Verification

  • Verified snapshot store subscription and disposal lifecycle.
  • Tested quota progress bar and depletion percentage calculations.
  • Tested session cost calculator across free models, flat-rate models, and time-of-day peak models.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant