fix(vscode): show training badge for paid models

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>

packages/kilo-vscode/tests/unit/model-preview-data-line.test.ts

@@ -22,6 +22,15 @@ describe("model preview data collection line", () => {
     expect(styles).toContain(".model-preview-data-line")
   })
 
+  it("renders prompt training independently from the free badge", () => {
+    expect(selector).toMatch(
+      /<Show when=\{isFree\(model\)\}>[\s\S]*?<\/Show>\s*<Show when=\{isDataCollectedModel\(model\)\}>/,
+    )
+    expect(preview).toMatch(
+      /<Show when=\{model\(\)\.isFree\}>[\s\S]*?<\/Show>\s*<Show when=\{isDataCollectedModel\(model\(\)\)\}>/,
+    )
+  })
+
   it("uses the book open check icon for all webview model data disclosures", () => {
     expect(selector).toContain('Icon name="book-open-check"')
     expect(selector).not.toContain('Icon name="warning"')

packages/kilo-vscode/webview-ui/src/components/shared/ModelPreview.tsx

@@ -91,9 +91,11 @@ export const ModelPreview: Component<Props> = (props) => {
                       })()}
                     </Show>
                   </div>
-                  <Show when={model().isFree}>
+                  <Show when={model().isFree || isDataCollectedModel(model())}>
                     <span class="model-preview-free-data">
-                      <span class="model-preview-badge model-preview-badge--free">{freeLabel()}</span>
+                      <Show when={model().isFree}>
+                        <span class="model-preview-badge model-preview-badge--free">{freeLabel()}</span>
+                      </Show>
                       <Show when={isDataCollectedModel(model())}>
                         <Tooltip value={dataLabel()} placement="top">
                           <span class="model-preview-free-data-icon" aria-label={dataLabel()}>

packages/kilo-vscode/webview-ui/src/components/shared/ModelSelector.tsx

@@ -828,11 +828,13 @@ export const ModelSelectorBase: Component<ModelSelectorBaseProps> = (props) => {
                                           )
                                         })()}
                                       </span>
-                                      <Show when={isFree(model)}>
+                                      <Show when={isFree(model) || isDataCollectedModel(model)}>
                                         <span class="model-selector-free-data">
-                                          <span class="model-selector-data-badge">
-                                            <Tag data-variant="member">{freeLabel()}</Tag>
-                                          </span>
+                                          <Show when={isFree(model)}>
+                                            <span class="model-selector-data-badge">
+                                              <Tag data-variant="member">{freeLabel()}</Tag>
+                                            </span>
+                                          </Show>
                                           <Show when={isDataCollectedModel(model)}>
                                             <Tooltip value={dataLabel()} placement="top">
                                               <span class="model-selector-free-data-icon" aria-label={dataLabel()}>