@hienlh/ppm 0.13.85 → 0.13.88

package/src/providers/claude-agent-sdk.ts

@@ -284,7 +284,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
       // SDK uses `errors: string[]` array for error details
       const errorsArr = Array.isArray(e.errors) ? (e.errors as string[]).join(" ") : "";
       const msg = errorsArr || String(e.error ?? "");
-      if (msg.includes("429") || msg.toLowerCase().includes("rate limit") || msg.toLowerCase().includes("overloaded") || msg.toLowerCase().includes("hit your limit")) return 429;
+      if (msg.includes("429") || msg.toLowerCase().includes("rate limit") || msg.toLowerCase().includes("overloaded") || /hit your (?:[\w-]+\s+)*limit/i.test(msg)) return 429;
       if (msg.includes("401") || msg.toLowerCase().includes("unauthorized") || msg.toLowerCase().includes("invalid api key")) return 401;
     }
     return null;
@@ -518,6 +518,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
   async listModels(): Promise<ModelOption[]> {
     return [
       { value: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+      { value: "claude-opus-4-8", label: "Claude Opus 4.8" },
       { value: "claude-opus-4-7", label: "Claude Opus 4.7" },
       { value: "claude-opus-4-6", label: "Claude Opus 4.6" },
       { value: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
@@ -848,7 +849,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
         ...(hasMcp && { mcpServers }),
         permissionMode,
         allowDangerouslySkipPermissions: isBypass,
-        ...(providerConfig.model && { model: providerConfig.model }),
+        ...((opts?.model ?? providerConfig.model) && { model: opts?.model ?? providerConfig.model }),
         ...(providerConfig.effort && { effort: providerConfig.effort }),
         maxTurns: providerConfig.max_turns ?? 1000,
         ...(providerConfig.max_budget_usd && { maxBudgetUsd: providerConfig.max_budget_usd }),
@@ -1167,7 +1168,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
             if (textContent && /API Error:\s*401\b.*authentication_error/i.test(textContent)) {
               assistantError = "authentication_failed";
               console.warn(`[sdk] session=${sessionId} detected 401 in assistant text content — treating as auth error`);
-            } else if (textContent && /hit your limit|you've hit your limit/i.test(textContent)) {
+            } else if (textContent && /hit your (?:[\w-]+\s+)*limit/i.test(textContent)) {
               assistantError = "rate_limit";
               console.warn(`[sdk] session=${sessionId} detected quota limit in assistant text content — treating as rate_limit`);
             }
@@ -1448,7 +1449,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
               hint = "\n\nHint: Network connectivity issue. Check your internet connection and firewall/proxy settings.";
             } else if (detailLower.includes("401") || detailLower.includes("unauthorized") || detailLower.includes("invalid api key")) {
               hint = "\n\nHint: Authentication failed. Try re-adding your account in Settings → Accounts.";
-            } else if (detailLower.includes("hit your limit")) {
+            } else if (/hit your (?:[\w-]+\s+)*limit/i.test(detailLower)) {
               hint = "\n\nHint: Account quota exhausted. Will auto-switch on next message if other accounts are available.";
             }
             const fullMsg = sdkDetail ? `${baseMsg}\n${sdkDetail}${hint}` : baseMsg;

package/src/server/ws/chat.ts

@@ -3,10 +3,20 @@ import { providerRegistry } from "../../providers/registry.ts";
 import { resolveProjectPath } from "../helpers/resolve-project.ts";
 import { logSessionEvent } from "../../services/session-log.service.ts";
 import { listSessions as sdkListSessions } from "@anthropic-ai/claude-agent-sdk";
-import { getSessionTitle, incrementSessionUnread, clearSessionUnread } from "../../services/db.service.ts";
+import { getSessionTitle, incrementSessionUnread, clearSessionUnread, getSessionModel, setSessionModel } from "../../services/db.service.ts";
 import type { ChatWsClientMessage, SessionPhase } from "../../types/api.ts";
 import { startWatching, stopWatching, onFileChange } from "../../services/file-watcher.service.ts";
 import { bashOutputSpy } from "../../services/bash-output-spy.ts";
+import { configService } from "../../services/config.service.ts";
+
+/** Resolve the model shown in session_state: per-session override, else provider default. */
+function resolveSessionModel(sessionId: string): string | undefined {
+  const override = getSessionModel(sessionId);
+  if (override) return override;
+  const ai = configService.get("ai");
+  const pid = ai.default_provider ?? "claude";
+  return ai.providers[pid]?.model;
+}
 
 // Broadcast file changes to all WS clients for real-time editor reload
 onFileChange((projectName, path) => {
@@ -42,6 +52,8 @@ interface SessionEntry {
   currentUserMessage?: string;
   streamPromise?: Promise<void>;
   permissionMode?: string;
+  /** Per-session model override; falls back to provider default when undefined */
+  model?: string;
   /** Whether the persistent event consumer loop is running */
   isStreamingActive: boolean;
   /** Active team watchers keyed by team name */
@@ -203,7 +215,7 @@ function startCleanupTimer(sessionId: string): void {
  * First message creates the query; follow-ups push into the provider's
  * message channel. Events from ALL turns flow through this single loop.
  */
-async function startSessionConsumer(sessionId: string, providerId: string, content: string, permissionMode?: string, images?: Array<{ data: string; mediaType: string }>): Promise<void> {
+async function startSessionConsumer(sessionId: string, providerId: string, content: string, permissionMode?: string, images?: Array<{ data: string; mediaType: string }>, model?: string): Promise<void> {
   const entry = activeSessions.get(sessionId);
   if (!entry) {
     console.error(`[chat] session=${sessionId} startSessionConsumer: no entry — aborting`);
@@ -255,7 +267,7 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
       broadcast(sessionId, { type: "phase_changed", phase: "connecting", elapsed });
     }, 5_000);
 
-    for await (const event of chatService.sendMessage(providerId, sessionId, content, { permissionMode, images })) {
+    for await (const event of chatService.sendMessage(providerId, sessionId, content, { permissionMode, images, ...(model && { model }) })) {
       eventCount++;
       const ev = event as any;
       const evType = ev.type ?? "unknown";
@@ -520,6 +532,7 @@ export const chatWebSocket = {
         pendingApproval: existing.pendingApprovalEvent ?? null,
         sessionTitle: session?.title || null,
         compactStatus: existing.compactStatus ?? null,
+        model: resolveSessionModel(sessionId),
       }));
 
       // If actively streaming, send buffered turn events for reconnect sync
@@ -561,6 +574,7 @@ export const chatWebSocket = {
       teamWatchers: new Map(),
       teamNames: new Set(),
       compactStatus: null,
+      model: getSessionModel(sessionId) ?? undefined,
     };
     activeSessions.set(sessionId, newEntry);
     setupClientPing(newEntry, ws);
@@ -573,6 +587,7 @@ export const chatWebSocket = {
       pendingApproval: null,
       sessionTitle: session?.title || null,
       compactStatus: null,
+      model: resolveSessionModel(sessionId),
     }));
 
     // Async: resolve title from SDK if in-memory title is generic (DB title takes priority)
@@ -615,6 +630,7 @@ export const chatWebSocket = {
         providerId: pid, clients: new Set([ws]), projectPath: pp, projectName: pn,
         pingIntervals: new Map(), phase: "idle", turnEvents: [], isStreamingActive: false,
         teamWatchers: new Map(), teamNames: new Set(), compactStatus: null,
+        model: getSessionModel(sessionId) ?? undefined,
       };
       activeSessions.set(sessionId, newEntry);
       setupClientPing(newEntry, ws);
@@ -640,6 +656,7 @@ export const chatWebSocket = {
         pendingApproval: entry.pendingApprovalEvent ?? null,
         sessionTitle: chatService.getSession(sessionId)?.title || null,
         compactStatus: entry.compactStatus ?? null,
+        model: resolveSessionModel(sessionId),
       }));
       if (entry.phase !== "idle") {
         sendTurnEvents(sessionId, ws);
@@ -675,6 +692,11 @@ export const chatWebSocket = {
       if (parsed.permissionMode) {
         entry.permissionMode = parsed.permissionMode;
       }
+      // Store model override — sticky for this session
+      if (parsed.model) {
+        entry.model = parsed.model;
+        setSessionModel(sessionId, parsed.model);
+      }
 
       // Intercept PPM-handled built-in commands (e.g. /skills, /version)
       const content = parsed.content.trim();
@@ -717,10 +739,11 @@ export const chatWebSocket = {
         setPhase(sessionId, "initializing");
 
         const permMode = entry.permissionMode;
+        const msgModel = entry.model;
         const msgImages = parsed.type === "message" ? parsed.images : undefined;
         entry.streamPromise = new Promise<void>((resolve) => {
           setTimeout(() => {
-            startSessionConsumer(sessionId, providerId, parsed.content, permMode, msgImages).then(resolve, resolve);
+            startSessionConsumer(sessionId, providerId, parsed.content, permMode, msgImages, msgModel).then(resolve, resolve);
           }, 0);
         });
       } else {
@@ -737,6 +760,34 @@ export const chatWebSocket = {
         setPhase(sessionId, "thinking");
         console.log(`[chat] session=${sessionId} follow-up pushed to generator`);
       }
+    } else if (parsed.type === "set_model") {
+      // Persist per-session model override. If an idle subprocess is alive,
+      // abort it so the next message recreates the query with the new model
+      // (history preserved via the resume path). No-op if already streaming.
+      if (!parsed.model || typeof parsed.model !== "string") {
+        ws.send(JSON.stringify({ type: "error", message: "model is required" }));
+        return;
+      }
+      entry.model = parsed.model;
+      setSessionModel(sessionId, parsed.model);
+      const provider = providerRegistry.get(providerId);
+      const hasLiveStream = provider?.hasStreamingSession?.(sessionId) ?? false;
+      // Only abort when idle between turns — never interrupt an active turn.
+      // Aborting the idle-but-alive subprocess forces the next message to take
+      // the resume path, recreating the query with the new model.
+      if (hasLiveStream && entry.phase === "idle") {
+        provider?.abortQuery?.(sessionId, "set_model");
+      }
+      logSessionEvent(sessionId, "INFO", `Model switched to ${parsed.model}`);
+      ws.send(JSON.stringify({
+        type: "session_state",
+        sessionId,
+        phase: entry.phase,
+        pendingApproval: entry.pendingApprovalEvent ?? null,
+        sessionTitle: chatService.getSession(sessionId)?.title || null,
+        compactStatus: entry.compactStatus ?? null,
+        model: resolveSessionModel(sessionId),
+      }));
     } else if (parsed.type === "cancel") {
       // Fully teardown streaming session — user must resume to continue
       const provider = providerRegistry.get(providerId);

package/src/services/db.service.ts

@@ -645,6 +645,11 @@ function runMigrations(database: Database): void {
       PRAGMA user_version = 26;
     `);
   }
+
+  if (current < 27) {
+    try { database.exec("ALTER TABLE session_metadata ADD COLUMN model TEXT"); } catch {}
+    database.exec("PRAGMA user_version = 27;");
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -801,6 +806,18 @@ export function deleteSessionMetadata(sessionId: string): void {
   getDb().query("DELETE FROM session_metadata WHERE session_id = ?").run(sessionId);
 }
 
+/** Per-session model override; null when session uses provider default */
+export function getSessionModel(sessionId: string): string | null {
+  const row = getDb().query("SELECT model FROM session_metadata WHERE session_id = ?").get(sessionId) as { model: string | null } | null;
+  return row?.model ?? null;
+}
+
+export function setSessionModel(sessionId: string, model: string): void {
+  getDb().query(
+    "INSERT INTO session_metadata (session_id, model) VALUES (?, ?) ON CONFLICT(session_id) DO UPDATE SET model = excluded.model",
+  ).run(sessionId, model);
+}
+
 // ---------------------------------------------------------------------------
 // Unread tracking
 // ---------------------------------------------------------------------------

package/src/services/supervisor.ts

@@ -25,12 +25,13 @@ import { sdNotify } from "./sd-notify.ts";
 const MAX_RESTARTS = 10;
 const BACKOFF_BASE_MS = 1000;
 const BACKOFF_MAX_MS = 60_000;
+const TUNNEL_COOLDOWN_MS = 600_000;     // 10min cooldown after MAX_RESTARTS before retrying tunnel
 const STABLE_WINDOW_MS = 300_000;       // 5min stable → reset restart counter
 const SERVER_HEALTH_INTERVAL_MS = 30_000;
 const SERVER_HEALTH_FAIL_THRESHOLD = 3;
 const TUNNEL_PROBE_INTERVAL_MS = 30_000;    // 30s — adopted tunnels have no `exited` promise
 const TUNNEL_PROBE_FAIL_THRESHOLD = 3;      // 3 HTTP failures before regenerating (PID check is instant)
-const TUNNEL_URL_REGEX = /https:\/\/[a-z0-9-]+\.trycloudflare\.com/;
+const TUNNEL_URL_REGEX = /https:\/\/(?!api\.)[a-z0-9-]+\.trycloudflare\.com/;
 const UPGRADE_CHECK_INTERVAL_MS = 900_000;  // 15min
 const UPGRADE_SKIP_INITIAL_MS = 300_000;    // 5min delay before first check
 const SELF_REPLACE_TIMEOUT_MS = 30_000;     // 30s to wait for new supervisor
@@ -262,9 +263,12 @@ export async function spawnTunnel(port: number): Promise<void> {
     tunnelRestarts++;
 
     if (tunnelRestarts > MAX_RESTARTS) {
-      log("ERROR", `Tunnel exceeded ${MAX_RESTARTS} URL extraction failures, disabling tunnel`);
+      log("WARN", `Tunnel exceeded ${MAX_RESTARTS} URL extraction failures, cooldown ${TUNNEL_COOLDOWN_MS}ms before retry`);
       updateStatus({ shareUrl: null, tunnelPid: null });
-      return;
+      await Bun.sleep(TUNNEL_COOLDOWN_MS);
+      tunnelRestarts = 0;
+      if (shuttingDown) return;
+      return spawnTunnel(port);
     }
 
     const delay = backoffDelay(tunnelRestarts);
@@ -293,8 +297,11 @@ export async function spawnTunnel(port: number): Promise<void> {
   tunnelRestarts++;
 
   if (tunnelRestarts > MAX_RESTARTS) {
-    log("ERROR", `Tunnel exceeded ${MAX_RESTARTS} restarts, disabling tunnel`);
+    log("WARN", `Tunnel exceeded ${MAX_RESTARTS} restarts, cooldown ${TUNNEL_COOLDOWN_MS}ms before retry`);
     updateStatus({ shareUrl: null, tunnelPid: null });
+    await Bun.sleep(TUNNEL_COOLDOWN_MS);
+    tunnelRestarts = 0;
+    if (!shuttingDown) return spawnTunnel(port);
     return;
   }
 

package/src/services/tunnel.service.ts

@@ -4,7 +4,7 @@ import { existsSync, unlinkSync, readFileSync, writeFileSync, renameSync } from
 import { ensureCloudflared } from "./cloudflared.service.ts";
 import { getPpmDir } from "./ppm-dir.ts";
 
-const TUNNEL_URL_REGEX = /https:\/\/[a-z0-9-]+\.trycloudflare\.com/;
+const TUNNEL_URL_REGEX = /https:\/\/(?!api\.)[a-z0-9-]+\.trycloudflare\.com/;
 const decoder = new TextDecoder();
 
 /** Extract tunnel URL from cloudflared stderr output */

package/src/types/api.ts

@@ -23,8 +23,9 @@ 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 }> }
+  | { type: "message"; content: string; permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }>; model?: string }
   | { type: "cancel" }
+  | { type: "set_model"; model: string }
   | { type: "approval_response"; requestId: string; approved: boolean; reason?: string; data?: unknown }
   | { type: "ready" };
 
@@ -42,7 +43,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 }
+  | { type: "session_state"; sessionId: string; phase: SessionPhase; pendingApproval: { requestId: string; tool: string; input: unknown } | null; sessionTitle: string | null; model?: string }
   | { type: "turn_events"; events: unknown[] }
   | { type: "title_updated"; title: string }
   | { type: "compact_status"; status: "compacting" | "done" }

package/src/types/chat.ts

@@ -2,6 +2,8 @@ export interface SendMessageOpts {
   permissionMode?: import("./config").PermissionMode | string;
   priority?: 'now' | 'next' | 'later';
   images?: Array<{ data: string; mediaType: string }>;
+  /** Per-session model override; falls back to provider config model when absent */
+  model?: string;
 }
 
 export interface AIProvider {
@@ -33,6 +35,8 @@ export interface AIProvider {
   markAsResumed?(sessionId: string): void;
   isAvailable?(): Promise<boolean>;
   listModels?(): Promise<ModelOption[]>;
+  /** True when a live streaming subprocess exists for this session */
+  hasStreamingSession?(sessionId: string): boolean;
 }
 
 export interface ModelOption {
@@ -47,6 +51,8 @@ export interface Session {
   projectName?: string;
   projectPath?: string;
   createdAt: string;
+  /** Per-session model override (e.g. claude-opus-4-8); falls back to provider config default */
+  model?: string;
 }
 
 export interface SessionConfig {

package/src/types/config.ts

@@ -104,7 +104,7 @@ 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-sonnet-4-6", "claude-opus-4-7", "claude-opus-4-6", "claude-haiku-4-5"] as const;
+const VALID_MODELS = ["claude-sonnet-4-6", "claude-opus-4-8", "claude-opus-4-7", "claude-opus-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 */

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

@@ -106,6 +106,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     compactStatus,
     statusMessage,
     sessionTitle,
+    model,
+    setModel,
     sendMessage,
     respondToApproval,
     cancelStreaming,
@@ -516,6 +518,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             onModeChange={setPermissionMode}
             providerId={providerId}
             onProviderChange={!sessionId ? setProviderId : undefined}
+            model={model}
+            onModelChange={setModel}
           />
         )}
       </div>

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

@@ -7,6 +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 type { SlashItem } from "./slash-command-picker";
 import type { FileNode } from "../../../types/project";
 import { useFileStore } from "@/stores/file-store";
@@ -62,6 +63,10 @@ interface MessageInputProps {
   providerId?: string;
   /** Provider change handler — undefined when session is active (locked) */
   onProviderChange?: (providerId: string) => void;
+  /** Current per-session model (null = provider default) */
+  model?: string | null;
+  /** Model change handler — undefined when no active session */
+  onModelChange?: (model: string) => void;
 }
 
 export const MessageInput = memo(function MessageInput({
@@ -86,6 +91,8 @@ export const MessageInput = memo(function MessageInput({
   onModeChange,
   providerId,
   onProviderChange,
+  model,
+  onModelChange,
 }: MessageInputProps) {
   // Uncontrolled textarea: value lives in DOM + ref, not React state.
   // Only `hasText` state triggers re-renders (empty↔non-empty for send button).
@@ -643,6 +650,15 @@ export const MessageInput = memo(function MessageInput({
               projectName={projectName}
             />
           )}
+          {onModelChange && projectName && (
+            <ModelSelector
+              value={model ?? null}
+              onChange={onModelChange}
+              projectName={projectName}
+              providerId={providerId ?? "claude"}
+              disabled={isStreaming}
+            />
+          )}
           {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
         </div>
         {/* Mobile: single row — attach + textarea + mic + send */}
@@ -751,6 +767,15 @@ export const MessageInput = memo(function MessageInput({
                   projectName={projectName}
                 />
               )}
+              {onModelChange && projectName && (
+                <ModelSelector
+                  value={model ?? null}
+                  onChange={onModelChange}
+                  projectName={projectName}
+                  providerId={providerId ?? "claude"}
+                  disabled={isStreaming}
+                />
+              )}
               {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
             </div>
             <div className="flex items-center gap-1">

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

@@ -0,0 +1,138 @@
+import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
+import { Check, Sparkles } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+
+interface ModelOption {
+  value: string;
+  label: string;
+}
+
+interface ModelSelectorProps {
+  value: string | null;
+  onChange: (model: string) => void;
+  projectName: string;
+  providerId: string;
+  /** When true, the chip is shown but not interactive (e.g. while streaming) */
+  disabled?: boolean;
+}
+
+/** Strip the leading "Claude " so the chip stays compact: "Claude Opus 4.8" → "Opus 4.8" */
+function shortLabel(label: string): string {
+  return label.replace(/^Claude\s+/i, "");
+}
+
+/**
+ * Model selector chip + popup — matches ProviderSelector style.
+ * Hidden when only 1 (or no) model is available.
+ * Interactive only when not disabled (model can't change mid-turn).
+ */
+export function ModelSelector({ value, onChange, projectName, providerId, disabled }: ModelSelectorProps) {
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const focusedRef = useRef(0);
+
+  useEffect(() => {
+    if (!projectName || !providerId) return;
+    api.get<ModelOption[]>(`${projectUrl(projectName)}/chat/providers/${providerId}/models`)
+      .then(setModels)
+      .catch(() => {});
+  }, [projectName, providerId]);
+
+  // Close popup if it becomes disabled mid-open
+  useEffect(() => { if (disabled) setOpen(false); }, [disabled]);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) 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]);
+
+  // Focus current on open
+  useEffect(() => {
+    if (open) {
+      focusedRef.current = Math.max(0, models.findIndex((m) => m.value === value));
+    }
+  }, [open, value, models]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Escape") { setOpen(false); return; }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const dir = e.key === "ArrowDown" ? 1 : -1;
+      focusedRef.current = (focusedRef.current + dir + models.length) % models.length;
+      const el = panelRef.current?.querySelector(`[data-idx="${focusedRef.current}"]`) as HTMLElement;
+      el?.focus();
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const m = models[focusedRef.current];
+      if (m) { onChange(m.value); setOpen(false); }
+    }
+  }, [onChange, models]);
+
+  // Hide when ≤1 model
+  if (models.length <= 1) return null;
+
+  const current = models.find((m) => m.value === value);
+  const display = current ? shortLabel(current.label) : (value ?? "Model");
+
+  return (
+    <div className="relative">
+      {/* Chip — same style as ProviderSelector */}
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={(e) => { e.stopPropagation(); if (!disabled) setOpen((v) => !v); }}
+        className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] text-text-subtle hover:text-text-primary hover:bg-surface-elevated transition-colors border border-transparent hover:border-border disabled:opacity-50 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:border-transparent disabled:hover:text-text-subtle"
+        aria-label={`Model: ${current?.label ?? value ?? "default"}`}
+        title={disabled ? "Model can't change while running" : current?.label ?? undefined}
+      >
+        <Sparkles className="h-3.5 w-3.5 shrink-0" />
+        <span className="max-w-[90px] truncate">{display}</span>
+      </button>
+
+      {/* Popup panel */}
+      {open && !disabled && (
+        <div
+          ref={panelRef}
+          role="listbox"
+          aria-label="Models"
+          onKeyDown={handleKeyDown}
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+          className="absolute bottom-full left-0 mb-1 z-50 w-56 rounded-lg border border-border bg-surface shadow-lg"
+        >
+          <div className="px-3 py-2 border-b border-border">
+            <span className="text-xs font-medium text-text-secondary">Model</span>
+          </div>
+          <div className="py-1">
+            {models.map((m, idx) => {
+              const isActive = m.value === value;
+              return (
+                <button
+                  key={m.value}
+                  data-idx={idx}
+                  role="option"
+                  aria-selected={isActive}
+                  tabIndex={0}
+                  onClick={() => { onChange(m.value); setOpen(false); }}
+                  className={`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-elevated focus:bg-surface-elevated focus:outline-none ${isActive ? "bg-surface-elevated" : ""}`}
+                >
+                  <span className="flex-1 text-sm font-medium text-text-primary">{m.label}</span>
+                  {isActive && <Check className="size-4 shrink-0 text-primary" />}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -160,6 +160,7 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
           className="h-8 w-full rounded-md border bg-background px-2 text-[11px]"
         >
           <option value="claude-sonnet-4-6">claude-sonnet-4-6</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-haiku-4-5-20251001">claude-haiku-4-5</option>
           <option value="claude-opus-4-6">claude-opus-4-6</option>

package/src/web/hooks/use-chat.ts

@@ -58,6 +58,10 @@ interface UseChatReturn {
   compactStatus: "compacting" | null;
   statusMessage: string | null;
   sessionTitle: string | null;
+  /** Per-session model override (null = provider default) */
+  model: string | null;
+  /** Switch the per-session model (persists + recreates query on next message) */
+  setModel: (model: string) => void;
   /** Team activity state from WS events */
   teamActivity: TeamActivityState;
   /** All team messages (ref-backed, updated live) */
@@ -99,6 +103,8 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
   const [sessionTitle, setSessionTitle] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(false);
+  const [model, setModelState] = useState<string | null>(null);
+  const modelRef = useRef<string | null>(null);
   const streamingContentRef = useRef("");
   const streamingEventsRef = useRef<ChatEvent[]>([]);
   const bashOutputRef = useRef<Map<string, BashPartialEntry>>(new Map());
@@ -540,6 +546,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
       setPhase(p);
       phaseRef.current = p;
       if (state.sessionTitle) setSessionTitle(state.sessionTitle);
+      if (state.model) { setModelState(state.model); modelRef.current = state.model; }
       if (state.pendingApproval) {
         setPendingApproval({
           requestId: state.pendingApproval.requestId,
@@ -737,11 +744,21 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         permissionMode: opts?.permissionMode,
         priority: opts?.priority,
         images: opts?.images,
+        ...(modelRef.current && { model: modelRef.current }),
       }));
     },
     [send],
   );
 
+  const setModel = useCallback(
+    (nextModel: string) => {
+      setModelState(nextModel); // optimistic
+      modelRef.current = nextModel;
+      send(JSON.stringify({ type: "set_model", model: nextModel }));
+    },
+    [send],
+  );
+
   const respondToApproval = useCallback(
     (requestId: string, approved: boolean, data?: unknown) => {
       send(
@@ -879,6 +896,8 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     compactStatus,
     statusMessage,
     sessionTitle,
+    model,
+    setModel,
     teamActivity,
     teamMessages,
     markTeamRead,