Add a thinking-level (reasoning effort) picker to the chat composer (#45)

DragonnZhang · claude · web-flow · commit 26f609c5c039 · 2026-07-02T14:16:51.000+08:00
* Add a thinking-level (reasoning effort) picker to the chat composer Adds a composer toolbar dropdown to change the per-session thinking level (off / low / medium / high / xhigh / max), mirroring the existing model picker. The thinkingLevel / onThinkingLevelChange props were already plumbed to FreeFormInput and persisted by both the draft and active chat pages; only the UI trigger was missing. Frontend-only: renders a Radix dropdown and calls the existing onThinkingLevelChange prop. No new i18n keys — level names/descriptions reuse the existing thinking.* keys and the trigger tooltip reuses settings.ai.thinking. Includes a CDP e2e assertion (e2e/assertions/thinking-level-picker.assert.ts) that opens the picker, asserts all six levels are listed with the active one marked, selects a different level, and asserts the trigger label updates. Closes #44 * docs(loop): record thinking-level-picker as pr-open (#45) --------- Co-authored-by: Claude <noreply@anthropic.com>
diff --git a/apps/electron/src/renderer/components/app-shell/input/FreeFormInput.tsx b/apps/electron/src/renderer/components/app-shell/input/FreeFormInput.tsx
@@ -12,6 +12,7 @@ import {
   AlertCircle,
   CornerDownRight,
   GitBranch,
+  Brain,
   X,
 } from 'lucide-react';
 import { Icon_Home, Icon_Folder } from '@craft-agent/ui';
@@ -81,7 +82,11 @@ import {
   PERMISSION_MODE_ORDER,
   type PermissionMode,
 } from '@craft-agent/shared/agent/modes';
-import { type ThinkingLevel } from '@craft-agent/shared/agent/thinking-levels';
+import {
+  type ThinkingLevel,
+  THINKING_LEVELS,
+  getThinkingLevelNameKey,
+} from '@craft-agent/shared/agent/thinking-levels';
 import { useEscapeInterrupt } from '@/context/EscapeInterruptContext';
 import { hasOpenOverlay } from '@/lib/overlay-detection';
 import { ToolbarStatusSlot } from './ToolbarStatusSlot';
@@ -443,6 +448,7 @@ export function FreeFormInput({
   currentModel,
   onModelChange,
   thinkingLevel = 'medium',
+  onThinkingLevelChange,
   permissionMode = 'ask',
   onPermissionModeChange,
   enabledModes = [...PERMISSION_MODE_ORDER],
@@ -842,6 +848,7 @@ export function FreeFormInput({
   const [loadingCount, setLoadingCount] = React.useState(0);
   const [inputMaxHeight, setInputMaxHeight] = React.useState(540);
   const [modelDropdownOpen, setModelDropdownOpen] = React.useState(false);
+  const [thinkingDropdownOpen, setThinkingDropdownOpen] = React.useState(false);
 
   // Input settings (loaded from config)
   const [autoCapitalisation, setAutoCapitalisation] = React.useState(true);
@@ -2559,6 +2566,66 @@ export function FreeFormInput({
                 />
               )}
 
+              {/* 4.5 Thinking Level Selector - Hidden in compact mode (mirrors model picker) */}
+              {!compactMode && onThinkingLevelChange && (
+                <DropdownMenu
+                  open={thinkingDropdownOpen}
+                  onOpenChange={setThinkingDropdownOpen}
+                >
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          type="button"
+                          data-testid="thinking-level-trigger"
+                          className={cn(
+                            'input-toolbar-btn inline-flex items-center h-7 px-1.5 gap-1 text-[13px] shrink-0 rounded-[6px] hover:bg-foreground/5 transition-colors select-none',
+                            thinkingDropdownOpen && 'bg-foreground/5',
+                          )}
+                        >
+                          <Brain className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                          {t(getThinkingLevelNameKey(thinkingLevel))}
+                          <ChevronDown className="h-3 w-3 opacity-50 shrink-0" />
+                        </button>
+                      </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side="top">
+                      {t('settings.ai.thinking')}
+                    </TooltipContent>
+                  </Tooltip>
+                  <StyledDropdownMenuContent
+                    side="top"
+                    align="end"
+                    sideOffset={8}
+                    className="min-w-[240px]"
+                  >
+                    {THINKING_LEVELS.map((level) => {
+                      const isSelected = thinkingLevel === level.id;
+                      return (
+                        <StyledDropdownMenuItem
+                          key={level.id}
+                          data-testid="thinking-level-item"
+                          onSelect={() => onThinkingLevelChange(level.id)}
+                          className="flex items-center justify-between px-2 py-2 rounded-lg cursor-pointer"
+                        >
+                          <div className="text-left">
+                            <div className="font-medium text-sm">
+                              {t(level.nameKey)}
+                            </div>
+                            <div className="text-xs text-muted-foreground">
+                              {t(level.descriptionKey)}
+                            </div>
+                          </div>
+                          {isSelected && (
+                            <Check className="h-3 w-3 text-foreground shrink-0 ml-3" />
+                          )}
+                        </StyledDropdownMenuItem>
+                      );
+                    })}
+                  </StyledDropdownMenuContent>
+                </DropdownMenu>
+              )}
+
               {/* 5. Model Selector - Hidden in compact mode (EditPopover embedding) */}
               {!compactMode && (
                 <DropdownMenu
diff --git a/docs/loop/feature-ledger.md b/docs/loop/feature-ledger.md
@@ -32,5 +32,6 @@ log, not the system of record.
 
 | slug | title | source | feasibility | status | issue | pr | branch | updated | notes |
 | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
-| command-palette | Global command palette (⌘K/Ctrl+K) to search & run any action | Claude Code Desktop ⌘K / VS Code & Codex ⌘⇧P / Linear ⌘K | frontend-only | pr-open | [#41](https://github.com/modelstudioai/openwork/issues/41) | [#42](https://github.com/modelstudioai/openwork/pull/42) | loop/command-palette | 2026-07-01 | Reuses action registry `execute()` + cmdk primitives; zero new i18n keys. CDP e2e 2/2 pass. typecheck/test +0 vs main. |
+| thinking-level-picker | Thinking-level (reasoning effort) picker in the chat composer | Claude Code Desktop effort menu (⌘⇧E) + OpenWork's own model picker | frontend-only | pr-open | [#44](https://github.com/modelstudioai/openwork/issues/44) | [#45](https://github.com/modelstudioai/openwork/pull/45) | loop/thinking-level-picker | 2026-07-02 | `thinkingLevel`/`onThinkingLevelChange` already plumbed to `FreeFormInput`; only the UI trigger was missing. Reuses `thinking.*` + `settings.ai.thinking` i18n keys (zero new keys). typecheck/`bun test` zero-delta vs main (3578 pass/56 fail on both); renderer build ✅. **CDP could not run locally**: this sandbox's egress policy 403s the Electron binary download and the `libsignal` GitHub dep (WhatsApp worker), so the app can't be built/launched here — assertion included for CI/reviewer. |
+| command-palette | Global command palette (⌘K/Ctrl+K) to search & run any action | Claude Code Desktop ⌘K / VS Code & Codex ⌘⇧P / Linear ⌘K | frontend-only | merged | [#41](https://github.com/modelstudioai/openwork/issues/41) | [#42](https://github.com/modelstudioai/openwork/pull/42) | loop/command-palette | 2026-07-02 | Merged into `main`. Reuses action registry `execute()` + cmdk primitives; zero new i18n keys. CDP e2e 2/2 pass. typecheck/test +0 vs main. |
 | settings-search | Searchable/filterable settings navigation | Claude Code Desktop / VS Code / Codex desktop settings search | frontend-only | merged | [#39](https://github.com/modelstudioai/openwork/issues/39) | [#40](https://github.com/modelstudioai/openwork/pull/40) | loop/settings-search | 2026-07-01 | Merged into `main`. Filters `SettingsNavigator` by title+description; reuses `common.search`/`common.noResultsFound` (no new locale keys). Also hardened `e2e/app.ts` teardown (per-launch profile dir + setsid process-group kill) so multiple CDP assertions run under headless xvfb. |
diff --git a/e2e/assertions/thinking-level-picker.assert.ts b/e2e/assertions/thinking-level-picker.assert.ts
@@ -0,0 +1,144 @@
+/**
+ * Feature assertion: the composer's thinking-level (reasoning effort) picker.
+ *
+ * Drives the real built app over CDP through the full path:
+ *   composer renders a thinking-level trigger → open it → it lists all six
+ *   levels with exactly one marked selected (matching the trigger) → select a
+ *   *different* level → the menu closes and the trigger label updates to the
+ *   chosen level.
+ *
+ * The final step proves the picker actually *changes* the session's thinking
+ * level (the value round-trips back into the trigger), not merely displays a
+ * list.
+ */
+
+import type { Assertion } from '../runner';
+
+const TRIGGER = '[data-testid="thinking-level-trigger"]';
+const ITEM = '[data-testid="thinking-level-item"]';
+
+/** The six thinking levels are the single source of truth for the count. */
+const EXPECTED_LEVEL_COUNT = 6;
+
+/** Menu items that are actually visible (Radix renders them in a portal). */
+const VISIBLE_ITEMS_EXPR = `[...document.querySelectorAll(${JSON.stringify(
+  ITEM,
+)})].filter((el) => el.offsetParent !== null)`;
+
+/** Trimmed visible label of the trigger button (icons are SVGs with no text). */
+const TRIGGER_LABEL_EXPR = `(() => { const el = document.querySelector(${JSON.stringify(
+  TRIGGER,
+)}); return el ? (el.textContent || '').trim() : null; })()`;
+
+/**
+ * Radix `DropdownMenuTrigger` opens on `pointerdown` (button 0), not on a
+ * synthetic `click`, so dispatch a real pointerdown to open the menu.
+ */
+const OPEN_MENU_EXPR = `(() => {
+  const el = document.querySelector(${JSON.stringify(TRIGGER)});
+  if (!el) return false;
+  el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true, button: 0 }));
+  return true;
+})()`;
+
+/** Read each visible item's primary label + whether it is marked selected (has a check SVG). */
+const READ_ITEMS_EXPR = `JSON.stringify(${VISIBLE_ITEMS_EXPR}.map((el) => ({
+  label: (el.querySelector('.font-medium')?.textContent || '').trim(),
+  selected: !!el.querySelector('svg'),
+})))`;
+
+interface ItemInfo {
+  label: string;
+  selected: boolean;
+}
+
+const assertion: Assertion = {
+  name: 'composer thinking-level picker lists levels and switches the active level',
+  async run(app) {
+    const { session } = app;
+
+    // App fully mounted.
+    await session.waitForFunction(
+      '!document.getElementById("_loader") && (document.getElementById("root")?.childElementCount ?? 0) > 0',
+      { timeoutMs: 30000, message: 'React UI did not mount' },
+    );
+
+    // Reach the ready AppShell (not onboarding / workspace picker) — the same
+    // stable, non-localized anchor the command-palette assertion waits on.
+    await session.waitForSelector('[aria-label="Craft menu"]', {
+      timeoutMs: 30000,
+      message: 'app did not reach the ready AppShell state',
+    });
+
+    // 1. The composer renders a thinking-level trigger.
+    await session.waitForSelector(TRIGGER, {
+      timeoutMs: 20000,
+      message: 'thinking-level picker trigger did not render in the composer',
+    });
+
+    const initialLabel = (await session.evaluate<string | null>(TRIGGER_LABEL_EXPR))?.trim();
+    if (!initialLabel) {
+      throw new Error('thinking-level trigger rendered without a visible label');
+    }
+
+    // 2. Opening it lists all six thinking levels.
+    if (!(await session.evaluate<boolean>(OPEN_MENU_EXPR))) {
+      throw new Error('failed to dispatch pointerdown on the thinking-level trigger');
+    }
+    await session.waitForFunction(
+      `${VISIBLE_ITEMS_EXPR}.length === ${EXPECTED_LEVEL_COUNT}`,
+      {
+        timeoutMs: 8000,
+        message: `thinking-level menu did not list ${EXPECTED_LEVEL_COUNT} levels`,
+      },
+    );
+
+    const items = JSON.parse(await session.evaluate<string>(READ_ITEMS_EXPR)) as ItemInfo[];
+
+    // 3. Exactly one level is marked selected, and it matches the trigger.
+    const selected = items.filter((it) => it.selected);
+    if (selected.length !== 1) {
+      throw new Error(
+        `expected exactly one selected thinking level, saw ${selected.length}: ${JSON.stringify(items)}`,
+      );
+    }
+    if (selected[0].label !== initialLabel) {
+      throw new Error(
+        `selected menu item "${selected[0].label}" does not match the trigger label "${initialLabel}"`,
+      );
+    }
+
+    // 4. Select a *different* level and assert the trigger label updates to it.
+    const target = items.find((it) => !it.selected && it.label && it.label !== initialLabel);
+    if (!target) {
+      throw new Error(`could not find a non-selected level to switch to: ${JSON.stringify(items)}`);
+    }
+
+    const clicked = await session.evaluate<boolean>(`(() => {
+      const el = ${VISIBLE_ITEMS_EXPR}.find(
+        (el) => (el.querySelector('.font-medium')?.textContent || '').trim() === ${JSON.stringify(target.label)},
+      );
+      if (!el) return false;
+      el.click();
+      return true;
+    })()`);
+    if (!clicked) throw new Error(`could not click the "${target.label}" thinking-level row`);
+
+    // Menu closes after selection.
+    await session.waitForFunction(`${VISIBLE_ITEMS_EXPR}.length === 0`, {
+      timeoutMs: 5000,
+      message: 'thinking-level menu did not close after selecting a level',
+    });
+
+    // The choice round-trips: the trigger now shows the newly selected level.
+    await session.waitForFunction(
+      `${TRIGGER_LABEL_EXPR} === ${JSON.stringify(target.label)}`,
+      {
+        timeoutMs: 5000,
+        message: `trigger label did not update to "${target.label}" after selection (was "${initialLabel}")`,
+      },
+    );
+  },
+};
+
+export default assertion;
