From 97f3b5d2c451a8e328eaecbc91165c73690d2cb4 Mon Sep 17 00:00:00 2001
From: Logan Yang <logancyang@gmail.com>
Date: Mon, 22 Sep 2025 20:13:03 -0700
Subject: [PATCH] Update model setting buttons (#1843)

* Add grok 4 fast openrouter

* Update model setting buttons
---
 src/constants.ts                             |  9 ++++
 src/settings/v2/components/ModelSettings.tsx |  6 +--
 src/settings/v2/components/ModelTable.tsx    | 48 +++++++++++++-------
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index c56f8ae0..e2ed4bce 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -154,6 +154,7 @@ export enum ChatModels {
   OPENROUTER_GEMINI_2_5_FLASH_LITE = "google/gemini-2.5-flash-lite",
   OPENROUTER_GPT_41 = "openai/gpt-4.1",
   OPENROUTER_GPT_41_MINI = "openai/gpt-4.1-mini",
+  OPENROUTER_GROK_4_FAST_FREE = "x-ai/grok-4-fast:free",
 }
 
 // Model Providers
@@ -242,6 +243,14 @@ export const BUILTIN_CHAT_MODELS: CustomModel[] = [
     projectEnabled: true,
     capabilities: [ModelCapability.VISION],
   },
+  {
+    name: ChatModels.OPENROUTER_GROK_4_FAST_FREE,
+    provider: ChatModelProviders.OPENROUTERAI,
+    enabled: true,
+    isBuiltIn: true,
+    core: false,
+    projectEnabled: true,
+  },
   {
     name: ChatModels.GPT_5,
     provider: ChatModelProviders.OPENAI,
diff --git a/src/settings/v2/components/ModelSettings.tsx b/src/settings/v2/components/ModelSettings.tsx
index 29be2e46..eeba816d 100644
--- a/src/settings/v2/components/ModelSettings.tsx
+++ b/src/settings/v2/components/ModelSettings.tsx
@@ -143,7 +143,6 @@ export const ModelSettings: React.FC = () => {
   return (
     <div className="tw-space-y-4">
       <section>
-        <div className="tw-mb-3 tw-text-xl tw-font-bold">Chat Models</div>
         <ModelTable
           models={settings.activeModels}
           onEdit={(model) => handleEditModel(model)}
@@ -153,7 +152,7 @@ export const ModelSettings: React.FC = () => {
           onUpdateModel={handleTableUpdate}
           onReorderModels={(newModels) => handleModelReorder(newModels)}
           onRefresh={handleRefreshChatModels}
-          title="Chat Model"
+          title="Chat Models"
         />
 
         {/* model add dialog */}
@@ -184,7 +183,6 @@ export const ModelSettings: React.FC = () => {
       </section>
 
       <section>
-        <div className="tw-mb-3 tw-text-xl tw-font-bold">Embedding Models</div>
         <ModelTable
           models={settings.activeEmbeddingModels}
           onEdit={(model) => handleEditModel(model, true)}
@@ -194,7 +192,7 @@ export const ModelSettings: React.FC = () => {
           onUpdateModel={handleEmbeddingModelUpdate}
           onReorderModels={(newModels) => handleModelReorder(newModels, true)}
           onRefresh={handleRefreshEmbeddingModels}
-          title="Embedding Model"
+          title="Embedding Models"
         />
 
         {/* Embedding model add dialog */}
diff --git a/src/settings/v2/components/ModelTable.tsx b/src/settings/v2/components/ModelTable.tsx
index 852bc829..2d639778 100644
--- a/src/settings/v2/components/ModelTable.tsx
+++ b/src/settings/v2/components/ModelTable.tsx
@@ -86,6 +86,37 @@ const CAPABILITY_ORDER = [
   ModelCapability.WEB_SEARCH,
 ] as const;
 
+interface ModelTableHeaderProps {
+  title: string;
+  onRefresh?: () => void;
+  onAdd: () => void;
+}
+
+/**
+ * Renders the model table header with a title and aligned action buttons.
+ */
+const ModelTableHeader: React.FC<ModelTableHeaderProps> = ({ title, onRefresh, onAdd }) => (
+  <div className="tw-mb-3 tw-flex tw-flex-col tw-gap-2 md:tw-flex-row md:tw-items-center md:tw-justify-between">
+    <h3 className="tw-text-xl tw-font-bold">{title}</h3>
+    <div className="tw-flex tw-flex-col tw-gap-2 sm:tw-flex-row sm:tw-items-center sm:tw-justify-end">
+      {onRefresh && (
+        <Button
+          onClick={onRefresh}
+          variant="secondary"
+          className="tw-flex tw-items-center tw-gap-2"
+        >
+          <RefreshCw className="tw-size-2 md:tw-size-4" />
+          Refresh Built-ins
+        </Button>
+      )}
+      <Button onClick={onAdd} variant="default" className="tw-flex tw-items-center tw-gap-2">
+        <Plus className="tw-size-2 md:tw-size-4" />
+        Add Model
+      </Button>
+    </div>
+  </div>
+);
+
 const renderCapabilities = (model: CustomModel) => {
   return (
     <div className="tw-mx-auto tw-grid tw-w-16 tw-grid-cols-3 tw-gap-1">
@@ -471,22 +502,7 @@ export const ModelTable: React.FC<ModelTableProps> = ({
 
   return (
     <div ref={containerRef} className="tw-mb-4">
-      <div className="tw-mt-4 tw-flex tw-justify-between tw-gap-2 md:tw-justify-end">
-        {onRefresh && (
-          <Button
-            onClick={onRefresh}
-            variant="secondary"
-            className="tw-flex tw-items-center tw-gap-2"
-          >
-            <RefreshCw className="tw-size-2 md:tw-size-4" />
-            Refresh Built-ins
-          </Button>
-        )}
-        <Button onClick={onAdd} variant="default" className="tw-flex tw-items-center tw-gap-2">
-          <Plus className="tw-size-2 md:tw-size-4" />
-          Add Model
-        </Button>
-      </div>
+      <ModelTableHeader title={title} onRefresh={onRefresh} onAdd={onAdd} />
       {/* Desktop view */}
       <div className="tw-hidden md:tw-block">
         <DndContext