show pricing and better title format

models.go

@@ -3,6 +3,7 @@ package main
 import (
 	"context"
 	"sort"
+	"strconv"
 	"strings"
 	"sync"
 	"time"
@@ -10,12 +11,18 @@ import (
 	"github.com/revrost/go-openrouter"
 )
 
+type ModelPricing struct {
+	Input  float64 `json:"input"`
+	Output float64 `json:"output"`
+}
+
 type Model struct {
-	ID          string   `json:"id"`
+	ID          string       `json:"id"`
-	Created     int64    `json:"created"`
+	Created     int64        `json:"created"`
-	Name        string   `json:"name"`
+	Name        string       `json:"name"`
-	Description string   `json:"description"`
+	Description string       `json:"description"`
-	Tags        []string `json:"tags,omitempty"`
+	Pricing     ModelPricing `json:"pricing"`
+	Tags        []string     `json:"tags,omitempty"`
 
 	Reasoning bool `json:"-"`
 	Vision    bool `json:"-"`
@@ -90,11 +97,19 @@ func LoadModels(initial bool) error {
 			name = name[index+2:]
 		}
 
+		input, _ := strconv.ParseFloat(model.Pricing.Prompt, 64)
+		output, _ := strconv.ParseFloat(model.Pricing.Completion, 64)
+
 		m := &Model{
 			ID:          model.ID,
 			Created:     model.Created,
 			Name:        name,
 			Description: model.Description,
+
+			Pricing: ModelPricing{
+				Input:  input * 1000000,
+				Output: output * 1000000,
+			},
 		}
 
 		GetModelTags(model, m)

static/js/chat.js

@@ -1450,8 +1450,18 @@
 
 		// render models
 		fillSelect($model, data.models, (el, model) => {
+			const separator = "─".repeat(24);
+
+			el.title = [
+				model.name,
+				separator,
+				`Created:\t\t${formatTimestamp(model.created)}`,
+				`Pricing/1M:\t$${fixed(model.pricing.input, 2)} In | $${fixed(model.pricing.output, 2)} Out`,
+				separator,
+				stripMarkdown(model.description),
+			].join("\n");
+
 			el.value = model.id;
-			el.title = `${model.name} (${formatTimestamp(model.created)})\n---\n${model.description}`;
 			el.textContent = model.name;
 
 			el.dataset.tags = (model.tags || []).join(",");

static/js/dropdown.js

@@ -168,6 +168,7 @@
 
 		#render() {
 			if (this.#selected === false) {
+				this.#_selected.title = "";
 				this.#_selected.innerHTML = "";
 
 				return;
@@ -175,6 +176,7 @@
 
 			const selection = this.#options[this.#selected];
 
+			this.#_selected.title = selection.title;
 			this.#_selected.innerHTML = selection.el.innerHTML;
 		}
 

static/js/markdown.js

@@ -162,4 +162,25 @@
 	window.renderInline = markdown => {
 		return marked.parseInline(markdown.trim());
 	};
+
+	window.stripMarkdown = markdown => {
+		return (
+			markdown
+				// Remove headings
+				.replace(/^#+\s*/gm, "")
+				// Remove links, keeping the link text
+				.replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1")
+				// Remove bold/italics, keeping the text
+				.replace(/(\*\*|__|\*|_|~~|`)(.*?)\1/g, "$2")
+				// Remove images
+				.replace(/!\[[^\]]*\]\([^)]*\)/g, "")
+				// Remove horizontal rules
+				.replace(/^-{3,}\s*$/gm, "")
+				// Remove list markers
+				.replace(/^\s*([*-]|\d+\.)\s+/gm, "")
+				// Collapse multiple newlines into one
+				.replace(/\n{2,}/g, "\n")
+				.trim()
+		);
+	};
 })();