opencode-tweaks 0.6.1 → 0.7.1

package/README.md

@@ -100,6 +100,7 @@ Resetting a setting drops the local value, so the option or default applies agai
 | `quota`  | Provider quota, reset times, and a daily spending budget. | On      |
 | `tokens` | Token usage per turn, plus session totals at the bottom.  | On      |
 | `cost`   | Cost per turn, plus session totals at the bottom.         | On      |
+| `model`  | Current model list price and peak state in the sidebar.   | On      |
 
 ### Quota
 
@@ -194,6 +195,20 @@ per turn, and the estimate follows the API rates instead. Costs use the raw coun
 
 The cost settings used to live in the Tokens entry. A choice saved there before the split keeps applying.
 
+### Model
+
+Model shows the model the session is using and its list price in the sidebar, under the quota. The name, provider,
+and reasoning variant come from the session, so the card follows `/models`. Click the `Model` header to collapse or
+expand the card.
+
+`Input price`, `Output price`, and `Cache read price` choose the rates, all in dollars per million tokens. The card
+uses the catalog price that applies to the session's context, so a long-context tier shows the higher rate with its
+threshold (`>512K`).
+
+`Peak state` adds the provider's live peak marker for schedules the plugin knows, such as DeepSeek and OpenCode Go:
+`peak ×2 now` during the higher window and `off-peak` otherwise. The badge on the turn cost still records the window
+each round started in.
+
 ## Development
 
 ```sh
@@ -232,6 +247,8 @@ src/
     quota-panel.tsx sidebar quota panel
     tokens.ts       token tweak definition
     cost.ts         cost tweak definition
+    model.ts        model tweak definition
+    model-panel.tsx sidebar model price card
     usage-slots.tsx inline and status line figures
     usage-inject.ts splice into the host's lines
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "opencode-tweaks",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "Opt-in settings and small interface improvements for OpenCode.",
   "type": "module",
   "license": "MIT",

package/src/tui.tsx

@@ -1,5 +1,6 @@
 import { Plugin } from "@opencode/plugin/tui"
 import { openTweaksMenu } from "./tweaks/menu"
+import { ModelPanel } from "./tweaks/model-panel"
 import { QuotaPanel } from "./tweaks/quota-panel"
 import { createSettingsStore } from "./tweaks/settings"
 import { createUsageInjector } from "./tweaks/usage-inject"
@@ -17,6 +18,11 @@ export default Plugin.define({
       render: () => <QuotaPanel context={context} store={store} />,
     })
 
+    context.ui.slot({
+      append: "sidebar.content",
+      render: (input) => <ModelPanel context={context} input={input} store={store} />,
+    })
+
     context.ui.slot({
       append: "session.composer.top",
       render: (input) => (

package/src/tweaks/model-panel.tsx

@@ -0,0 +1,203 @@
+import type { Context, SlotMap } from "@opencode/plugin/tui/context"
+import { TextAttributes } from "@opentui/core"
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js"
+import { formatRate, priceFor } from "../usage/cost"
+import { hasPriceSchedule, priceWindowFor } from "../usage/price-window"
+import { formatTokens } from "../usage/tokens"
+import { modelTweak } from "./model"
+import type { SettingsStore } from "./settings"
+import type { TweakSetting } from "./types"
+
+function setting(id: string): TweakSetting {
+  const found = modelTweak.settings.find((item) => item.id === id)
+  if (!found) throw new Error(`Model setting "${id}" is missing`)
+  return found
+}
+
+const ENABLED = setting("enabled")
+const INPUT = setting("input")
+const OUTPUT = setting("output")
+const CACHE = setting("cache")
+const VARIANT = setting("variant")
+const PEAK = setting("peak")
+
+/** The ref stored on a session or returned by the composer. */
+interface ModelRef {
+  readonly providerID: string
+  readonly id: string
+  readonly variant?: string
+}
+
+/**
+ * The model card is a companion to the cost figures: it names the model and
+ * lists its catalog rates, while the cost tweak counts what the session spent.
+ */
+export function ModelPanel(props: {
+  readonly context: Context
+  readonly input: SlotMap["sidebar.content"]
+  readonly store: SettingsStore
+}) {
+  const enabled = () => props.store.read(modelTweak, ENABLED).value === true
+
+  return (
+    <Show when={enabled()}>
+      <ModelBody context={props.context} input={props.input} store={props.store} />
+    </Show>
+  )
+}
+
+function ModelBody(props: {
+  readonly context: Context
+  readonly input: SlotMap["sidebar.content"]
+  readonly store: SettingsStore
+}) {
+  const theme = () => props.context.theme
+  const [now, setNow] = createSignal(Date.now())
+  const [collapsed, setCollapsed] = createSignal(false)
+
+  const inputOn = () => props.store.read(modelTweak, INPUT).value === true
+  const outputOn = () => props.store.read(modelTweak, OUTPUT).value === true
+  const cacheOn = () => props.store.read(modelTweak, CACHE).value === true
+  const variantOn = () => props.store.read(modelTweak, VARIANT).value === true
+  const peakOn = () => props.store.read(modelTweak, PEAK).value === true
+
+  /** The session's model, or the composer's while the session has none yet. */
+  const model = createMemo<ModelRef | undefined>(() => {
+    const session = props.context.data.session.get(props.input.sessionID)
+    if (session?.model) return session.model
+
+    const current = props.context.ui.model.current()
+    return current
+      ? { providerID: current.providerID, id: current.modelID, variant: current.variant }
+      : undefined
+  })
+
+  /** The catalog entry for that model, with what the panel needs to show it. */
+  const entry = createMemo(() => {
+    const ref = model()
+    if (!ref) return undefined
+
+    const found = (props.context.data.location.model.list() ?? []).find(
+      (candidate) =>
+        candidate.providerID === ref.providerID &&
+        (candidate.modelID === ref.id || candidate.id === ref.id),
+    )
+    const provider = (props.context.data.location.provider.list() ?? []).find(
+      (candidate) => candidate.id === ref.providerID,
+    )
+
+    return {
+      ref,
+      name: found?.name ?? ref.id,
+      provider: provider?.name,
+      costs: found?.cost ?? [],
+    }
+  })
+
+  /** The context the session has read so far, which picks a long-context tier. */
+  const contextSize = createMemo(() => {
+    const tokens = props.context.data.session.get(props.input.sessionID)?.tokens
+    return tokens ? tokens.input + tokens.cache.read : 0
+  })
+
+  const price = createMemo(() => {
+    const costs = entry()?.costs
+    return costs?.length ? priceFor(costs, contextSize()) : undefined
+  })
+
+  const rates = createMemo(() => {
+    const value = price()
+    if (!value) return []
+
+    const rows: { label: string; value: string }[] = []
+    if (inputOn()) rows.push({ label: "in", value: formatRate(value.input) })
+    if (outputOn()) rows.push({ label: "out", value: formatRate(value.output) })
+    if (cacheOn()) rows.push({ label: "cache", value: formatRate(value.cache.read) })
+    if (rows.length > 0 && value.tier) {
+      rows.push({ label: "from", value: `>${formatTokens(value.tier.size, "compact")}` })
+    }
+
+    return rows
+  })
+
+  const variant = () => (variantOn() ? entry()?.ref.variant : undefined)
+
+  const title = () => {
+    const name = entry()?.name
+    const selected = variant()
+    return selected ? `${name} · ${selected}` : name
+  }
+
+  const scheduled = () => {
+    const ref = entry()?.ref
+    return ref ? hasPriceSchedule(ref) : false
+  }
+
+  const peak = () => {
+    const ref = entry()?.ref
+    if (!ref || !peakOn() || !scheduled()) return undefined
+    return priceWindowFor(ref, new Date(now()))
+  }
+
+  const stateValue = () => {
+    if (!peakOn() || !scheduled()) return undefined
+    const value = peak()
+    return value ? `${value.label} ×${value.multiplier} now` : "off-peak"
+  }
+
+  // The live peak marker follows the clock, so refresh it while the card can
+  // show one. Models without a schedule and a hidden peak row need no timer.
+  createEffect(() => {
+    if (!peakOn() || !scheduled()) return
+
+    setNow(Date.now())
+    const timer = setInterval(() => setNow(Date.now()), 30_000)
+    onCleanup(() => clearInterval(timer))
+  })
+
+  return (
+    <box flexDirection="column" marginTop={1}>
+      <box
+        flexDirection="row"
+        justifyContent="space-between"
+        onMouseUp={() => setCollapsed((value) => !value)}
+      >
+        <text attributes={TextAttributes.BOLD} fg={theme().text.base}>
+          {collapsed() ? "▶" : "▼"} Model
+        </text>
+        <Show when={entry()?.provider}>
+          <text fg={theme().text.muted} wrapMode="none">
+            {entry()?.provider}
+          </text>
+        </Show>
+      </box>
+      <Show when={!collapsed()}>
+        <Show when={entry()} fallback={<text fg={theme().text.muted}>No model selected</text>}>
+          <text fg={theme().text.base} wrapMode="word">
+            {title()}
+          </text>
+          <For each={rates()}>
+            {(row) => (
+              <box flexDirection="row" gap={1}>
+                <text flexShrink={0} fg={theme().text.muted}>
+                  {row.label.padEnd(5)}
+                </text>
+                <text fg={theme().text.base}>{row.value}</text>
+              </box>
+            )}
+          </For>
+          <Show when={stateValue()}>
+            <box flexDirection="row" gap={1}>
+              <text flexShrink={0} fg={theme().text.muted}>
+                {"state".padEnd(5)}
+              </text>
+              <text fg={peak() ? theme().text.feedback.warning.base : theme().text.muted}>
+                {stateValue()}
+              </text>
+            </box>
+          </Show>
+        </Show>
+      </Show>
+    </box>
+  )
+}

package/src/tweaks/model.ts

@@ -0,0 +1,63 @@
+import { defineTweak } from "./types"
+
+/**
+ * The sidebar card reads the same catalog as the cost figures, but stays its
+ * own tweak: it describes the model, while the cost tweak counts what it spent.
+ * Every rate is optional so the card fits a narrow sidebar.
+ */
+export const modelTweak = defineTweak({
+  id: "model",
+  title: "Model",
+  description: "Show the current model's list price and peak state in the sidebar.",
+  category: "Session",
+  settings: [
+    {
+      id: "enabled",
+      title: "Enabled",
+      description: "Show the model card in the sidebar.",
+      category: "General",
+      kind: "boolean",
+      default: true,
+    },
+    {
+      id: "input",
+      title: "Input price",
+      description: "Show the input rate per million tokens.",
+      category: "Rates",
+      kind: "boolean",
+      default: true,
+    },
+    {
+      id: "output",
+      title: "Output price",
+      description: "Show the output rate per million tokens.",
+      category: "Rates",
+      kind: "boolean",
+      default: true,
+    },
+    {
+      id: "cache",
+      title: "Cache read price",
+      description: "Show the cache read rate per million tokens.",
+      category: "Rates",
+      kind: "boolean",
+      default: true,
+    },
+    {
+      id: "variant",
+      title: "Variant",
+      description: "Show the reasoning variant selected for the model.",
+      category: "Display",
+      kind: "boolean",
+      default: true,
+    },
+    {
+      id: "peak",
+      title: "Peak state",
+      description: "Show whether the model is billed above its catalog price right now.",
+      category: "Display",
+      kind: "boolean",
+      default: true,
+    },
+  ],
+})

package/src/tweaks/registry.ts

@@ -1,10 +1,11 @@
 import { costTweak } from "./cost"
+import { modelTweak } from "./model"
 import { quotaTweak } from "./quota"
 import { tokensTweak } from "./tokens"
 import type { Tweak } from "./types"
 
 /** Every tweak shown by `/tweaks`. Add new definitions here. */
-export const tweaks: readonly Tweak[] = [quotaTweak, tokensTweak, costTweak]
+export const tweaks: readonly Tweak[] = [quotaTweak, tokensTweak, costTweak, modelTweak]
 
 export function findTweak(id: string): Tweak | undefined {
   return tweaks.find((tweak) => tweak.id === id)

package/src/usage/cost.ts

@@ -85,6 +85,15 @@ export function isCostDigits(value: unknown): value is CostDigits {
   return value === "auto" || value === 2 || value === 3 || value === 4 || value === 5 || value === 6
 }
 
+/**
+ * A list rate per million tokens. Normal rates keep two decimals; sub-cent
+ * rates show up to six and drop trailing zeros, so `$0.003` stays readable.
+ */
+export function formatRate(value: number): string {
+  if (value >= 0.01) return `$${value.toFixed(2)}`
+  return `$${value.toFixed(6).replace(/0+$/, "").replace(/\.$/, "")}`
+}
+
 /** Normal amounts keep two decimals; smaller ones grow until a digit shows. */
 function autoDigits(cost: number): number {
   if (cost === 0 || cost >= 0.01) return 2

package/src/usage/price-window.ts

@@ -107,6 +107,19 @@ function utcMinutes(date: Date): number {
   return date.getUTCHours() * 60 + date.getUTCMinutes()
 }
 
+/** The schedule a model follows, when its provider publishes one. */
+function scheduleFor(model: PriceModel): PriceSchedule | undefined {
+  return schedules.find(
+    (candidate) =>
+      candidate.providers.includes(model.providerID) && model.id.startsWith(candidate.modelPrefix),
+  )
+}
+
+/** Whether the model follows a published peak schedule, even off-peak. */
+export function hasPriceSchedule(model: PriceModel | undefined): boolean {
+  return model ? scheduleFor(model) !== undefined : false
+}
+
 /**
  * The higher price that applies to a model at `at`, or `undefined` when the
  * catalog price is the one being charged. The check is deliberately narrow:
@@ -115,10 +128,7 @@ function utcMinutes(date: Date): number {
 export function priceWindowFor(model: PriceModel | undefined, at: Date): PriceWindow | undefined {
   if (!model) return undefined
 
-  const schedule = schedules.find(
-    (candidate) =>
-      candidate.providers.includes(model.providerID) && model.id.startsWith(candidate.modelPrefix),
-  )
+  const schedule = scheduleFor(model)
   if (!schedule) return undefined
 
   if (!schedule.peakDays.includes(weekday(at))) return undefined