@hienlh/ppm 0.17.14 → 0.17.16

package/src/services/account.service.ts

@@ -575,16 +575,19 @@ class AccountService {
     if (!res.ok) {
       const errorBody = await res.text().catch(() => "");
       console.error(`[accounts] Refresh failed for ${accountId}: ${res.status} ${errorBody}`);
-      // invalid_grant or invalid_request = refresh token permanently dead → clear it so account becomes temporary
       if (errorBody.includes("invalid_grant") || errorBody.includes("invalid_request")) {
-        // Double-check: another session might have already refreshed between our read and the OAuth call
+        // Another session/process may have refreshed (and rotated) the token between
+        // our read and this OAuth call — if the DB token is now fresh, this failure is stale.
         const recheckAccount = this.getWithTokens(accountId);
         if (recheckAccount?.expiresAt && recheckAccount.expiresAt - Math.floor(Date.now() / 1000) > 60) {
           console.log(`[accounts] Refresh failed with invalid_grant but DB token is now fresh — another session refreshed it`);
           return;
         }
-        console.log(`[accounts] Clearing invalid refresh token for ${account.email ?? accountId} — account is now temporary`);
-        updateAccount(accountId, { refresh_token: encrypt("") });
+        // Do NOT wipe the refresh token. On multi-device/multi-process setups the token is
+        // usually rotated elsewhere, not truly dead; clearing it bricks the local copy
+        // permanently with no recovery path (esp. for parked/disabled accounts). Preserve
+        // it so re-enable / re-import / re-sync can restore access.
+        console.warn(`[accounts] Refresh token rejected for ${account.email ?? accountId} — preserving token for recovery (not clearing)`);
       }
       if (disableOnFail) {
         this.setDisabled(accountId);
@@ -743,9 +746,12 @@ class AccountService {
       const accounts = this.list();
       const nowS = Math.floor(Date.now() / 1000);
       for (const acc of accounts) {
-        // Disabled accounts are still refreshed to keep the refresh token alive.
-        // Disable only removes an account from the chat rotation; skipping refresh
-        // lets the token rotation lapse and eventually expires the account for good.
+        // Freeze disabled accounts: skip background refresh entirely.
+        // Refreshing rotates the OAuth refresh token; when the same account is
+        // shared across machines/processes the rotation races and one side gets
+        // invalid_grant, killing an account the user only meant to park. Leaving
+        // a disabled account untouched keeps its token intact until re-enabled.
+        if (acc.status === "disabled") continue;
         if (!acc.expiresAt) continue;
         if (acc.expiresAt - nowS > REFRESH_BUFFER_S) continue;
         // Skip temporary accounts (no refresh token) — they can't be refreshed

package/src/services/db.service.ts

@@ -3,7 +3,7 @@ import { resolve } from "node:path";
 import { mkdirSync, existsSync } from "node:fs";
 import { encrypt, decrypt } from "../lib/account-crypto.ts";
 import { getPpmDir } from "./ppm-dir.ts";
-export const CURRENT_SCHEMA_VERSION = 35;
+export const CURRENT_SCHEMA_VERSION = 36;
 
 let db: Database | null = null;
 let dbProfile: string | null = null;
@@ -831,6 +831,12 @@ function runMigrations(database: Database): void {
       PRAGMA user_version = 35;
     `);
   }
+
+  if (current < 36) {
+    try { database.exec("ALTER TABLE session_metadata ADD COLUMN effort TEXT"); } catch {}
+    try { database.exec("ALTER TABLE session_metadata ADD COLUMN thinking_budget INTEGER"); } catch {}
+    database.exec("PRAGMA user_version = 36;");
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -1023,6 +1029,30 @@ export function setSessionModel(sessionId: string, model: string): void {
   ).run(sessionId, model);
 }
 
+/** Per-session effort override; null when session uses provider default */
+export function getSessionEffort(sessionId: string): string | null {
+  const row = getDb().query("SELECT effort FROM session_metadata WHERE session_id = ?").get(sessionId) as { effort: string | null } | null;
+  return row?.effort ?? null;
+}
+
+export function setSessionEffort(sessionId: string, effort: string): void {
+  getDb().query(
+    "INSERT INTO session_metadata (session_id, effort) VALUES (?, ?) ON CONFLICT(session_id) DO UPDATE SET effort = excluded.effort",
+  ).run(sessionId, effort);
+}
+
+/** Per-session thinking budget (maxThinkingTokens); null = thinking OFF / use provider default */
+export function getSessionThinking(sessionId: string): number | null {
+  const row = getDb().query("SELECT thinking_budget FROM session_metadata WHERE session_id = ?").get(sessionId) as { thinking_budget: number | null } | null;
+  return row?.thinking_budget ?? null;
+}
+
+export function setSessionThinking(sessionId: string, budget: number | null): void {
+  getDb().query(
+    "INSERT INTO session_metadata (session_id, thinking_budget) VALUES (?, ?) ON CONFLICT(session_id) DO UPDATE SET thinking_budget = excluded.thinking_budget",
+  ).run(sessionId, budget);
+}
+
 // ---------------------------------------------------------------------------
 // Unread tracking
 // ---------------------------------------------------------------------------

package/src/types/api.ts

@@ -23,9 +23,11 @@ export type TerminalWsMessage =
 
 /** WebSocket message types (chat) */
 export type ChatWsClientMessage =
-  | { type: "message"; content: string; permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }>; model?: string }
+  | { type: "message"; content: string; permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }>; model?: string; effort?: string; thinking?: boolean }
   | { type: "cancel" }
   | { type: "set_model"; model: string }
+  | { type: "set_effort"; effort: string }
+  | { type: "set_thinking"; enabled: boolean }
   | { type: "approval_response"; requestId: string; approved: boolean; reason?: string; data?: unknown }
   | { type: "kill_background_shell"; shellId: string }
   | { type: "ready" };
@@ -57,7 +59,7 @@ export type ChatWsServerMessage =
   | { type: "error"; message: string }
   | { type: "account_info"; accountId: string; accountLabel: string }
   | { type: "phase_changed"; phase: SessionPhase; elapsed?: number }
-  | { type: "session_state"; sessionId: string; phase: SessionPhase; pendingApproval: { requestId: string; tool: string; input: unknown } | null; sessionTitle: string | null; model?: string }
+  | { type: "session_state"; sessionId: string; phase: SessionPhase; pendingApproval: { requestId: string; tool: string; input: unknown } | null; sessionTitle: string | null; model?: string; effort?: string; thinking?: boolean }
   | { type: "turn_events"; events: unknown[] }
   | { type: "title_updated"; title: string }
   | { type: "compact_status"; status: "compacting" | "done" }

package/src/types/chat.ts

@@ -4,8 +4,16 @@ export interface SendMessageOpts {
   images?: Array<{ data: string; mediaType: string }>;
   /** Per-session model override; falls back to provider config model when absent */
   model?: string;
+  /** Override the provider's 1M-context setting for this call (false = never add the
+   *  [1m] suffix). Used by lightweight calls (e.g. the group-chat router) whose small
+   *  model may not support a 1M window. Falls back to provider config when absent. */
+  oneMContext?: boolean;
   /** Per-query turn cap; falls back to provider config max_turns when absent */
   maxTurns?: number;
+  /** Per-session effort override (low|medium|high|xhigh|max); falls back to provider config */
+  effort?: string;
+  /** Per-session thinking budget → SDK maxThinkingTokens; falls back to provider config */
+  maxThinkingTokens?: number;
 }
 
 export interface AIProvider {

package/src/types/config.ts

@@ -67,7 +67,7 @@ export interface AIProviderConfig {
   api_key_env?: string;
   api_key?: string;
   base_url?: string;
-  effort?: "low" | "medium" | "high" | "max";
+  effort?: "low" | "medium" | "high" | "xhigh" | "max";
   max_turns?: number;
   max_budget_usd?: number;
   thinking_budget_tokens?: number;
@@ -97,7 +97,7 @@ export const DEFAULT_CONFIG: PpmConfig = {
       claude: {
         type: "agent-sdk",
         api_key_env: "ANTHROPIC_API_KEY",
-        model: "claude-opus-4-8",
+        model: "claude-opus-5",
         effort: "high",
         max_turns: 1000,
         permission_mode: "bypassPermissions",
@@ -120,8 +120,8 @@ export const DEFAULT_CONFIG: PpmConfig = {
 };
 
 const VALID_TYPES = ["agent-sdk", "cli", "mock"] as const;
-const VALID_EFFORTS = ["low", "medium", "high"] as const;
-const VALID_MODELS = ["claude-fable-5", "claude-opus-4-8", "claude-opus-4-7", "claude-opus-4-6", "claude-sonnet-4-6", "claude-haiku-4-5"] as const;
+const VALID_EFFORTS = ["low", "medium", "high", "xhigh", "max"] as const;
+const VALID_MODELS = ["claude-opus-5", "claude-fable-5", "claude-opus-4-8", "claude-opus-4-7", "claude-opus-4-6", "claude-sonnet-5", "claude-sonnet-4-6", "claude-haiku-4-5"] as const;
 /** Allowed CLI commands for CLI providers (prevents command injection) */
 const VALID_CLI_COMMANDS = ["cursor-agent", "codex", "gemini"] as const;
 /** Only these values are allowed for default_provider in config */
@@ -241,12 +241,7 @@ export function sanitizeConfig(config: PpmConfig): boolean {
     dirty = true;
   }
 
-  // Downgrade "max" effort → "high" (not available for Claude.ai subscribers)
   for (const provider of Object.values(config.ai.providers)) {
-    if ((provider as any).effort === "max") {
-      provider.effort = "high";
-      dirty = true;
-    }
     // Fix invalid permission_mode
     if (provider.permission_mode != null && !["default", "acceptEdits", "plan", "bypassPermissions"].includes(provider.permission_mode)) {
       provider.permission_mode = "bypassPermissions";

package/src/web/components/chat/chat-tab.tsx

@@ -112,6 +112,10 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     sessionTitle,
     model,
     setModel,
+    effort,
+    setEffort,
+    thinking,
+    setThinking,
     sendMessage,
     respondToApproval,
     cancelStreaming,
@@ -681,6 +685,10 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             onProviderChange={!sessionId ? setProviderId : undefined}
             model={model}
             onModelChange={setModel}
+            effort={effort}
+            onEffortChange={setEffort}
+            thinking={thinking}
+            onThinkingChange={setThinking}
           />
         )}
       </div>

package/src/web/components/chat/message-input.tsx

@@ -7,7 +7,7 @@ import { isImageFile } from "@/lib/file-support";
 import { AttachmentChips } from "./attachment-chips";
 import { ModeSelector, getModeLabel, getModeIcon } from "./mode-selector";
 import { ProviderSelector } from "./provider-selector";
-import { ModelSelector } from "./model-selector";
+import { ModelThinkingSelector } from "./model-thinking-selector";
 import type { SlashItem } from "./slash-command-picker";
 import type { FileNode } from "../../../types/project";
 import { useFileStore } from "@/stores/file-store";
@@ -69,6 +69,14 @@ interface MessageInputProps {
   model?: string | null;
   /** Model change handler — undefined when no active session */
   onModelChange?: (model: string) => void;
+  /** Current per-session effort (null = provider default) */
+  effort?: string | null;
+  /** Effort change handler */
+  onEffortChange?: (effort: string) => void;
+  /** Current per-session thinking on/off */
+  thinking?: boolean;
+  /** Thinking toggle handler */
+  onThinkingChange?: (enabled: boolean) => void;
 }
 
 export const MessageInput = memo(function MessageInput({
@@ -96,6 +104,10 @@ export const MessageInput = memo(function MessageInput({
   onProviderChange,
   model,
   onModelChange,
+  effort,
+  onEffortChange,
+  thinking,
+  onThinkingChange,
 }: MessageInputProps) {
   // Uncontrolled textarea: value lives in DOM + ref, not React state.
   // Only `hasText` state triggers re-renders (empty↔non-empty for send button).
@@ -700,9 +712,13 @@ export const MessageInput = memo(function MessageInput({
             />
           )}
           {onModelChange && projectName && (
-            <ModelSelector
-              value={model ?? null}
-              onChange={onModelChange}
+            <ModelThinkingSelector
+              model={model ?? null}
+              effort={effort ?? null}
+              thinking={thinking ?? false}
+              onModelChange={onModelChange}
+              onEffortChange={onEffortChange ?? (() => {})}
+              onThinkingChange={onThinkingChange ?? (() => {})}
               projectName={projectName}
               providerId={providerId ?? "claude"}
               disabled={isStreaming}
@@ -795,9 +811,13 @@ export const MessageInput = memo(function MessageInput({
               />
             )}
             {onModelChange && projectName && (
-              <ModelSelector
-                value={model ?? null}
-                onChange={onModelChange}
+              <ModelThinkingSelector
+                model={model ?? null}
+                effort={effort ?? null}
+                thinking={thinking ?? false}
+                onModelChange={onModelChange}
+                onEffortChange={onEffortChange ?? (() => {})}
+                onThinkingChange={onThinkingChange ?? (() => {})}
                 projectName={projectName}
                 providerId={providerId ?? "claude"}
                 disabled={isStreaming}

package/src/web/components/chat/message-list.tsx

@@ -637,12 +637,15 @@ function parseIdeOpenedFile(text: string): { idePath: string | null; cleanText:
 /** Parse user message content, extracting attached file paths and the actual text */
 function parseUserAttachments(content: string): { files: string[]; text: string } {
   // Match: [Attached file: /path] or [Attached files:\n/path1\n/path2\n]
-  const singleMatch = content.match(/^\[Attached file: (.+?)\]\n\n?/);
+  // Trailing newlines are optional — an attachment-only message has the marker
+  // trimmed to the end of the string (extractTerminalBlocks trims), so the
+  // separator newlines may be absent.
+  const singleMatch = content.match(/^\[Attached file: (.+?)\]\n*/);
   if (singleMatch) {
     return { files: [singleMatch[1]!], text: content.slice(singleMatch[0].length) };
   }
 
-  const multiMatch = content.match(/^\[Attached files:\n([\s\S]+?)\]\n\n?/);
+  const multiMatch = content.match(/^\[Attached files:\n([\s\S]+?)\]\n*/);
   if (multiMatch) {
     const files = multiMatch[1]!.split("\n").map((l) => l.trim()).filter(Boolean);
     return { files, text: content.slice(multiMatch[0].length) };
@@ -815,7 +818,7 @@ function UserBubble({ content, messageId, timestamp, projectName, onFork, onEdit
             expanded && "max-h-[50vh] overflow-y-auto",
           )}
         >
-          {isSystemContext ? <TextWithFilePaths text={text} projectName={projectName} /> : text}
+          {isSystemContext ? <TextWithFilePaths text={text} projectName={projectName} /> : <TextWithLinks text={text} />}
         </div>
       )}
       {(isOverflowing || expanded) && (
@@ -1002,6 +1005,48 @@ function FilePathChip({ path, projectName }: { path: string; projectName?: strin
   );
 }
 
+/** Render plain text with http(s) URLs turned into clickable links. Preserves
+ *  whitespace/newlines via the surrounding `whitespace-pre-wrap` container. */
+function TextWithLinks({ text }: { text: string }) {
+  const parts = useMemo(() => {
+    const re = /(https?:\/\/[^\s<>()]+[^\s<>().,;:!?'"])/g;
+    const result: { kind: "text" | "url"; value: string }[] = [];
+    let last = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+      if (m.index > last) result.push({ kind: "text", value: text.slice(last, m.index) });
+      result.push({ kind: "url", value: m[1]! });
+      last = m.index + m[0].length;
+    }
+    if (last < text.length) result.push({ kind: "text", value: text.slice(last) });
+    return result;
+  }, [text]);
+
+  // No URLs — return the raw string so nothing about the layout changes.
+  if (parts.every((p) => p.kind === "text")) return <>{text}</>;
+
+  return (
+    <>
+      {parts.map((p, i) =>
+        p.kind === "url" ? (
+          <a
+            key={i}
+            href={p.value}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary underline underline-offset-2 hover:text-primary/80 break-all"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {p.value}
+          </a>
+        ) : (
+          <span key={i}>{p.value}</span>
+        ),
+      )}
+    </>
+  );
+}
+
 /** Render text with absolute file paths detected and turned into clickable chips */
 function TextWithFilePaths({ text, projectName }: { text: string; projectName?: string }) {
   const parts = useMemo(() => {

package/src/web/components/chat/model-thinking-selector-helpers.ts

@@ -0,0 +1,33 @@
+// Pure helpers for the unified model + thinking picker. Kept DOM-free so the
+// label↔value mapping (the crash-prone "Extra"→"xhigh" contract) is unit-testable
+// without a browser harness.
+//
+// SDK effort enum = low | medium | high | xhigh | max. The app UI shows "Extra"
+// for the SDK value "xhigh"; the literal "extra" would crash the CLI subprocess,
+// so it must NEVER appear as a value here.
+
+export interface EffortOption {
+  label: string;
+  value: "low" | "medium" | "high" | "xhigh" | "max";
+  default?: boolean;
+}
+
+export const EFFORT_OPTIONS: EffortOption[] = [
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "High", value: "high", default: true },
+  { label: "Extra", value: "xhigh" },
+  { label: "Max", value: "max" },
+];
+
+/** UI label for an effort value; falls back to the raw value when unknown. */
+export function effortLabel(value: string | null | undefined): string {
+  if (!value) return "";
+  return EFFORT_OPTIONS.find((o) => o.value === value)?.label ?? value;
+}
+
+/** Chip text: model display, plus " · <Effort>" when an effort is set. */
+export function chipLabel(modelDisplay: string, effortValue: string | null | undefined): string {
+  const eff = effortLabel(effortValue);
+  return eff ? `${modelDisplay} · ${eff}` : modelDisplay;
+}

package/src/web/components/chat/model-thinking-selector.tsx

@@ -0,0 +1,189 @@
+import { useState, useEffect, useRef, type ReactNode } from "react";
+import { Check, Sparkles, Brain } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { EFFORT_OPTIONS, chipLabel } from "./model-thinking-selector-helpers";
+
+interface ModelOption {
+  value: string;
+  label: string;
+}
+
+interface ModelThinkingSelectorProps {
+  model: string | null;
+  effort: string | null;
+  thinking: boolean;
+  onModelChange: (model: string) => void;
+  onEffortChange: (effort: string) => void;
+  onThinkingChange: (enabled: boolean) => void;
+  projectName: string;
+  providerId: string;
+  /** Locked while a turn is streaming (model/effort can't change mid-turn). */
+  disabled?: boolean;
+}
+
+/** Strip the leading "Claude " so the chip stays compact: "Claude Opus 5" → "Opus 5" */
+function shortLabel(label: string): string {
+  return label.replace(/^Claude\s+/i, "");
+}
+
+const DEFAULT_EFFORT = EFFORT_OPTIONS.find((o) => o.default)!.value;
+
+/**
+ * Unified model + thinking picker — one chip, one popup. Mirrors Anthropic's native
+ * picker: model list, effort levels (Extra→SDK "xhigh"), and a thinking on/off toggle.
+ * Desktop → absolute popover; mobile (<md) → bottom sheet with 44px targets.
+ */
+export function ModelThinkingSelector({
+  model,
+  effort,
+  thinking,
+  onModelChange,
+  onEffortChange,
+  onThinkingChange,
+  projectName,
+  providerId,
+  disabled,
+}: ModelThinkingSelectorProps) {
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const isMobile = useIsMobile();
+
+  useEffect(() => {
+    if (!projectName || !providerId) return;
+    api
+      .get<ModelOption[]>(`${projectUrl(projectName)}/chat/providers/${providerId}/models`)
+      .then(setModels)
+      .catch(() => {});
+  }, [projectName, providerId]);
+
+  useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+
+  // Desktop popover: close on click outside (mobile bottom sheet handles its own backdrop).
+  useEffect(() => {
+    if (!open || isMobile) return;
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, isMobile]);
+
+  const current = models.find((m) => m.value === model);
+  const modelDisplay = current ? shortLabel(current.label) : model ? shortLabel(model) : "Model";
+  const effortValue = effort ?? DEFAULT_EFFORT;
+  const showModelList = models.length > 1;
+  const chipText = chipLabel(modelDisplay, effortValue);
+
+  const pick = (fn: () => void) => {
+    fn();
+    if (!isMobile) setOpen(false);
+  };
+
+  const content = (
+    <div className="flex divide-x divide-border">
+      {/* Left column: model list */}
+      {showModelList && (
+        <div className="flex-1 min-w-0 py-1">
+          <SectionLabel>Model</SectionLabel>
+          {models.map((m) => (
+            <OptionRow key={m.value} active={m.value === model} onClick={() => pick(() => onModelChange(m.value))}>
+              <span className="flex-1 truncate">{shortLabel(m.label)}</span>
+              {m.value === model && <Check className="size-4 shrink-0 text-primary" />}
+            </OptionRow>
+          ))}
+        </div>
+      )}
+      {/* Right column: effort + thinking toggle */}
+      <div className="flex-1 min-w-0 py-1">
+        <SectionLabel>Effort</SectionLabel>
+        {EFFORT_OPTIONS.map((o) => (
+          <OptionRow key={o.value} active={o.value === effortValue} onClick={() => pick(() => onEffortChange(o.value))}>
+            <span className="flex-1 truncate">
+              {o.label}
+              {o.default && <span className="ml-2 text-xs text-text-subtle">Default</span>}
+            </span>
+            {o.value === effortValue && <Check className="size-4 shrink-0 text-primary" />}
+          </OptionRow>
+        ))}
+        <Separator />
+        <button
+          type="button"
+          onClick={() => onThinkingChange(!thinking)}
+          className="w-full flex items-center gap-3 px-3 min-h-[44px] text-left text-sm hover:bg-surface-elevated"
+          role="switch"
+          aria-checked={thinking}
+        >
+          <Brain className="size-4 shrink-0" />
+          <span className="flex-1">Thinking</span>
+          <span className={`inline-flex h-5 w-9 items-center rounded-full transition-colors ${thinking ? "bg-primary" : "bg-border"}`}>
+            <span className={`h-4 w-4 rounded-full bg-white transition-transform ${thinking ? "translate-x-4" : "translate-x-0.5"}`} />
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (!disabled) setOpen((v) => !v);
+        }}
+        className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-primary bg-accent-wash border border-accent-wash-border hover:brightness-110 transition-[filter] disabled:opacity-50 disabled:cursor-default"
+        aria-label={`Model ${modelDisplay}, effort ${effortValue}${thinking ? ", thinking on" : ""}`}
+        title={disabled ? "Can't change while running" : chipText}
+      >
+        <Sparkles className="h-3.5 w-3.5 shrink-0" />
+        <span className="max-w-[140px] truncate">{chipText}</span>
+        {thinking && <Brain className="h-3 w-3 shrink-0" />}
+      </button>
+
+      {open && !disabled && (
+        isMobile ? (
+          <BottomSheet open={open} onClose={() => setOpen(false)}>
+            <div className="px-1 pb-2">{content}</div>
+          </BottomSheet>
+        ) : (
+          <div
+            ref={panelRef}
+            role="listbox"
+            aria-label="Model and thinking"
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+            className="absolute bottom-full left-0 mb-1 z-50 w-80 rounded-lg border border-border popover-solid shadow-[var(--shadow-panel)] max-h-[70vh] overflow-y-auto"
+          >
+            {content}
+          </div>
+        )
+      )}
+    </div>
+  );
+}
+
+function SectionLabel({ children }: { children: ReactNode }) {
+  return <div className="px-3 py-1.5 text-xs font-medium text-text-secondary">{children}</div>;
+}
+
+function Separator() {
+  return <div className="my-1 border-t border-border" />;
+}
+
+function OptionRow({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`w-full flex items-center gap-3 px-3 min-h-[44px] text-left text-sm text-text-primary transition-colors hover:bg-surface-elevated ${active ? "bg-surface-elevated" : ""}`}
+    >
+      {children}
+    </button>
+  );
+}

package/src/web/components/settings/ai-settings-section.tsx

@@ -20,6 +20,8 @@ const EFFORT_OPTIONS = [
   { value: "low", label: "Low" },
   { value: "medium", label: "Medium" },
   { value: "high", label: "High" },
+  { value: "xhigh", label: "Extra" },
+  { value: "max", label: "Max" },
 ];
 
 const PERMISSION_MODE_OPTIONS = [

package/src/web/components/settings/proxy-test-section.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/dialog";
 
 const DEFAULT_MESSAGE = "Hello! Reply briefly.";
-const DEFAULT_MODEL = "claude-opus-4-8";
+const DEFAULT_MODEL = "claude-opus-5";
 
 type EndpointFormat = "anthropic" | "openai";
 
@@ -159,10 +159,12 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
           onChange={(e) => setModel(e.target.value)}
           className="h-8 w-full rounded-md border bg-background px-2 text-[11px]"
         >
+          <option value="claude-opus-5">claude-opus-5</option>
           <option value="claude-fable-5">claude-fable-5</option>
           <option value="claude-opus-4-8">claude-opus-4-8</option>
           <option value="claude-opus-4-7">claude-opus-4-7</option>
           <option value="claude-opus-4-6">claude-opus-4-6</option>
+          <option value="claude-sonnet-5">claude-sonnet-5</option>
           <option value="claude-sonnet-4-6">claude-sonnet-4-6</option>
           <option value="claude-haiku-4-5">claude-haiku-4-5</option>
         </select>