From 293da1d4efa6fc8bbcdd3618c7a13bd4d6d3e3f1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 29 Mar 2026 21:29:27 +0300
Subject: [PATCH] feat(llm): display cost next to the title

---
 .../src/widgets/react/FormDropdownList.tsx    | 19 ++++++++++---
 .../type_widgets/llm_chat/ChatInputBar.tsx    | 27 ++++++++++++-------
 .../widgets/type_widgets/llm_chat/LlmChat.css |  5 ++++
 .../type_widgets/llm_chat/useLlmChat.ts       |  2 +-
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/react/FormDropdownList.tsx b/apps/client/src/widgets/react/FormDropdownList.tsx
index 08d607a8c2..150fc4a724 100644
--- a/apps/client/src/widgets/react/FormDropdownList.tsx
+++ b/apps/client/src/widgets/react/FormDropdownList.tsx
@@ -5,16 +5,27 @@ interface FormDropdownList<T> extends Omit<DropdownProps, "children"> {
     values: T[];
     keyProperty: keyof T;
     titleProperty: keyof T;
+    /** Property to show as a small suffix next to the title */
+    titleSuffixProperty?: keyof T;
     descriptionProperty?: keyof T;
     currentValue: string;
     onChange(newValue: string): void;
 }
 
-export default function FormDropdownList<T>({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange, ...restProps }: FormDropdownList<T>) {
+export default function FormDropdownList<T>({ values, keyProperty, titleProperty, titleSuffixProperty, descriptionProperty, currentValue, onChange, ...restProps }: FormDropdownList<T>) {
     const currentValueData = values.find(value => value[keyProperty] === currentValue);
 
+    const renderTitle = (item: T) => {
+        const title = item[titleProperty] as string;
+        const suffix = titleSuffixProperty ? item[titleSuffixProperty] as string : null;
+        if (suffix) {
+            return <>{title} <small>{suffix}</small></>;
+        }
+        return title;
+    };
+
     return (
-        <Dropdown text={currentValueData?.[titleProperty] ?? ""} {...restProps}>
+        <Dropdown text={currentValueData ? renderTitle(currentValueData) : ""} {...restProps}>
             {values.map(item => (
                 <FormListItem
                     onClick={() => onChange(item[keyProperty] as string)}
@@ -22,9 +33,9 @@ export default function FormDropdownList<T>({ values, keyProperty, titleProperty
                     description={descriptionProperty && item[descriptionProperty] as string}
                     selected={currentValue === item[keyProperty]}
                 >
-                    {item[titleProperty] as string}
+                    {renderTitle(item)}
                 </FormListItem>
             ))}
         </Dropdown>
     )
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/llm_chat/ChatInputBar.tsx b/apps/client/src/widgets/type_widgets/llm_chat/ChatInputBar.tsx
index 3bb9a6d405..54a15105f1 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/ChatInputBar.tsx
+++ b/apps/client/src/widgets/type_widgets/llm_chat/ChatInputBar.tsx
@@ -1,7 +1,9 @@
 import type { RefObject } from "preact";
-import type { UseLlmChatReturn } from "./useLlmChat.js";
+
 import { t } from "../../../services/i18n.js";
-import FormDropdownList from "../../react/FormDropdownList.js";
+import Dropdown from "../../react/Dropdown.js";
+import { FormListItem } from "../../react/FormList.js";
+import type { UseLlmChatReturn } from "./useLlmChat.js";
 
 /** Format token count with thousands separators */
 function formatTokenCount(tokens: number): string {
@@ -88,16 +90,21 @@ export default function ChatInputBar({
             <div className="llm-chat-options">
                 <div className="llm-chat-model-selector">
                     <span className="bx bx-chip" />
-                    <FormDropdownList
-                        values={chat.availableModels}
-                        keyProperty="id"
-                        titleProperty="name"
-                        descriptionProperty="costDescription"
-                        currentValue={chat.selectedModel}
-                        onChange={handleModelSelect}
+                    <Dropdown
+                        text={<>{currentModel?.name}</>}
                         disabled={chat.isStreaming}
                         buttonClassName="llm-chat-model-select"
-                    />
+                    >
+                        {chat.availableModels.map(model => (
+                            <FormListItem
+                                key={model.id}
+                                onClick={() => handleModelSelect(model.id)}
+                                checked={chat.selectedModel === model.id}
+                            >
+                                {model.name}<small>({model.costDescription})</small>
+                            </FormListItem>
+                        ))}
+                    </Dropdown>
                 </div>
                 <label className="llm-chat-toggle">
                     <input
diff --git a/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css b/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
index fb8ade6518..1cf23f104c 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
+++ b/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
@@ -320,6 +320,11 @@
 
 .llm-chat-model-selector .dropdown {
     display: flex;
+
+    small {
+        margin-left: 0.5em;
+        color: var(--muted-text-color);
+    }
 }
 
 .llm-chat-model-select.select-button {
diff --git a/apps/client/src/widgets/type_widgets/llm_chat/useLlmChat.ts b/apps/client/src/widgets/type_widgets/llm_chat/useLlmChat.ts
index 348ff8c3e7..ed12dd81ab 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/useLlmChat.ts
+++ b/apps/client/src/widgets/type_widgets/llm_chat/useLlmChat.ts
@@ -96,7 +96,7 @@ export function useLlmChat(
         getAvailableModels().then(models => {
             const modelsWithDescription = models.map(m => ({
                 ...m,
-                costDescription: m.costMultiplier ? `${m.costMultiplier}x cost` : undefined
+                costDescription: m.costMultiplier ? `${m.costMultiplier}x` : undefined
             }));
             setAvailableModels(modelsWithDescription);
             if (!selectedModel) {