feat(vscode): move compaction model setting to Models tab

.changeset/compaction-model-models-tab.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Move the compaction model setting to the Models settings tab and link to it from the Compaction section.

packages/kilo-vscode/webview-ui/src/components/settings/ContextTab.tsx

@@ -8,11 +8,9 @@ import { IconButton } from "@kilocode/kilo-ui/icon-button"
 import { useConfig } from "../../context/config"
 import { useLanguage } from "../../context/language"
 import { useMemory } from "../../context/memory"
-import { parseModelString } from "../../../../src/shared/provider-model"
-import { ModelSelectorBase } from "../shared/ModelSelector"
 import SettingsRow from "./SettingsRow"
 
-const ContextTab: Component = () => {
+const ContextTab: Component<{ onNavigateToModels?: () => void }> = (props) => {
   const { config, updateConfig } = useConfig()
   const memory = useMemory()
   const language = useLanguage()
@@ -141,24 +139,6 @@ const ContextTab: Component = () => {
             {language.t("settings.context.autoCompaction.title")}
           </Switch>
         </SettingsRow>
-        <SettingsRow
-          title={language.t("settings.context.compactionModel.title")}
-          description={language.t("settings.context.compactionModel.description")}
-        >
-          <ModelSelectorBase
-            value={parseModelString(config().agent?.compaction?.model ?? undefined)}
-            onSelect={(providerID, modelID) =>
-              updateConfig({
-                agent: { compaction: { model: providerID && modelID ? `${providerID}/${modelID}` : null } },
-              })
-            }
-            placement="bottom-start"
-            allowClear
-            clearLabel={language.t("settings.context.compactionModel.useChatModel")}
-            label={language.t("settings.context.compactionModel.title")}
-            description={language.t("settings.context.compactionModel.description")}
-          />
-        </SettingsRow>
         <SettingsRow
           title={language.t("settings.context.compactionLimit.title")}
           description={language.t("settings.context.compactionLimit.description")}
@@ -192,6 +172,30 @@ const ContextTab: Component = () => {
           </Switch>
         </SettingsRow>
       </Card>
+      <p
+        data-slot="context-models-hint"
+        style={{
+          "margin-top": "8px",
+          "font-size": "var(--kilo-font-size-12)",
+          "text-align": "right",
+          color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
+        }}
+      >
+        <a
+          href="#"
+          style={{
+            color: "var(--vscode-textLink-foreground)",
+            "text-decoration": "none",
+            cursor: "pointer",
+          }}
+          onClick={(e) => {
+            e.preventDefault()
+            props.onNavigateToModels?.()
+          }}
+        >
+          {language.t("settings.context.compactionModel.hint")}
+        </a>
+      </p>
 
       <h4 style={{ "margin-top": "16px", "margin-bottom": "8px" }}>{language.t("settings.context.watcherPatterns")}</h4>
 

packages/kilo-vscode/webview-ui/src/components/settings/ModelsTab.tsx

@@ -177,6 +177,24 @@ const ModelsTab: Component = () => {
             </Show>
           </div>
         </SettingsRow>
+        <SettingsRow
+          title={language.t("settings.context.compactionModel.title")}
+          description={language.t("settings.context.compactionModel.description")}
+        >
+          <ModelSelectorBase
+            value={parseModelString(config().agent?.compaction?.model ?? undefined)}
+            onSelect={(providerID, modelID) =>
+              updateConfig({
+                agent: { compaction: { model: providerID && modelID ? `${providerID}/${modelID}` : null } },
+              })
+            }
+            placement="bottom-start"
+            allowClear
+            clearLabel={language.t("settings.context.compactionModel.useChatModel")}
+            label={language.t("settings.context.compactionModel.title")}
+            description={language.t("settings.context.compactionModel.description")}
+          />
+        </SettingsRow>
         <SettingsRow
           title={language.t("settings.autocomplete.model.title")}
           description={language.t("settings.autocomplete.model.description")}

packages/kilo-vscode/webview-ui/src/components/settings/Settings.tsx

@@ -463,7 +463,7 @@ const Settings: Component<SettingsProps> = (props) => {
         </Tabs.Content>
         <Tabs.Content value="context">
           <h3>{language.t("settings.context.title")}</h3>
-          <ContextTab />
+          <ContextTab onNavigateToModels={() => onTabChange("models")} />
         </Tabs.Content>
 
         <Tabs.Content value="commitMessage">

packages/kilo-vscode/webview-ui/src/i18n/de.ts

@@ -1139,6 +1139,8 @@ export const dict = {
   "settings.context.compactionModel.description":
     "Modell für die automatische und manuelle Komprimierung. Leer lassen, um das Chatmodell zu verwenden. Kosten, Geschwindigkeit und Zusammenfassungsqualität hängen vom Modell ab.",
   "settings.context.compactionModel.useChatModel": "Chatmodell verwenden",
+  "settings.context.compactionModel.hint":
+    "Um zu wählen, welches Modell für die Komprimierung verwendet wird, siehe Modelleinstellungen.",
   "settings.context.compactionLimit.title": "Limit für automatische Komprimierung",
   "settings.context.compactionLimit.description":
     "Komprimieren, wenn der Kontext diesen Prozentsatz des Modellfensters erreicht. Leer lassen, um nur den Sicherheitspuffer zu verwenden.",

packages/kilo-vscode/webview-ui/src/i18n/en.ts

@@ -1092,6 +1092,7 @@ export const dict = {
   "settings.context.compactionModel.description":
     "Model used for automatic and manual compaction. Leave unset to use the chat model. Cost, speed, and summary quality depend on the model.",
   "settings.context.compactionModel.useChatModel": "Use chat model",
+  "settings.context.compactionModel.hint": "To choose which model is used for compaction, see the Models settings.",
   "settings.context.compactionLimit.title": "Auto Compaction Limit",
   "settings.context.compactionLimit.description":
     "Compact when context reaches this percentage of the model window. Leave blank to use the safety buffer only.",