add provider sorting

static/css/chat.css

@@ -518,8 +518,8 @@ body:not(.loading) #loading {
 
 .message .time {
 	font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
-	font-size: 11px;
-	line-height: 12px;
+	font-size: 10px;
+	line-height: 10px;
 	position: absolute;
 	top: 3px;
 	right: 3px;
@@ -1199,6 +1199,10 @@ label[for="iterations"] {
 	background-image: url(icons/iterations.svg);
 }
 
+label[for="provider-sorting"] {
+	background-image: url(icons/provider.svg);
+}
+
 label[for="reasoning-effort"] {
 	background-image: url(icons/reasoning.svg);
 }

static/css/dropdown.css

@@ -6,6 +6,7 @@
 	font-size: 14px;
 	white-space: nowrap;
 	max-width: 160px;
+	min-width: 60px;
 }
 
 .dropdown .selected {

static/index.html

@@ -47,7 +47,7 @@
 
 				<div id="header">
 					<div id="role">
-						<select title="Message role">
+						<select title="Message Role">
 							<option value="user" selected>User</option>
 							<option value="assistant">Assistant</option>
 							<option value="system">System</option>
@@ -73,6 +73,15 @@
 						<label for="model" title="Model"></label>
 						<select id="model" data-searchable></select>
 					</div>
+					<div class="option">
+						<label for="provider-sorting" title="Provider Sorting"></label>
+						<select id="provider-sorting">
+							<option value="" selected title="Default sorting">-</option>
+							<option value="throughput" title="Sort by throughput">:turbo</option>
+							<option value="latency" title="Sort by latency">:quick</option>
+							<option value="price" title="Sort by price">:cheap</option>
+						</select>
+					</div>
 					<div class="option none">
 						<label for="reasoning-effort" title="Reasoning Effort"></label>
 						<select id="reasoning-effort">

static/js/chat.js

@@ -25,11 +25,12 @@
 		$attachments = document.getElementById("attachments"),
 		$role = document.getElementById("role").querySelector("select"),
 		$model = document.getElementById("model"),
+		$providerSorting = document.getElementById("provider-sorting"),
+		$reasoningEffort = document.getElementById("reasoning-effort"),
+		$reasoningTokens = document.getElementById("reasoning-tokens"),
 		$prompt = document.getElementById("prompt"),
 		$temperature = document.getElementById("temperature"),
 		$iterations = document.getElementById("iterations"),
-		$reasoningEffort = document.getElementById("reasoning-effort"),
-		$reasoningTokens = document.getElementById("reasoning-tokens"),
 		$json = document.getElementById("json"),
 		$search = document.getElementById("search"),
 		$upload = document.getElementById("upload"),
@@ -1246,6 +1247,7 @@
 		return {
 			prompt: $prompt.value,
 			model: $model.value,
+			provider: $providerSorting.value,
 			temperature: temperature,
 			iterations: iterations,
 			tools: {
@@ -1641,7 +1643,7 @@
 				separator,
 				`Created:\t\t${formatTimestamp(model.created)}`,
 				`Pricing/1M:\t${formatMoney(model.pricing.input)} In | ${formatMoney(model.pricing.output)} Out`,
-				model.pricing.image ? `Images:\t\t${formatMoney(model.pricing.image)} each` : null,
+				model.pricing.image ? `Images/1K:\t${formatMoney(model.pricing.image * 1000)} Out` : null,
 				separator,
 				stripMarkdown(model.description),
 			]
@@ -1696,6 +1698,7 @@
 		$prompt.value = loadValue("prompt", promptList.length ? promptList[0].key : "");
 		$temperature.value = loadValue("temperature", 0.85);
 		$iterations.value = loadValue("iterations", 3);
+		$providerSorting.value = loadValue("provider", "");
 		$reasoningEffort.value = loadValue("reasoning-effort", "medium");
 		$reasoningTokens.value = loadValue("reasoning-tokens", 1024);
 
@@ -2060,6 +2063,12 @@
 		$iterations.classList.toggle("invalid", Number.isNaN(iterations) || iterations < 1 || iterations > 50);
 	});
 
+	$providerSorting.addEventListener("change", () => {
+		const provider = $providerSorting.value;
+
+		storeValue("provider", provider);
+	});
+
 	$reasoningEffort.addEventListener("change", () => {
 		const effort = $reasoningEffort.value;
 
@@ -2124,6 +2133,7 @@
 			attachments: attachments,
 			role: $role.value,
 			model: $model.value,
+			provider: $providerSorting.value,
 			prompt: $prompt.value,
 			temperature: $temperature.value,
 			iterations: $iterations.value,
@@ -2343,6 +2353,7 @@
 	});
 
 	dropdown($role);
+	dropdown($providerSorting);
 	dropdown($reasoningEffort);
 
 	loadData().then(() => {

static/js/lib.js

@@ -117,7 +117,9 @@ function formatMoney(num) {
 	if (num < 1) {
 		let decimals = 1;
 
-		if (num < 0.0001) {
+		if (num < 0.00001) {
+			decimals = 4;
+		} else if (num < 0.0001) {
 			decimals = 3;
 		} else if (num < 0.001) {
 			decimals = 2;