opencode-model-price-intel 1.0.0 → 1.1.0

package/README.md

@@ -1,11 +1,12 @@
 # opencode-model-price-intel
 
 [![CI](https://github.com/chris15joseph/opencode-model-price-intel/actions/workflows/ci.yml/badge.svg)](https://github.com/chris15joseph/opencode-model-price-intel/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/opencode-model-price-intel)](https://www.npmjs.com/package/opencode-model-price-intel)
 [![license](https://img.shields.io/npm/l/opencode-model-price-intel)](LICENSE)
 
 An OpenCode 2 plugin that puts **prices and the Artificial Analysis
-Intelligence Index** next to every model in `/models`, and adds a full
-`/model-pricing` table when you need the details.
+Intelligence Index** next to every model in `/models`, and opens a full
+`/model-pricing` table in a native TUI dialog when you need the details.
 
 ```text
 /models
@@ -23,13 +24,6 @@ so the first `/models` render is instant and the network never blocks it.
 Requires OpenCode 2.2.x (the plugin pins `@opencode/plugin` to `2.2.5`) and
 Node.js 20 or newer.
 
-> **npm status:** the package is staged but not yet published. Until it appears
-> on npm, install from Git:
->
-> ```sh
-> opencode plugin add github:chris15joseph/opencode-model-price-intel
-> ```
-
 ```sh
 opencode plugin add opencode-model-price-intel
 ```
@@ -76,23 +70,40 @@ list the same plugin twice.
 
 | Option | Default | Meaning |
 | --- | --- | --- |
-| `decorateNames` | `true` | Append the price/score summary to `/models` names. The `/model-pricing` table still works when this is off. |
+| `decorateNames` | `true` | Append the price/score summary to `/models` names. The `/model-pricing` dialog still works when this is off. |
 | `costFormat` | `"detailed"` | `"detailed"` renders `in $2.5 out $15 · cache read $0.25 write $0`; `"compact"` renders `$2.5/$15/$0.25/$0`. |
 | `aaApiKey` | unset | Artificial Analysis API key. Falls back to `ARTIFICIALANALYSIS_API_KEY`. Without either, the public model-list page is used. |
 | `refreshHours` | `12` | Score cache TTL and refresh interval, clamped to `1..596` hours. |
 
 Invalid option values log one warning and fall back to the defaults.
 
-## Commands
+## Usage
+
+Open the native model picker with `/models`. Each row's name carries the
+one-line summary:
 
-| Command | What it does |
-| --- | --- |
-| `/model-pricing` | Prints a Markdown table with every model, provider, price tier, cache price, and AA score. |
-| `/prices` | Alias of `/model-pricing`. |
-| `/models` | The native picker, now decorated with the one-line summary. |
+```text
+GPT 6 Astra · Turbo · in $2.5 out $15 · cache read $0.25 write $0 (2 tiers) · AA 56.9
+```
 
-The table is a synthetic session message; no model call is made. Multi-tier
-models get one row per price entry (`base`, then `>N` for context overrides).
+Multi-tier models show the tier count; the `/models` row itself stays a single
+line.
+
+For the full table, run `/model-pricing` (or `/prices`). It opens a native TUI
+dialog with an aligned, scrollable table of every provider, price tier, cache
+price, and AA score. Click any column header to sort by it; click the same
+header again to reverse the order. The active header shows `▲` (ascending) or
+`▼` (descending), and multi-tier models stay together with their continuation
+rows. The dialog can be dismissed with `Esc`, `Ctrl+C`, or a
+click outside. The command handler is a toggle, so invoking it again while the
+dialog is open closes it (the dialog is modal, so `Esc` is the usual path from
+the prompt). The table is a TUI feature; the `/models` decoration is
+server-side and works in every client.
+
+The TUI part asks the server for structured rows over RPC, so the dialog uses
+the same live registry and score cache as `/models`. It does not send a prompt
+or make a model call. The table is laid out for the current terminal width and
+scrolls vertically (and horizontally when the window is narrow).
 
 ## How it works
 
@@ -106,6 +117,8 @@ models get one row per price entry (`base`, then `>N` for context overrides).
 - The last good result is cached in OpenCode plugin storage for `refreshHours`.
   A cache older than 30 days is ignored.
 - The model registry reloads only when the score data actually changes.
+- The TUI part is registered through the package's `./tui` export and fetches
+  the table through the server-side RPC in `./rpc`.
 - Unscored models show `AA n/a`. A model with no registry cost shows
   `pricing n/a` (or `n/a` in compact mode).
 
@@ -117,8 +130,10 @@ models get one row per price entry (`base`, then `>N` for context overrides).
   discounts, or regional pricing that the registry does not carry.
 - AA scores are comparative within one index major version. The plugin never
   mixes a v5 snapshot into a v6 result.
-- The plugin only decorates the list and prints a table. It does not route
-  requests or change model selection.
+- The plugin only decorates the model list and renders the pricing dialog. It
+  does not route requests or change model selection.
+- The `/model-pricing` dialog requires the TUI. Other clients still get the
+  `/models` decoration.
 
 ## Development
 
@@ -131,16 +146,18 @@ npm test
 npm pack --dry-run
 ```
 
-The package exports raw TypeScript (`src/index.ts`); OpenCode 2.2.x transpiles
-it at load. Plain Node cannot import the installed package from `node_modules`.
+The package exports raw TypeScript (`src/index.ts`, `src/rpc.ts`, and
+`src/tui.tsx`); OpenCode 2.2.x transpiles it at load. Plain Node cannot import
+the installed package from `node_modules`. The TUI part uses the host's
+`@opentui` packages, declared as peer dependencies.
 
 ## Attribution
 
 Scores and related model data are produced by
 [Artificial Analysis](https://artificialanalysis.ai/). The `/model-pricing`
-header carries the source, index version, capture/fetch date, and attribution
-link. See [`NOTICE`](NOTICE) and [`SNAPSHOT-NOTICE.md`](SNAPSHOT-NOTICE.md) for
-provenance.
+dialog carries the source, index version, capture/fetch date, and attribution
+link. See [`NOTICE`](NOTICE) and [`SNAPSHOT-NOTICE.md`](SNAPSHOT-NOTICE.md)
+for further provenance.
 
 ## License
 

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "opencode-model-price-intel",
-  "version": "1.0.0",
-  "description": "OpenCode 2 plugin that adds input/output/cache prices and Artificial Analysis Intelligence Index scores to /models, plus a full /model-pricing table.",
+  "version": "1.1.0",
+  "description": "OpenCode 2 plugin that adds input/output/cache prices and Artificial Analysis Intelligence Index scores to /models, plus a full /model-pricing TUI dialog.",
   "type": "module",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./rpc": "./src/rpc.ts",
+    "./tui": "./src/tui.tsx"
   },
   "types": "./src/index.ts",
   "files": [
@@ -19,8 +21,16 @@
   "dependencies": {
     "@opencode/plugin": "2.2.5"
   },
+  "peerDependencies": {
+    "@opentui/core": ">=0.6.6",
+    "@opentui/solid": ">=0.6.6",
+    "solid-js": ">=1.9.0"
+  },
   "devDependencies": {
+    "@opentui/core": "^0.8.3",
+    "@opentui/solid": "^0.8.3",
     "@types/node": "22.20.5",
+    "solid-js": "^1.9.18",
     "typescript": "5.9.3"
   },
   "scripts": {

package/src/index.ts

@@ -16,14 +16,18 @@
  *
  * Because the built-in `/models` picker renders `Model.Info.name` as the row
  * title, the pricing/score line is attached to the display name so `/models`
- * lists it per model. `/model-pricing` (alias `/prices`) prints the complete
- * table — every price tier, cache read/write, and the AA score — into the
- * session.
+ * lists it per model.
  *
  * Note: an experimental scrolling (marquee) mode for narrow screens existed
  * here and was removed — periodic name repaints made client lists reset their
  * scroll position (both the TUI and the web UI). Names are therefore static.
  *
+ * The full table is exposed over RPC (`src/rpc.ts`). The TUI part
+ * (`src/tui.tsx`) adds `/model-pricing` and `/prices`, fetches structured rows
+ * from this server and renders them in a native dialog table. Keeping the
+ * command in the TUI avoids the old behavior where `ctx.session.synthetic`
+ * delivered the table to the model as a prompt instead of displaying it.
+ *
  * Options (opencode.jsonc `plugins` entry):
  *   - decorateNames: boolean   attach the line to model names (default true)
  *   - costFormat: "detailed" | "compact"   cost line format (default detailed)
@@ -34,9 +38,10 @@
  */
 
 import { Plugin } from "@opencode/plugin"
-import type { CommandInvocation } from "@opencode/plugin/promise/command"
 import { fetchAAScores, lookupScore, snapshotScores, type AAFetched } from "./aa.ts"
-import { formatCost, pricingSegment, type CostFormat, type CostTier } from "./pricing.ts"
+import { pricingSegment, type CostFormat } from "./pricing.ts"
+import { ModelPricing } from "./rpc.ts"
+import { pricingData, renderTable, type TableModel } from "./table.ts"
 
 const CACHE_KEY = "aa-scores/v3"
 const DEFAULT_REFRESH_HOURS = 12
@@ -53,15 +58,11 @@ interface ResolvedOptions {
   refreshMs: number
 }
 
-interface TableModel {
-  readonly id: string
-  readonly modelID?: string
+function modelKey(model: {
   readonly providerID: string
-  readonly name: string
-  readonly cost: readonly CostTier[] | undefined
-}
-
-function modelKey(model: TableModel): string {
+  readonly modelID?: string
+  readonly id: string
+}): string {
   return `${model.providerID}/${model.modelID || model.id}`
 }
 
@@ -218,63 +219,6 @@ function cachePayload(value: AAFetched): JsonValue {
   }
 }
 
-function markdownCell(value: unknown): string {
-  return String(value ?? "")
-    .replace(/\\/g, "\\\\")
-    .replace(/\|/g, "\\|")
-    .replace(/\r\n|\r|\n/g, " ")
-}
-
-function buildTable(
-  models: readonly TableModel[],
-  aa: AAFetched,
-  baseNames: ReadonlyMap<string, string>,
-  decorateNames: boolean,
-): string {
-  const lines: string[] = [
-    "### Model pricing & Artificial Analysis Intelligence Index",
-    "",
-    `Prices per 1M tokens from the live OpenCode model registry. Scores: Artificial Analysis Intelligence Index v${markdownCell(aa.version)}, source ${markdownCell(aa.source)}, fetched ${markdownCell(aa.fetchedAt.slice(0, 10))}. Attribution: https://artificialanalysis.ai/`,
-    "",
-    "| Model | Provider | Tier | Input | Output | Cache read | Cache write | AA Intelligence |",
-    "| --- | --- | --- | --- | --- | --- | --- | --- |",
-  ]
-
-  for (const model of models) {
-    const baseName = decorateNames
-      ? (baseNames.get(modelKey(model)) ?? model.name)
-      : model.name
-    const score = lookupScore(aa.scores, model.id, baseName)
-    const aaCell =
-      score?.score != null
-        ? `${Math.round(score.score * 10) / 10}${score.note ? ` (${score.note})` : ""}`
-        : "n/a"
-
-    let tiers: ReturnType<typeof formatCost> = []
-    try {
-      tiers = formatCost(model.cost)
-    } catch (error) {
-      console.warn(`[model-price-intel] could not format cost for ${modelKey(model)}:`, error)
-    }
-    const rows = tiers.length > 0 ? tiers : [undefined]
-    rows.forEach((tier, index) => {
-      const cells = [
-        index === 0 ? baseName : "",
-        index === 0 ? model.providerID : "",
-        tier ? (tier.tierLabel ?? (index === 0 ? "base" : "")) : "base",
-        tier ? tier.input : "n/a",
-        tier ? tier.output : "n/a",
-        tier ? tier.cacheRead : "n/a",
-        tier ? tier.cacheWrite : "n/a",
-        index === 0 ? aaCell : "",
-      ]
-      lines.push(`| ${cells.map(markdownCell).join(" | ")} |`)
-    })
-  }
-
-  return lines.join("\n")
-}
-
 /** Remove our own decoration if a transform is replayed against a stale name. */
 function undecoratedName(name: string, price: string): string {
   const suffix = ` · ${price} · AA `
@@ -429,10 +373,10 @@ export default Plugin.define({
       })
     }
 
-    // Full table as a synthetic session message (no model call needed). The
-    // command is registered even when name decoration is disabled.
-    await ctx.command.transform((editor) => {
-      const execute = async (input: CommandInvocation): Promise<void> => {
+    // The TUI part calls this RPC to render the full table in a dialog. The
+    // server builds the rows because only it owns the live score cache.
+    await ctx.rpc.register(ModelPricing, {
+      table: async () => {
         let models: readonly TableModel[] = []
         try {
           const { data } = await ctx.model.list()
@@ -440,22 +384,9 @@ export default Plugin.define({
         } catch (error) {
           console.warn("[model-price-intel] could not list models for the pricing table:", error)
         }
-        await ctx.session.synthetic({
-          sessionID: input.sessionID,
-          text: buildTable(models, aa, baseNames, options.decorateNames),
-        })
-      }
-      editor.add({
-        name: "model-pricing",
-        description:
-          "List input/output/cache prices and Artificial Analysis intelligence scores for every model",
-        execute,
-      })
-      editor.add({
-        name: "prices",
-        description: "Alias of /model-pricing",
-        execute,
-      })
+        const data = pricingData(models, aa, baseNames, options.decorateNames)
+        return { ...data, text: renderTable(data) }
+      },
     })
 
     // Hydrate the cache and refresh live scores in the background. setup must

package/src/pricing.ts

@@ -124,8 +124,7 @@ export type CostFormat = "detailed" | "compact"
  *
  * The compact form (<in>/<out>/<read>/<write>) keeps rows readable on narrow
  * screens such as mobile web sessions. Multi-tier models show their base tier
- * and an `(N tiers)` marker; the `/model-pricing` command lists every tier
- * with its `>N` context threshold.
+ * and an `(N tiers)` marker.
  */
 export function pricingSegment(
   cost: readonly CostTier[] | undefined,

package/src/rpc.ts

@@ -0,0 +1,65 @@
+/** RPC contract shared by the server plugin and the TUI part. */
+
+import { Rpc } from "@opencode/plugin/rpc"
+
+/** One aligned table row; continuation tiers leave model/provider/aa blank. */
+export interface PricingRow {
+  readonly model: string
+  readonly provider: string
+  readonly tier: string
+  readonly input: string
+  readonly output: string
+  readonly cache: string
+  readonly aa: string
+}
+
+export const ModelPricing = Rpc.define({
+  id: "model-price-intel",
+  methods: {
+    table: {
+      input: {
+        type: "object",
+        properties: {},
+        additionalProperties: false,
+      },
+      output: {
+        type: "object",
+        properties: {
+          /** Pre-rendered fallback table (also useful to copy for support). */
+          text: { type: "string" },
+          title: { type: "string" },
+          meta: { type: "string" },
+          footnote: { type: "string" },
+          rows: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                model: { type: "string" },
+                provider: { type: "string" },
+                tier: { type: "string" },
+                input: { type: "string" },
+                output: { type: "string" },
+                cache: { type: "string" },
+                aa: { type: "string" },
+              },
+              required: ["model", "provider", "tier", "input", "output", "cache", "aa"],
+              additionalProperties: false,
+            },
+          },
+        },
+        required: ["text", "title", "meta", "footnote", "rows"],
+        additionalProperties: false,
+      },
+    },
+  },
+  events: {},
+})
+
+export interface PricingTable {
+  readonly text: string
+  readonly title: string
+  readonly meta: string
+  readonly footnote: string
+  readonly rows: readonly PricingRow[]
+}

package/src/table.ts

@@ -0,0 +1,404 @@
+/**
+ * Pricing table data and rendering shared by the server RPC and the TUI
+ * dialog. The server owns the live registry and AA cache; the TUI only lays
+ * the returned rows out for the current terminal width.
+ */
+
+import { lookupScore, type AAFetched } from "./aa.ts"
+import { formatCost, type CostTier } from "./pricing.ts"
+import type { PricingRow } from "./rpc.ts"
+
+export interface TableModel {
+  readonly id: string
+  readonly modelID?: string
+  readonly providerID: string
+  readonly name: string
+  readonly cost: readonly CostTier[] | undefined
+}
+
+/** Everything the TUI needs to draw the table, minus the pre-rendered text. */
+export interface PricingDataset {
+  readonly title: string
+  readonly meta: string
+  readonly footnote: string
+  readonly rows: readonly PricingRow[]
+}
+
+export type SortDirection = "asc" | "desc"
+
+/** The active sort column and direction. Model groups sort together. */
+export interface SortState {
+  readonly key: keyof PricingRow
+  readonly direction: SortDirection
+}
+
+/** One header cell, including the gap that follows it. */
+export interface PricingTableColumn {
+  readonly key: keyof PricingRow
+  /** Header text plus the direction indicator when this column is sorted. */
+  readonly label: string
+  /** Cell width, not counting the inter-column gap. */
+  readonly width: number
+  readonly align: "left" | "right"
+  /** Padded header cell followed by `COLUMN_GAP` (empty on the last cell). */
+  readonly header: string
+  /** Set only for the active sort column. */
+  readonly direction?: SortDirection
+}
+
+export interface PricingTableLayout {
+  /** Header row, already padded to the chosen column widths. */
+  readonly header: string
+  /** A rule under the header, one character per header cell. */
+  readonly separator: string
+  /** One aligned line per pricing row. */
+  readonly lines: readonly string[]
+  /** Per-column layout, used by the TUI to make headers clickable. */
+  readonly columns: readonly PricingTableColumn[]
+}
+
+/** Fallback width used by the RPC `text` field and `dialog.alert`. */
+export const DEFAULT_TABLE_WIDTH = 108
+
+const TITLE = "Model pricing & Artificial Analysis Intelligence Index"
+const FOOTNOTE =
+  "AA: * bundled v5 snapshot; ~ other match note (variant or entry name). Attribution: https://artificialanalysis.ai/"
+const COLUMN_GAP = "  "
+
+interface Column {
+  readonly key: keyof PricingRow
+  readonly header: string
+  readonly align: "left" | "right"
+  readonly min: number
+  readonly max: number
+}
+
+const COLUMNS: readonly Column[] = [
+  { key: "model", header: "MODEL", align: "left", min: 10, max: 56 },
+  { key: "provider", header: "PROVIDER", align: "left", min: 6, max: 14 },
+  { key: "tier", header: "TIER", align: "left", min: 4, max: 9 },
+  { key: "input", header: "IN $", align: "right", min: 3, max: 12 },
+  { key: "output", header: "OUT $", align: "right", min: 3, max: 12 },
+  { key: "cache", header: "CACHE R/W $", align: "right", min: 7, max: 18 },
+  { key: "aa", header: "AA", align: "right", min: 2, max: 6 },
+]
+
+function modelKey(model: TableModel): string {
+  return `${model.providerID}/${model.modelID || model.id}`
+}
+
+/** Keep one physical line per cell. */
+function oneLine(value: unknown): string {
+  return String(value ?? "")
+    .replace(/\r\n|\r|\n/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+}
+
+/** Drop the currency sign; the column header already states the unit. */
+function price(value: string): string {
+  return value.startsWith("$") ? value.slice(1) : value
+}
+
+function aaCell(score: ReturnType<typeof lookupScore>): string {
+  if (score?.score == null) return "n/a"
+  const value = String(Math.round(score.score * 10) / 10)
+  if (!score.note) return value
+  return `${value}${score.note.includes("[snapshot]") ? "*" : "~"}`
+}
+
+/**
+ * Build the grouped table rows. The model and provider are written once per
+ * model; extra context tiers continue underneath with those columns blank.
+ */
+export function pricingData(
+  models: readonly TableModel[],
+  aa: AAFetched,
+  baseNames: ReadonlyMap<string, string>,
+  decorateNames: boolean,
+): PricingDataset {
+  const rows: PricingRow[] = []
+
+  for (const model of models) {
+    const key = modelKey(model)
+    const baseName = decorateNames ? (baseNames.get(key) ?? model.name) : model.name
+    const score = lookupScore(aa.scores, model.id, baseName)
+    const aaValue = aaCell(score)
+
+    let tiers: ReturnType<typeof formatCost> = []
+    try {
+      tiers = formatCost(model.cost)
+    } catch (error) {
+      console.warn(`[model-price-intel] could not format cost for ${key}:`, error)
+    }
+
+    if (tiers.length === 0) {
+      rows.push({
+        model: oneLine(baseName),
+        provider: oneLine(model.providerID),
+        tier: "base",
+        input: "n/a",
+        output: "—",
+        cache: "—",
+        aa: aaValue,
+      })
+      continue
+    }
+
+    tiers.forEach((tier, index) => {
+      const first = index === 0
+      rows.push({
+        model: first ? oneLine(baseName) : "",
+        provider: first ? oneLine(model.providerID) : "",
+        tier: oneLine(tier.tierLabel ?? "base"),
+        input: tier.free ? "free" : price(tier.input),
+        output: tier.free ? "—" : price(tier.output),
+        cache: tier.free ? "—" : `${price(tier.cacheRead)}/${price(tier.cacheWrite)}`,
+        aa: first ? aaValue : "",
+      })
+    })
+  }
+
+  return {
+    title: TITLE,
+    meta: `Prices per 1M tokens (USD) from the live OpenCode model registry.\nScores: Artificial Analysis Intelligence Index v${aa.version}.\nSource: ${aa.source}, fetched ${aa.fetchedAt.slice(0, 10)}.`,
+    footnote: FOOTNOTE,
+    rows,
+  }
+}
+
+/**
+ * Toggle a sort: the first click on a column sorts ascending, a second click
+ * on the same column flips the direction, and a different column starts over.
+ */
+export function nextSort(current: SortState | undefined, key: keyof PricingRow): SortState {
+  if (current?.key === key) {
+    return { key, direction: current.direction === "asc" ? "desc" : "asc" }
+  }
+  return { key, direction: "asc" }
+}
+
+interface RowGroup {
+  readonly rows: PricingRow[]
+  readonly index: number
+}
+
+/**
+ * Split the flat row list into model groups. A non-empty model starts a group;
+ * blank model cells are continuation tiers and stay with the group above.
+ */
+function groupRows(rows: readonly PricingRow[]): RowGroup[] {
+  const groups: RowGroup[] = []
+  for (const row of rows) {
+    if (row.model !== "" || groups.length === 0) {
+      groups.push({ rows: [row], index: groups.length })
+    } else {
+      groups[groups.length - 1].rows.push(row)
+    }
+  }
+  return groups
+}
+
+type Sortable =
+  | { readonly kind: "text"; readonly text: string }
+  | { readonly kind: "number"; readonly values: readonly number[] }
+  | { readonly kind: "missing" }
+
+function sortable(value: string, key: keyof PricingRow): Sortable {
+  const text = value.trim()
+  if (key === "model" || key === "provider" || key === "tier") {
+    return { kind: "text", text }
+  }
+  if (text === "" || text === "—" || text === "?" || text.toLowerCase() === "n/a") {
+    return { kind: "missing" }
+  }
+
+  // Cache cells are "read/write", so compare the read price first and use the
+  // write price as a tie-breaker. Other numeric cells are a single value.
+  const parts = key === "cache" ? text.split("/") : [text]
+  const values: number[] = []
+  for (const part of parts) {
+    const token = part.trim().replace(/^\$/, "").replace(/^</, "")
+    if (token.toLowerCase() === "free") {
+      values.push(0)
+      continue
+    }
+    const match = /^-?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?/i.exec(token)
+    const number = match ? Number(match[0]) : Number.NaN
+    if (!Number.isFinite(number)) return { kind: "missing" }
+    values.push(number)
+  }
+  return { kind: "number", values }
+}
+
+function compareText(left: string, right: string): number {
+  const a = left.toLowerCase()
+  const b = right.toLowerCase()
+  if (a < b) return -1
+  if (a > b) return 1
+  if (left === right) return 0
+  return left < right ? -1 : 1
+}
+
+function compareSortable(left: Sortable, right: Sortable): number {
+  if (left.kind === "text" && right.kind === "text") {
+    return compareText(left.text, right.text)
+  }
+  if (left.kind === "number" && right.kind === "number") {
+    const length = Math.max(left.values.length, right.values.length)
+    for (let index = 0; index < length; index++) {
+      const a = left.values[index]
+      const b = right.values[index]
+      if (a === b) continue
+      if (a === undefined) return -1
+      if (b === undefined) return 1
+      return a < b ? -1 : 1
+    }
+    return 0
+  }
+  return 0
+}
+
+/**
+ * Sort model groups by one column while keeping continuation tiers attached.
+ * Sorting is stable: registry order survives ties in both directions, and
+ * missing/unpriced values sort last regardless of direction.
+ */
+export function sortRows(
+  rows: readonly PricingRow[],
+  key: keyof PricingRow,
+  direction: SortDirection = "asc",
+): PricingRow[] {
+  const groups = groupRows(rows)
+  groups.sort((left, right) => {
+    const a = sortable(left.rows[0][key], key)
+    const b = sortable(right.rows[0][key], key)
+    if (a.kind === "missing" || b.kind === "missing") {
+      if (a.kind === b.kind) return left.index - right.index
+      return a.kind === "missing" ? 1 : -1
+    }
+    const comparison = compareSortable(a, b)
+    if (comparison !== 0) {
+      return direction === "asc" ? comparison : -comparison
+    }
+    return left.index - right.index
+  })
+  return groups.flatMap((group) => group.rows)
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value))
+}
+
+/** Shorten a cell to the column width, keeping one cell for the ellipsis. */
+function truncate(value: string, width: number): string {
+  if (value.length <= width) return value
+  if (width <= 1) return "…".slice(0, width)
+  return `${value.slice(0, width - 1)}…`
+}
+
+function fit(value: string, width: number, align: "left" | "right"): string {
+  const text = truncate(oneLine(value), width)
+  const padding = " ".repeat(Math.max(0, width - text.length))
+  return align === "right" ? `${padding}${text}` : `${text}${padding}`
+}
+
+function headerLabel(column: Column, sort: SortState | undefined): string {
+  if (sort?.key !== column.key) return column.header
+  return `${column.header} ${sort.direction === "asc" ? "▲" : "▼"}`
+}
+
+function columnWidths(
+  rows: readonly PricingRow[],
+  width: number,
+  sort: SortState | undefined,
+): Record<keyof PricingRow, number> {
+  const natural = {} as Record<keyof PricingRow, number>
+  for (const column of COLUMNS) {
+    let widest = headerLabel(column, sort).length
+    for (const row of rows) widest = Math.max(widest, row[column.key].length)
+    natural[column.key] = clamp(widest, column.min, column.max)
+  }
+
+  // Give the leftover space to the model column so the table spans the dialog
+  // instead of leaving a ragged right edge. When space is tight, truncating the
+  // model name is preferable to overlapping the numeric columns.
+  const gaps = COLUMN_GAP.length * (COLUMNS.length - 1)
+  const fixed = COLUMNS.reduce(
+    (total, column) => total + (column.key === "model" ? 0 : natural[column.key]),
+    gaps,
+  )
+  const available = Math.max(0, width - fixed)
+  natural.model = clamp(available, COLUMNS[0].min, COLUMNS[0].max)
+
+  return natural
+}
+
+/** Lay the rows out as a monospace table for the given total width. */
+export function formatRows(
+  rows: readonly PricingRow[],
+  width: number = DEFAULT_TABLE_WIDTH,
+  sort?: SortState,
+): PricingTableLayout {
+  const safeWidth = Math.max(24, Math.floor(width))
+  const widths = columnWidths(rows, safeWidth, sort)
+  const line = (cells: Readonly<Record<keyof PricingRow, string>>, trim: boolean): string => {
+    const rendered = COLUMNS.map((column) =>
+      fit(cells[column.key], widths[column.key], column.align),
+    ).join(COLUMN_GAP)
+    return trim ? rendered.trimEnd() : rendered
+  }
+
+  const columns = COLUMNS.map((column, index): PricingTableColumn => {
+    const label = headerLabel(column, sort)
+    const gap = index === COLUMNS.length - 1 ? "" : COLUMN_GAP
+    return {
+      key: column.key,
+      label: oneLine(label),
+      width: widths[column.key],
+      align: column.align,
+      header: `${fit(label, widths[column.key], column.align)}${gap}`,
+      direction: sort?.key === column.key ? sort.direction : undefined,
+    }
+  })
+  const header = columns.map((column) => column.header).join("")
+
+  return {
+    header,
+    separator: "─".repeat(header.length),
+    lines: rows.map((row) => line(row, true)),
+    columns,
+  }
+}
+
+/** Render the full text table used by the RPC fallback and tests. */
+export function renderTable(
+  data: PricingDataset,
+  width: number = DEFAULT_TABLE_WIDTH,
+): string {
+  const layout = formatRows(data.rows, width)
+  return [
+    data.title,
+    "",
+    data.meta,
+    "",
+    layout.header,
+    layout.separator,
+    ...layout.lines,
+    "",
+    data.footnote,
+  ].join("\n")
+}
+
+/**
+ * Backwards-compatible text helper: build the dataset and render it at the
+ * default width.
+ */
+export function buildTable(
+  models: readonly TableModel[],
+  aa: AAFetched,
+  baseNames: ReadonlyMap<string, string>,
+  decorateNames: boolean,
+): string {
+  return renderTable(pricingData(models, aa, baseNames, decorateNames))
+}

package/src/tui.tsx

@@ -0,0 +1,207 @@
+/**
+ * TUI part: `/model-pricing` and `/prices` open a native dialog table.
+ *
+ * A dialog (rather than a session panel) keeps the right side of the session
+ * usable and inherits the built-in dialog behavior: scrolling, Escape,
+ * backdrop-click to close, and modal focus. The table rows come from the
+ * server over RPC because only the server owns the live registry and AA cache.
+ */
+
+import { Plugin, usePlugin } from "@opencode/plugin/tui"
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import { For, Show, createMemo, createSignal } from "solid-js"
+import { ModelPricing, type PricingTable } from "./rpc.ts"
+import {
+  DEFAULT_TABLE_WIDTH,
+  formatRows,
+  nextSort,
+  sortRows,
+  type SortState,
+} from "./table.ts"
+
+function PricingDialog(props: {
+  readonly table: () => PricingTable | undefined
+  readonly onClose: () => void
+}) {
+  const context = usePlugin()
+  const dimensions = useTerminalDimensions()
+  const theme = context.theme.surface("dialog")
+  const width = () => Math.max(40, Math.min(DEFAULT_TABLE_WIDTH, dimensions().width - 10))
+  const maxHeight = () => Math.max(5, Math.floor(dimensions().height / 2) - 6)
+  const [sort, setSort] = createSignal<SortState | undefined>()
+  const sortBy = (key: SortState["key"]) => setSort((current) => nextSort(current, key))
+
+  const focus = (scroll: ScrollBoxRenderable) => {
+    // The dialog has no search input, so give the table keyboard focus.
+    setTimeout(() => {
+      if (!scroll.isDestroyed) scroll.focus()
+    }, 1)
+  }
+
+  return (
+    <box flexDirection="column" paddingLeft={3} paddingRight={3} paddingBottom={1} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text.base}>
+          Model pricing &amp; AA Intelligence Index
+        </text>
+        <text fg={theme.text.muted} onMouseUp={props.onClose}>
+          esc
+        </text>
+      </box>
+      <Show
+        when={props.table()}
+        fallback={<text fg={theme.text.muted}>Loading model pricing…</text>}
+      >
+        {(table: () => PricingTable) => {
+          const layout = createMemo(() => {
+            const state = sort()
+            const rows = state
+              ? sortRows(table().rows, state.key, state.direction)
+              : table().rows
+            return formatRows(rows, width(), state)
+          })
+          return (
+            <>
+              <text fg={theme.text.muted} wrapMode="word">
+                {table().meta}
+              </text>
+              <box flexDirection="column">
+                <box flexDirection="row" flexShrink={0}>
+                  <For each={layout().columns}>
+                    {(column) => (
+                      <text
+                        attributes={TextAttributes.BOLD}
+                        fg={column.direction ? theme.text.base : theme.text.muted}
+                        wrapMode="none"
+                        flexShrink={0}
+                        onMouseUp={(event) => {
+                          // The host closes on a backdrop click; a header click
+                          // must only change the sort order.
+                          event.preventDefault()
+                          event.stopPropagation()
+                          sortBy(column.key)
+                        }}
+                      >
+                        {column.header}
+                      </text>
+                    )}
+                  </For>
+                </box>
+                <text fg={theme.text.faint} wrapMode="none">
+                  {layout().separator}
+                </text>
+                <scrollbox
+                  ref={focus}
+                  maxHeight={maxHeight()}
+                  scrollX
+                  scrollbarOptions={{ visible: true }}
+                  horizontalScrollbarOptions={{ visible: false }}
+                >
+                  <Show
+                    when={layout().lines.length > 0}
+                    fallback={<text fg={theme.text.muted}>No models available.</text>}
+                  >
+                    <For each={layout().lines}>
+                      {(line) => (
+                        <text fg={theme.text.base} wrapMode="none">
+                          {line}
+                        </text>
+                      )}
+                    </For>
+                  </Show>
+                </scrollbox>
+              </box>
+              <text fg={theme.text.muted} wrapMode="word">
+                {table().footnote}
+              </text>
+            </>
+          )
+        }}
+      </Show>
+    </box>
+  )
+}
+
+function message(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
+
+export default Plugin.define({
+  id: "model-price-intel.tui",
+  async setup(context) {
+    const pricing = context.client.rpc(ModelPricing)
+    const [table, setTable] = createSignal<PricingTable | undefined>()
+    let open = false
+    // Ignore a response that belongs to a dialog the user already closed.
+    let request = 0
+
+    const close = () => {
+      request++
+      open = false
+      setTable(undefined)
+    }
+
+    const toggle = async () => {
+      if (open) {
+        open = false
+        request++
+        setTable(undefined)
+        context.ui.dialog.clear()
+        return
+      }
+
+      let location
+      try {
+        location = context.location ?? context.data.location.default()
+      } catch (error) {
+        context.ui.toast.show({
+          title: "Model pricing",
+          message: message(error),
+          variant: "error",
+        })
+        return
+      }
+
+      open = true
+      const id = ++request
+      setTable(undefined)
+
+      try {
+        context.ui.dialog.show(
+          () => <PricingDialog table={table} onClose={close} />,
+          close,
+        )
+        // `show` starts a fresh dialog at the default size, so apply the larger
+        // presentation afterwards.
+        context.ui.dialog.set({ size: "xlarge", centered: true })
+
+        const result = (await pricing.table({}, { location })) as PricingTable
+        if (!open || id !== request) return
+        setTable(result)
+      } catch (error) {
+        if (!open || id !== request) return
+        close()
+        context.ui.dialog.clear()
+        context.ui.toast.show({
+          title: "Model pricing",
+          message: message(error),
+          variant: "error",
+        })
+      }
+    }
+
+    context.keymap.layer(() => ({
+      mode: "global",
+      commands: [
+        {
+          id: "model-price-intel.prices",
+          title: "Model pricing",
+          group: "Model price intel",
+          slash: { name: "model-pricing", aliases: ["prices"] },
+          run: toggle,
+        },
+      ],
+    }))
+  },
+})