opencode-tweaks 0.7.0 → 0.7.2

package/README.md

@@ -198,7 +198,8 @@ The cost settings used to live in the Tokens entry. A choice saved there before
 ### 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`.
+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

package/package.json

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

package/src/tweaks/model-panel.tsx

@@ -1,6 +1,6 @@
 import type { Context, SlotMap } from "@opencode/plugin/tui/context"
 import { TextAttributes } from "@opentui/core"
-import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js"
+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"
@@ -53,6 +53,7 @@ function ModelBody(props: {
 }) {
   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
@@ -106,26 +107,25 @@ function ModelBody(props: {
 
   const rates = createMemo(() => {
     const value = price()
-    if (!value) return undefined
-
-    const parts: string[] = []
-    if (inputOn()) parts.push(`in ${formatRate(value.input)}`)
-    if (outputOn()) parts.push(`out ${formatRate(value.output)}`)
-    if (cacheOn()) parts.push(`cache ${formatRate(value.cache.read)}`)
-    if (parts.length > 0 && value.tier) {
-      parts.push(`>${formatTokens(value.tier.size, "compact")}`)
+    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 parts.length > 0 ? parts.join(" · ") : undefined
+    return rows
   })
 
   const variant = () => (variantOn() ? entry()?.ref.variant : undefined)
 
-  const subtitle = () => {
-    const parts = [entry()?.provider, variant()].filter(
-      (part): part is string => typeof part === "string" && part.length > 0,
-    )
-    return parts.length > 0 ? parts.join(" · ") : undefined
+  const title = () => {
+    const name = entry()?.name
+    const selected = variant()
+    return selected ? `${name} · ${selected}` : name
   }
 
   const scheduled = () => {
@@ -139,10 +139,10 @@ function ModelBody(props: {
     return priceWindowFor(ref, new Date(now()))
   }
 
-  const peakLabel = () => {
+  const stateValue = () => {
     if (!peakOn() || !scheduled()) return undefined
-    const window = peak()
-    return window ? `${window.label} ×${window.multiplier} now` : "off-peak"
+    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
@@ -156,28 +156,46 @@ function ModelBody(props: {
   })
 
   return (
-    <box flexDirection="column" marginTop={1}>
-      <text attributes={TextAttributes.BOLD} fg={theme().text.base}>
-        Model
-      </text>
-      <Show when={entry()} fallback={<text fg={theme().text.muted}>No model selected</text>}>
-        <text fg={theme().text.base} wrapMode="word">
-          {entry()?.name}
+    <box flexDirection="column">
+      <box
+        flexDirection="row"
+        justifyContent="space-between"
+        onMouseUp={() => setCollapsed((value) => !value)}
+      >
+        <text attributes={TextAttributes.BOLD} fg={theme().text.base}>
+          {collapsed() ? "▶" : "▼"} Model
         </text>
-        <Show when={subtitle()}>
-          <text fg={theme().text.muted} wrapMode="word">
-            {subtitle()}
-          </text>
-        </Show>
-        <Show when={rates()}>
-          <text fg={theme().text.muted} wrapMode="word">
-            {rates()}
+        <Show when={entry()?.provider}>
+          <text attributes={TextAttributes.BOLD} fg={theme().text.base} wrapMode="none">
+            {entry()?.provider}
           </text>
         </Show>
-        <Show when={peakLabel()}>
-          <text fg={peak() ? theme().text.feedback.warning.base : theme().text.muted}>
-            {peakLabel()}
+      </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>