@@ -9,7 +9,11 @@ import { buildSlashItems, filterCommands, parseSlash } from '../lib/slashCommand
 import type { FileItem } from './MentionMenu.vue';
 import type { ActivationBadges, ConversationStatus, PermissionMode, QueuedPromptView } from '../types';
 import type { AppModel, AppSkill, ThinkingLevel } from '../api/types';
-import { modelThinkingAvailability } from '../lib/modelThinking';
+import {
+  coerceThinkingForModel,
+  effortLevelsForModel,
+  modelThinkingAvailability,
+} from '../lib/modelThinking';
 import { formatTokens } from '../lib/formatTokens';
 
 // ---------------------------------------------------------------------------
@@ -745,7 +749,7 @@ function toggleDropdown(): void {
   if (dropdownOpen.value) {
     const rect = modelPillRef.value?.getBoundingClientRect();
     modelDropdownStyle.value = rect
-      ? { maxHeight: `${Math.max(160, rect.top - 4 - 12)}px` }
+      ? { maxHeight: `${Math.min(360, Math.max(160, rect.top - 4 - 12))}px` }
       : {};
     permDropdownOpen.value = false;
     document.addEventListener('click', onDocClick, true);
@@ -817,15 +821,16 @@ const currentModel = computed(() => {
   );
 });
 const thinkingAvailability = computed(() => modelThinkingAvailability(currentModel.value));
-const thinkingToggleable = computed(() => thinkingAvailability.value === 'toggle');
-const thinkingOn = computed(() => {
-  if (thinkingAvailability.value === 'always-on') return true;
-  if (thinkingAvailability.value === 'unsupported') return false;
-  return (props.thinking ?? 'off') !== 'off';
-});
-function toggleThinking(): void {
-  if (!thinkingToggleable.value) return;
-  emit('setThinking', thinkingOn.value ? 'off' : 'high');
+const effortLevels = computed(() => effortLevelsForModel(currentModel.value));
+const currentEffort = computed<ThinkingLevel>(() =>
+  coerceThinkingForModel(currentModel.value, props.thinking ?? 'off'),
+);
+function effortLabel(level: ThinkingLevel): string {
+  return t(`status.effortLevels.${level}`);
+}
+function selectEffort(level: ThinkingLevel): void {
+  emit('setThinking', level);
+  closeDropdown();
 }
 
 // Plan toggle
@@ -1200,7 +1205,7 @@ function selectModel(modelId: string): void {
             @keydown.space.prevent="toggleDropdown"
           >
             <b>{{ status.model }}</b>
-            <span v-if="thinkingOn" class="think-suffix">{{ t('composer.thinkingSuffix') }}</span>
+            <span v-if="thinkingAvailability !== 'unsupported'" class="think-suffix">{{ ` · ${effortLabel(currentEffort)}` }}</span>
             <svg class="cv" viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
           </span>
         </div>
@@ -1242,19 +1247,21 @@ function selectModel(modelId: string): void {
 
           <div v-if="providerModels.length > 0" class="md-divider" />
 
-          <!-- Thinking toggle -->
-          <button
-            class="md-row md-row-toggle"
-            role="menuitem"
-            :class="{ 'is-on': thinkingOn, 'is-disabled': !thinkingToggleable }"
-            :disabled="!thinkingToggleable"
-            @click="toggleThinking()"
-          >
-            <span class="md-check"><svg v-if="thinkingOn" viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3.5 3.5L13 4.5"/></svg></span>
-            <span class="md-name">{{ t('status.thinkingLabel') }}</span>
-            <span v-if="thinkingAvailability === 'always-on'" class="md-note">{{ t('status.planOn') }}</span>
-            <span v-else-if="thinkingAvailability === 'unsupported'" class="md-note">{{ t('status.modeNotSupported') }}</span>
-          </button>
+          <!-- Thinking effort -->
+          <div class="md-section">{{ t('status.effortLabel') }}</div>
+          <div v-if="thinkingAvailability === 'unsupported'" class="md-cache-note">{{ t('status.modeNotSupported') }}</div>
+          <template v-else>
+            <button
+              v-for="level in effortLevels"
+              :key="level"
+              class="md-row"
+              role="menuitem"
+              @click="selectEffort(level)"
+            >
+              <span class="md-check"><svg v-if="level === currentEffort" viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3.5 3.5L13 4.5"/></svg></span>
+              <span class="md-name">{{ effortLabel(level) }}</span>
+            </button>
+          </template>
 
           <div class="md-divider" />
           <div class="md-cache-note">{{ t('status.cacheNote') }}</div>
 
@@ -18,6 +18,5 @@ export default {
   emptyConversationTitle: 'Pythinker Code',
   emptyConversation: 'No messages yet — type below to start the conversation',
   quickStartPlaceholder: 'Type a message to start a new conversation…',
-  thinkingSuffix: ' · thinking',
 
 } as const;
@@ -32,6 +32,16 @@ export default {
   // Thinking selector
   thinkingLabel: 'thinking',
   thinkingTooltip: 'Toggle thinking mode',
+  effortLabel: 'Thinking effort',
+  effortLevels: {
+    off: 'Off',
+    minimal: 'Minimal',
+    low: 'Low',
+    medium: 'Medium',
+    high: 'High',
+    xhigh: 'xHigh',
+    max: 'Max',
+  },
   cacheNote:
     'Note: Switching models or thinking effort invalidates the existing prompt cache. Start a new chat to avoid extra token costs.',
   starredModels: 'Starred',
 
@@ -4,8 +4,27 @@ export type ThinkingAvailability = 'toggle' | 'always-on' | 'unsupported';
 
 export type ModelThinkingInfo = Pick<AppModel, 'capabilities'> & {
   readonly adaptiveThinking?: boolean;
+  readonly supportEfforts?: readonly string[];
 };
 
+/**
+ * Effort-level rules, mirrored from `packages/node-sdk/src/thinking-levels.ts`.
+ * The web app has no dependency on the SDK or agent-core, so the rules are
+ * duplicated here on purpose; keep both copies in step.
+ */
+export const CANONICAL_EFFORT_ORDER: readonly ThinkingLevel[] = [
+  'off',
+  'minimal',
+  'low',
+  'medium',
+  'high',
+  'xhigh',
+  'max',
+];
+
+/** Fallback effort set for models without `supportEfforts` metadata. */
+const DEFAULT_SUPPORTED_EFFORTS: readonly ThinkingLevel[] = ['low', 'medium', 'high'];
+
 export function modelThinkingAvailability(
   model: ModelThinkingInfo | undefined,
 ): ThinkingAvailability {
@@ -16,16 +35,43 @@ export function modelThinkingAvailability(
   return 'unsupported';
 }
 
+/** Effort levels the model actually supports ('off' excluded), canonical order. */
+function baseEffortsForModel(model: ModelThinkingInfo | undefined): ThinkingLevel[] {
+  const supportEfforts = model?.supportEfforts;
+  if (supportEfforts?.length === 0) return ['high'];
+  const declared = new Set<string>(supportEfforts ?? []);
+  const ordered = CANONICAL_EFFORT_ORDER.filter(
+    (effort) => effort !== 'off' && declared.has(effort),
+  );
+  return ordered.length > 0 ? [...ordered] : [...DEFAULT_SUPPORTED_EFFORTS];
+}
+
+/** Selectable levels for a model, in order. `['off']` when thinking is unsupported. */
+export function effortLevelsForModel(model: ModelThinkingInfo | undefined): ThinkingLevel[] {
+  const availability = modelThinkingAvailability(model);
+  if (availability === 'unsupported') return ['off'];
+  const base = baseEffortsForModel(model);
+  return availability === 'always-on' ? base : ['off', ...base];
+}
+
+/**
+ * Clamp a requested effort to what the model supports:
+ * always-on + 'off' → first supported level; unsupported → 'off'; a level the
+ * model lacks → nearest lower supported level (else the first selectable one).
+ */
 export function coerceThinkingForModel(
   model: ModelThinkingInfo | undefined,
   requested: ThinkingLevel,
 ): ThinkingLevel {
-  switch (modelThinkingAvailability(model)) {
-    case 'always-on':
-      return requested === 'off' ? 'high' : requested;
-    case 'unsupported':
-      return 'off';
-    case 'toggle':
-      return requested;
+  const availability = modelThinkingAvailability(model);
+  if (availability === 'unsupported') return 'off';
+  const levels = effortLevelsForModel(model);
+  if (availability === 'always-on' && requested === 'off') return levels[0]!;
+  if (levels.includes(requested)) return requested;
+  const requestedIdx = CANONICAL_EFFORT_ORDER.indexOf(requested);
+  for (let i = requestedIdx - 1; i >= 0; i--) {
+    const candidate = CANONICAL_EFFORT_ORDER[i]!;
+    if (levels.includes(candidate)) return candidate;
   }
+  return levels[0]!;
 }
@@ -416,6 +416,18 @@ describe('Composer model dropdown', () => {
     await pill.trigger('click');
     await pill.trigger('click');
     expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('284px');
+
+    // A tall window used to let the menu grow to the full viewport height.
+    rect.mockReturnValue({ top: 1180 } as DOMRect);
+    await pill.trigger('click');
+    await pill.trigger('click');
+    expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('360px');
+  });
+
+  it('replaces the binary thinking toggle with the effort list', () => {
+    expect(composerSource).not.toContain('toggleThinking');
+    expect(composerSource).not.toContain('md-row-toggle');
+    expect(composerSource).toContain('selectEffort');
   });
 });
 
 
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+import {
+  coerceThinkingForModel,
+  effortLevelsForModel,
+} from '../src/lib/modelThinking';
+
+describe('effortLevelsForModel', () => {
+  it('keeps declared efforts in canonical order and prepends off', () => {
+    expect(
+      effortLevelsForModel({ capabilities: ['thinking'], supportEfforts: ['low', 'high', 'max'] }),
+    ).toEqual(['off', 'low', 'high', 'max']);
+  });
+
+  it('falls back to low/medium/high when supportEfforts is absent', () => {
+    expect(effortLevelsForModel({ capabilities: ['thinking'] })).toEqual([
+      'off',
+      'low',
+      'medium',
+      'high',
+    ]);
+  });
+
+  it('treats an empty supportEfforts array as high only', () => {
+    expect(effortLevelsForModel({ capabilities: ['thinking'], supportEfforts: [] })).toEqual([
+      'off',
+      'high',
+    ]);
+  });
+
+  it('omits off for always-thinking models', () => {
+    expect(effortLevelsForModel({ capabilities: ['always_thinking'] })).toEqual([
+      'low',
+      'medium',
+      'high',
+    ]);
+  });
+
+  it('offers only off when thinking is unsupported', () => {
+    expect(effortLevelsForModel({ capabilities: [] })).toEqual(['off']);
+  });
+});
+
+describe('coerceThinkingForModel', () => {
+  it('clamps an unsupported level down to the nearest lower supported one', () => {
+    expect(
+      coerceThinkingForModel(
+        { capabilities: ['thinking'], supportEfforts: ['low', 'medium'] },
+        'xhigh',
+      ),
+    ).toBe('medium');
+  });
+
+  it('promotes off to the first supported level for always-thinking models', () => {
+    expect(
+      coerceThinkingForModel(
+        { capabilities: ['always_thinking'], supportEfforts: ['medium', 'max'] },
+        'off',
+      ),
+    ).toBe('medium');
+  });
+
+  it('returns off when thinking is unsupported', () => {
+    expect(coerceThinkingForModel({ capabilities: [] }, 'high')).toBe('off');
+  });
+});
@@ -139,10 +139,12 @@ describe('setModel failure handling', () => {
 
     await client.setModel('model-new');
 
-    expect(client.thinking.value).toBe('high');
+    // The model declares no supportEfforts, so it falls back to low/medium/high
+    // and takes the first level — same rule as the SDK's coerceEffortForModel.
+    expect(client.thinking.value).toBe('low');
     expect(api.updateSession).toHaveBeenLastCalledWith('sess_1', {
       model: 'model-new',
-      thinking: 'high',
+      thinking: 'low',
     });
   });
 });