pi-better-model-select 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.3.6
+
+- Add author metadata and public Matrix/Mastodon contact links for questions, feedback, and bug reports.
+
+- Fix cropped package gallery artwork by pointing `pi.image` at a padded 1280×720 PNG generated from the square icon. Keep `icon.svg` unchanged.
+
+- Color model names by relative lifetime selection frequency, using logarithmic low/medium/high tiers across the enabled model list. Search does not change the scale.
+- Add independent Color-code usage, Show total selections, and Usage palette options. Defaults are colors on, totals off, and the icon's blue/amber/orange palette. The alternative Theme palette uses Pi's thinking-level colors.
+- Keep usage colors visible on the selected row and remove the USES column when totals are hidden. Counting and sorting remain unchanged.
+- Refresh the demo GIF and picker still with usage colors, optional totals, the theme palette, and the real Options form.
+
 ## 0.3.5
 
 ### Added

package/README.md

@@ -16,9 +16,9 @@ Run `/bms`, type to filter by name, model ID, or provider, then press Enter to s
 
 ![BMS model search, forms, defaults, and result placement](https://cdn.jsdelivr.net/npm/pi-better-model-select@latest/docs/demo/showcase.gif)
 
-The picker uses aligned model, provider, effort, context, usage, default, and current columns. Type in the search field in Pi's editor area. Results appear below search by default, matching Pi command completion. Choose **Options → Result placement → Above prompt** for bottom-up results with the best match nearest the search line.
+The picker uses aligned model, provider, effort, context, default, and current columns. Model names are color-coded by relative selection frequency using the icon's blue, amber, and orange palette. Unused models stay neutral. Selection totals are hidden by default. Type in the search field in Pi's editor area. Results appear below search by default, matching Pi command completion. Choose **Options → Result placement → Above prompt** for bottom-up results with the best match nearest the search line.
 
-Add and edit use one form. Review the fields, press Enter to change a value, then choose **Save configuration** or press Ctrl+S to save. Text and numeric fields currently open a Pi input dialog; choices use the compact table. Esc goes back; unsaved changes require a discard confirmation. Options also stay in a draft until saved.
+Add and edit use one form. Review the fields, press Enter to change a value, then choose **Save configuration** or press Ctrl+S to save. Text and numeric fields currently open a Pi input dialog; choices use the compact table. Esc goes back; unsaved changes require a discard confirmation. Options also stay in a draft until saved. **Color-code usage**, **Show total selections**, and **Usage palette** are independent options. Choose the Icon palette, the default, or Theme to use Pi's active thinking-level colors. Turning display options off does not stop counting or change sorting.
 
 ## Commands and shortcuts
 
@@ -99,6 +99,13 @@ Provider filters hide entries only in `/bms`, not Pi's `/model` picker. Default-
 - [Configuration reference](https://cdn.jsdelivr.net/npm/pi-better-model-select@latest/docs/public/configuration.md): file paths, precedence, overlays, metadata, and integration limits.
 Development and navigation design documents live in `docs/internal/` in the source checkout and are not included in the npm package.
 
+## Support and contact
+
+By Martin Senebald. For questions, feedback, or bug reports, contact me on:
+
+- [Matrix: @msenebald:daq.red](https://matrix.to/#/@msenebald:daq.red)
+- [Mastodon: @msenebald@chaos.social](https://chaos.social/@msenebald)
+
 ## License
 
 MIT

package/docs/public/configuration.md

@@ -109,3 +109,25 @@ If discovery fails, the menu offers **Agent discovery details** with the error.
 Only models loaded with Enter in `/bms` count toward ranking. BMS sorts by selection count, then recency, then alphabetically. Default assignments, `/model`, model cycling, and session restores do not count.
 
 BMS prunes statistics for models missing from the effective configuration when the picker opens. Ctrl+R clears all usage statistics.
+
+### Usage display
+
+Ctrl+O → Options provides three independent settings. Press Ctrl+S to save.
+
+| Option | JSON key | Default |
+| --- | --- | --- |
+| Color-code usage | `colorCodeUsage` | `true` |
+| Show total selections | `showUsageCounts` | `false` |
+| Usage palette | `usagePalette` | `"icon"` |
+
+These keys live in `<agent-dir>/bms-settings.json`. Existing settings files inherit the defaults. Disabling colors or hiding totals does not stop recording selections or change sorting. With totals off, the USES column is removed entirely.
+
+The Icon palette uses blue `#5BA7FF`, amber `#FFB13D`, and orange `#FF6B3D`. The Theme palette uses the active Pi theme's `thinkingLow`, `thinkingMedium`, and `thinkingHigh` roles. Theme hues and their distinctness depend on the theme. Usage colors stay visible on the keyboard-highlighted row; its background and chevron still follow Pi's selection theme. Icon colors are approximated on 256-color terminals.
+
+Color tiers use a dynamic logarithmic scale:
+
+```text
+strength = log(1 + model selection count) / log(1 + highest selection count)
+```
+
+The maximum comes from all configured, enabled models before search filtering. Zero selections stay neutral. Positive strengths up to one-third use the low color, up to two-thirds use medium, and the rest use high. Equal counts get equal colors; if all counts are zero, everything stays neutral. A single used model gets the high color even after its first selection: colors express relative lifetime preference, not an absolute amount or recent activity. Colors can change as other models accumulate selections or providers are hidden. Searching does not rescale them.

package/extensions/bms.ts

@@ -105,6 +105,22 @@ export async function optionsFlow(ctx: any, config: ModelsConfig): Promise<void>
           settings.writeMode = value as "overlay" | "direct";
           return writeLabel();
         } },
+      { key: "colorCodeUsage", label: "Color-code usage", value: settings.colorCodeUsage ? "On" : "Off",
+        description: "Color model names by relative selection frequency. Counting and ranking remain active when off.",
+        edit: async () => { settings.colorCodeUsage = !settings.colorCodeUsage; return settings.colorCodeUsage ? "On" : "Off"; } },
+      { key: "showUsageCounts", label: "Show total selections", value: settings.showUsageCounts ? "On" : "Off",
+        description: "Show the USES column independently of usage colors. Counts are saved even when hidden.",
+        edit: async () => { settings.showUsageCounts = !settings.showUsageCounts; return settings.showUsageCounts ? "On" : "Off"; } },
+      { key: "usagePalette", label: "Usage palette", value: settings.usagePalette === "icon" ? "Icon" : "Theme",
+        description: "Icon uses blue, amber, orange. Theme uses thinkingLow, thinkingMedium, thinkingHigh from the active Pi theme.",
+        edit: async () => {
+          const value = await tableSelect(ctx, { title: "BMS / Options / Usage palette", initialValue: settings.usagePalette,
+            rows: [{ value: "icon", label: "Icon", description: "Blue → amber → orange" },
+              { value: "theme", label: "Theme", description: "Active theme's low, medium, high thinking colors" }] });
+          if (value !== "icon" && value !== "theme") return;
+          settings.usagePalette = value;
+          return value === "icon" ? "Icon" : "Theme";
+        } },
       { key: "reset", label: "Reset usage ranking", value: "", edit: async () => {
         if (await confirmAction(ctx, { title: "BMS / Options / Reset usage", lines: ["Clear all model usage counts? This takes effect immediately."], confirmLabel: "Reset usage" })) saveUsage({ version: 1, counts: {}, lastUsed: {} });
         return;

package/extensions/lib/picker-dialog.ts

@@ -1,5 +1,5 @@
 import { ModelPicker, type PickerAction, type PickerOptions, type RankedModel } from "./picker.ts";
-import { resultPlacement } from "./tui.ts";
+import { loadSettings } from "./store.ts";
 
 export async function pickerDialog(
   ctx: any, rows: RankedModel[], title = "Better Model Select", assignment = false,
@@ -7,7 +7,8 @@ export async function pickerDialog(
 ): Promise<PickerAction | undefined> {
   // Return the Focusable itself. Pi's custom UI installs it in the prompt area,
   // calls setFocus on it and restores the previous editor when done is called.
+  const settings = loadSettings();
   return ctx.ui.custom((tui: any, theme: any, _kb: any, done: any) =>
     new ModelPicker(rows, theme, () => tui.requestRender(), done, assignment,
-      { ...options, placement: options.placement ?? resultPlacement() }, title));
+      { ...options, usageDisplay: options.usageDisplay ?? settings, placement: options.placement ?? settings.resultPlacement }, title));
 }

package/extensions/lib/picker.ts

@@ -4,6 +4,7 @@
 import { matchesKey, type Focusable, type SelectItem, type SelectListTheme } from "@earendil-works/pi-tui";
 import { TableSelect, type Placement, type SelectionState, type TableColumn } from "./tui.ts";
 import { loadUsage, usageKey, type ModelsConfig } from "./store.ts";
+import { DEFAULT_USAGE_DISPLAY, usageColor, usageTier, type UsageDisplay } from "./usage-colors.ts";
 
 export type PickerAction =
   | { kind: "load"; provider: string; modelId: string }
@@ -109,6 +110,7 @@ const HINT = "enter load · ctrl+d default · ctrl+a add · ctrl+o menu · esc c
 
 export interface PickerOptions {
   placement?: Placement;
+  usageDisplay?: UsageDisplay;
   /** Pass the same state object when reopening after an action. Updated in place. */
   state?: SelectionState & { menuValue?: string };
 }
@@ -147,7 +149,18 @@ export class ModelPicker implements Focusable {
     this.done = done;
     this.assignment = assignment;
     this.options = options;
-    this.table = new TableSelect({ title, columns: MODEL_COLUMNS,
+    const display = options.usageDisplay ?? DEFAULT_USAGE_DISPLAY;
+    const columns = display.showUsageCounts ? MODEL_COLUMNS : MODEL_COLUMNS.filter(column => column.key !== "uses");
+    const maximum = Math.max(0, ...rows.map(row => row.count));
+    const tiers = new Map(rows.map(row => [toSelectItem(row).value, usageTier(row.count, maximum)]));
+    this.table = new TableSelect({ title, columns,
+      styleCell: (row, key, text, activeTheme, selected) => {
+        if (display.colorCodeUsage && (key === "model" || key === "uses")) {
+          return usageColor(activeTheme, tiers.get(row.value) ?? "unused", display.usagePalette, text);
+        }
+        return typeof activeTheme?.fg === "function"
+          ? activeTheme.fg(selected ? "accent" : key === "model" ? "text" : "muted", text) : text;
+      },
       rows: rows.map(row => ({ value: toSelectItem(row).value, label: row.label,
         // IDs remain searchable but are not repeated under the display name.
         description: row.modelId,

package/extensions/lib/store.ts

@@ -22,6 +22,9 @@ export interface BmsSettings {
   writeMode: WriteMode;
   resultPlacement: "above" | "below";
   disabledProviders: string[];
+  colorCodeUsage: boolean;
+  showUsageCounts: boolean;
+  usagePalette: "icon" | "theme";
 }
 
 const DEFAULT_SETTINGS: BmsSettings = {
@@ -29,6 +32,9 @@ const DEFAULT_SETTINGS: BmsSettings = {
   writeMode: "overlay",
   resultPlacement: "below",
   disabledProviders: [],
+  colorCodeUsage: true,
+  showUsageCounts: false,
+  usagePalette: "icon",
 };
 
 export interface ModelEntry {
@@ -75,6 +81,9 @@ export function loadSettings(): BmsSettings {
       version: 1,
       writeMode: raw.writeMode === "direct" ? "direct" : "overlay",
       resultPlacement: raw.resultPlacement === "above" ? "above" : "below",
+      colorCodeUsage: typeof raw.colorCodeUsage === "boolean" ? raw.colorCodeUsage : true,
+      showUsageCounts: typeof raw.showUsageCounts === "boolean" ? raw.showUsageCounts : false,
+      usagePalette: raw.usagePalette === "theme" ? "theme" : "icon",
       disabledProviders: Array.isArray(raw.disabledProviders)
         ? raw.disabledProviders.filter((value): value is string => typeof value === "string")
         : [],

package/extensions/lib/tui.ts

@@ -28,6 +28,8 @@ export interface TableSelectOptions {
   placement?: Placement;
   initialValue?: string;
   state?: SelectionState;
+  /** Style fitted cells at render time; source values remain plain and searchable. */
+  styleCell?: (row: TableRow, key: string, text: string, theme: any, selected: boolean) => string;
 }
 export interface SelectionState { query?: string; selectedValue?: string }
 
@@ -146,10 +148,16 @@ export class TableSelect implements Component, Focusable {
     if (this.options.search !== false && this.options.placement === "above") indices = indices.reverse();
     return [...header, ...indices.map(index => {
       const row = this.filtered[index]!;
-      const text = fitCell((index === this.selected ? "› " : "  ") + line(columns.map(column => cell(row, column.key))), width);
-      if (index !== this.selected) return text;
-      const selected = color(this.theme, "accent", text);
-      return typeof this.theme?.bg === "function" ? this.theme.bg("selectedBg", selected) : selected;
+      const isSelected = index === this.selected;
+      const prefix = isSelected ? color(this.theme, "accent", "› ") : "  ";
+      const cells = columns.map((column, i) => {
+        const fitted = fitCell(cell(row, column.key), sizes[i]!);
+        return this.options.styleCell
+          ? this.options.styleCell(row, column.key, fitted, this.theme, isSelected)
+          : isSelected ? color(this.theme, "accent", fitted) : fitted;
+      });
+      const text = fitCell(prefix + cells.join("  "), width);
+      return isSelected && typeof this.theme?.bg === "function" ? this.theme.bg("selectedBg", text) : text;
     })];
   }
 

package/extensions/lib/usage-colors.ts

@@ -0,0 +1,31 @@
+import type { BmsSettings } from "./store.ts";
+
+export type UsageTier = "unused" | "low" | "medium" | "high";
+export type UsageDisplay = Pick<BmsSettings, "colorCodeUsage" | "showUsageCounts" | "usagePalette">;
+
+export const DEFAULT_USAGE_DISPLAY: UsageDisplay = {
+  colorCodeUsage: true, showUsageCounts: false, usagePalette: "icon",
+};
+
+/** Relative to the full enabled list, never the current search results. */
+export function usageTier(count: number, maximum: number): UsageTier {
+  if (!Number.isFinite(count) || count <= 0 || !Number.isFinite(maximum) || maximum <= 0) return "unused";
+  const strength = Math.log1p(count) / Math.log1p(maximum);
+  return strength <= 1 / 3 ? "low" : strength <= 2 / 3 ? "medium" : "high";
+}
+
+const ICON_RGB = { low: [91, 167, 255], medium: [255, 177, 61], high: [255, 107, 61] } as const;
+const THEME_ROLES = { low: "thinkingLow", medium: "thinkingMedium", high: "thinkingHigh" } as const;
+
+/** Resolve colors at render time, so theme invalidation cannot retain old ANSI. */
+export function usageColor(theme: any, tier: UsageTier, palette: UsageDisplay["usagePalette"], text: string): string {
+  if (tier === "unused") return typeof theme?.fg === "function" ? theme.fg("text", text) : text;
+  if (palette === "theme") return typeof theme?.fg === "function" ? theme.fg(THEME_ROLES[tier], text) : text;
+  // A missing theme means a plain-text renderer, as in tests and non-terminal hosts.
+  if (typeof theme?.fg !== "function") return text;
+  const rgb = ICON_RGB[tier];
+  const code = theme.getColorMode?.() === "256color"
+    ? `38;5;${16 + 36 * Math.round(rgb[0] / 255 * 5) + 6 * Math.round(rgb[1] / 255 * 5) + Math.round(rgb[2] / 255 * 5)}`
+    : `38;2;${rgb.join(";")}`;
+  return `\x1b[${code}m${text}\x1b[39m`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-better-model-select",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "type": "module",
   "description": "Searchable, usage-ranked model picker for Pi with model management, default model and thinking effort selection, and per-role subagent defaults.",
   "keywords": [
@@ -20,6 +20,10 @@
     "litellm",
     "openai-compatible"
   ],
+  "author": {
+    "name": "Martin Senebald",
+    "url": "https://chaos.social/@msenebald"
+  },
   "license": "MIT",
   "files": [
     "extensions/",
@@ -29,10 +33,11 @@
     "CHANGELOG.md",
     "docs/public/configuration.md",
     "docs/demo/showcase.gif",
+    "docs/demo/gallery.png",
     "LICENSE"
   ],
   "pi": {
-    "image": "https://cdn.jsdelivr.net/npm/pi-better-model-select@latest/icon.svg",
+    "image": "https://cdn.jsdelivr.net/npm/pi-better-model-select@latest/docs/demo/gallery.png",
     "extensions": [
       "./extensions/bms.ts"
     ]