From f9641ec76e61a5e4585caaed197f1f5b4be8a737 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Fri, 10 Jul 2026 07:43:08 -0700
Subject: [PATCH] FN-7774: style the Thinking Level select to match the dark
 model dropdown

Adds dark-theme CSS styling for the inline Thinking Level <select> so it no longer renders as an OS-default white control across model-picker surfaces, including the quick-add QuickEntryBox and InlineCreateCard popups.

- Add .thinking-level-select rule set in CustomModelDropdown.css mirroring the canonical dark select tokens (background, border, color, focus ring, disabled state, option/optgroup styling)
- Add a custom dropdown chevron indicator via .model-combobox-thinking::after and make the container position: relative
- Add a regression test asserting the select and option rules use the dark theme CSS tokens
- Add a patch changeset for @runfusion/fusion documenting the fix

Files changed:
 .changeset/fn-7774-thinking-level-select-styling.md           |  7 +++
 packages/dashboard/app/components/CustomModelDropdown.css     | 59 ++++++++++++++++++++++
 packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx | 16 ++++++
 3 files changed, 82 insertions(+)

Fusion-Task-Id: FN-7774

Fusion-Task-Lineage: 9ef9bf07-dd18-499c-b04d-1b137d200689

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
---
 .../fn-7774-thinking-level-select-styling.md  |  7 +++
 .../app/components/CustomModelDropdown.css    | 59 +++++++++++++++++++
 .../__tests__/CustomModelDropdown.test.tsx    | 16 +++++
 3 files changed, 82 insertions(+)
 create mode 100644 .changeset/fn-7774-thinking-level-select-styling.md

diff --git a/.changeset/fn-7774-thinking-level-select-styling.md b/.changeset/fn-7774-thinking-level-select-styling.md
new file mode 100644
index 0000000000..b5eadd2ecd
--- /dev/null
+++ b/.changeset/fn-7774-thinking-level-select-styling.md
@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Style the Thinking Level dropdown to match the dark model picker across all surfaces.
+category: fix
+dev: Adds a `.thinking-level-select` rule in CustomModelDropdown.css mirroring the canonical dark `select` tokens; fixes the OS-default white control shown in model pickers incl. the quick-add QuickEntryBox/InlineCreateCard popups. No logic/prop changes.
diff --git a/packages/dashboard/app/components/CustomModelDropdown.css b/packages/dashboard/app/components/CustomModelDropdown.css
index 1c5c1cc11f..b279bc5baa 100644
--- a/packages/dashboard/app/components/CustomModelDropdown.css
+++ b/packages/dashboard/app/components/CustomModelDropdown.css
@@ -132,6 +132,7 @@
 }
 
 .model-combobox-thinking {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--space-sm);
@@ -154,6 +155,64 @@
   min-width: 0;
 }
 
+/*
+FNXC:Settings-ThinkingLevel 2026-07-10-00:00:
+The inline Thinking Level <select> had no CSS and rendered as the OS-default white control on the dark model dropdown across all model-picker surfaces, including the quick-add QuickEntryBox executor submenu and InlineCreateCard ModelSelectionModal. Mirror the canonical dark select tokens so reasoning-effort selection matches the surrounding combobox everywhere.
+*/
+.model-combobox .thinking-level-select {
+  width: 100%;
+  padding: var(--space-xs) calc(var(--space-lg) + var(--space-md)) var(--space-xs) var(--space-sm);
+  background: var(--surface);
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-primary);
+  line-height: 1.4;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.model-combobox .thinking-level-select:hover:not(:focus):not(:disabled) {
+  border-color: var(--text-dim);
+}
+
+.model-combobox .thinking-level-select:focus {
+  border-color: var(--todo);
+  box-shadow: var(--focus-ring);
+}
+
+.model-combobox .thinking-level-select:disabled {
+  opacity: var(--opacity-disabled, 0.6);
+  cursor: not-allowed;
+}
+
+.model-combobox .thinking-level-select option {
+  background: var(--surface);
+  color: var(--text);
+  padding: var(--space-xs) var(--space-sm);
+}
+
+.model-combobox .thinking-level-select optgroup {
+  background: var(--surface);
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.model-combobox-thinking::after {
+  content: "";
+  position: absolute;
+  right: calc(var(--space-md) + var(--space-sm));
+  width: var(--space-xs);
+  height: var(--space-xs);
+  border: solid var(--text-muted);
+  border-width: 0 var(--btn-border-width) var(--btn-border-width) 0;
+  pointer-events: none;
+  transform: rotate(45deg) translateY(calc(var(--space-xs) * -1));
+}
+
 .model-combobox-thinking-badge {
   flex-shrink: 0;
   margin-left: var(--space-sm);
diff --git a/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx b/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
index 5d705ce2b5..16bcaa2933 100644
--- a/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
+++ b/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
@@ -50,6 +50,22 @@ describe("CustomModelDropdown", () => {
     expect(css).not.toMatch(/(^|\n)\s*html\s*\*/);
   });
 
+  it("keeps the Thinking Level select styled with dark theme tokens", () => {
+    const css = readFileSync(
+      resolve(__dirname, "../CustomModelDropdown.css"),
+      "utf-8",
+    );
+    const rule = css.match(/\.model-combobox\s+\.thinking-level-select\s*\{[^}]*\}/)?.[0] ?? "";
+    const optionRule = css.match(/\.model-combobox\s+\.thinking-level-select\s+option\s*\{[^}]*\}/)?.[0] ?? "";
+
+    expect(rule).toContain("background: var(--surface);");
+    expect(rule).toContain("border: var(--btn-border-width) solid var(--border);");
+    expect(rule).toContain("color: var(--text);");
+    expect(rule).toContain("appearance: none;");
+    expect(optionRule).toContain("background: var(--surface);");
+    expect(optionRule).toContain("color: var(--text);");
+  });
+
   it("renders opt-in thinking control with default option and calls back for concrete and inherited values", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();