@liguoshuai/pi-web-chat 1.7.6 → 1.8.0

package/docs/CHANGELOG.md

@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.8.0] - 2026-07-26
+
+### Added
+- **默认模型确认与展示体系 (Default Model Identification & Visual Indicators)**：
+  - 后端 `/api/config` 自动读取并整合项目配置 `<cwd>/.pi/settings.json` 与全局配置 `~/.pi/agent/settings.json` 中的 `defaultProvider`、`defaultModel` 及 `defaultThinkingLevel`。
+  - 顶部模型胶囊 (Model Pill) 自动识别并展示 `★ 默认` 或 `★ 项目默认` 徽章，悬停提示详细配置来源。
+  - 新建对话欢迎面板 (Empty State) 增加当前会话模型展示卡片，直观呈现模型名称、默认状态及特性标签。
+- **深度思考 (Thinking / Reasoning) 联动选择器**：
+  - 当模型支持推理思考（`reasoning: true`）时，顶栏自动浮现 `🧠 High` / `🧠 Medium` 等深度思考胶囊。
+  - 支持快捷弹出思考深度菜单（Off / Minimal / Low / Medium / High / Max），即时调节思考预算；非思考模型自动隐藏。
+- **一键持久化设为默认模型 (Set as Default Model)**：
+  - 新增后端接口 `POST /api/set-default-model`，模型列表项右侧支持一键将当前选中的模型设为全局/项目默认模型。
+- **模型快捷置顶与特性标签 (Pinned, Recents & Capabilities)**：
+  - 模型下拉面板置顶呈现 `🌟 默认与常用` 分组，自动基于 `localStorage` 缓存并置顶最近使用的模型。
+  - 模型项展示 `🧠 Thinking`（深度思考）、`👁️ Vision`（多模态识图）、`★ 默认` 等能力标签。
+- **全键盘极客操作与快捷键 (Keyboard Navigation & Shortcut)**：
+  - 支持全局快捷键 `Ctrl + M` / `Cmd + M` 快速呼出/收起模型选择面板。
+  - 搜索框支持 `↑` / `↓` 移动高亮、`Enter` 快速切换、`Esc` 退出。
+- **会话流模型切换历史标记**：
+  - 会话中途切换模型时，在消息流中自动插入系统分割通知（`── 已切换模型至 Provider / ModelName ──`）。
+
+---
+
 ## [1.7.6] - 2026-07-26
 
 ### Security

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",

package/public/app.js

@@ -37,6 +37,8 @@ const state = {
   streaming: false,
   models: [],
   currentModel: null,
+  defaultModel: null,
+  recentModels: [],
   thinkingLevel: "medium",
   sessionId: null,
   isBackfilling: false,
@@ -81,9 +83,38 @@ function setCwd(newCwd) {
   refreshSessions();
 }
 
+function loadRecentModels() {
+  try {
+    const raw = localStorage.getItem("pi_recent_models");
+    if (raw) {
+      state.recentModels = JSON.parse(raw);
+    }
+  } catch {
+    state.recentModels = [];
+  }
+}
+
+function saveRecentModel(model) {
+  if (!model || !model.id) return;
+  loadRecentModels();
+  const filtered = state.recentModels.filter(m => !(m.id === model.id && m.provider === model.provider));
+  filtered.unshift({
+    id: model.id,
+    name: model.name || model.id,
+    provider: model.provider,
+    reasoning: model.reasoning,
+    input: model.input,
+  });
+  state.recentModels = filtered.slice(0, 4);
+  try {
+    localStorage.setItem("pi_recent_models", JSON.stringify(state.recentModels));
+  } catch {}
+}
+
 async function loadServerConfig() {
   try {
-    const res = await fetch(`${API}/api/config`);
+    const cwdParam = state.cwd ? `?cwd=${encodeURIComponent(state.cwd)}` : "";
+    const res = await fetch(`${API}/api/config${cwdParam}`);
     const data = await res.json();
     if (data.home) state.homeDir = data.home;
     if (data.serverCwd) state.serverCwd = data.serverCwd;
@@ -92,11 +123,20 @@ async function loadServerConfig() {
       const verEl = $("#appVersion");
       if (verEl) verEl.textContent = `v${data.version}`;
     }
+    if (data.defaultModel) {
+      state.defaultModel = data.defaultModel;
+      if (data.defaultModel.thinkingLevel && !state.thinkingLevel) {
+        state.thinkingLevel = data.defaultModel.thinkingLevel;
+      }
+    }
   } catch {}
   if (!state.cwd) {
     state.cwd = localStorage.getItem("pi_cwd") || state.serverCwd || state.homeDir || "";
   }
+  loadRecentModels();
   updateCwdDisplay();
+  renderModelPill();
+  updateEmptyStateModelInfo();
 }
 
 async function openCwdModal() {
@@ -1149,16 +1189,36 @@ function handlePiMessage(obj) {
     else if (obj.command === "get_available_models" && obj.success) updateModels(obj.data.models || []);
     else if (obj.command === "set_model") {
       if (obj.success) {
+        const prev = state.currentModel;
         if (obj.data) state.currentModel = obj.data;
+        saveRecentModel(state.currentModel);
         renderModelPill();
         renderModelMenu();
-        showToast(`已切换模型: ${state.currentModel?.name || state.currentModel?.id || ""}`);
+        const modelLabel = state.currentModel?.name || state.currentModel?.id || "";
+        showToast(`已切换模型: ${modelLabel}`);
+        if (prev && (prev.id !== state.currentModel?.id || prev.provider !== state.currentModel?.provider)) {
+          appendSystemNotice(`已切换模型至 ${state.currentModel?.provider ? state.currentModel.provider + " / " : ""}${modelLabel}`);
+        }
         sendWs({ type: "get_state" });
       } else {
         showToast(`切换模型失败: ${obj.error || "未知错误"}`);
         renderModelPill();
       }
     }
+    else if (obj.command === "set_thinking_level") {
+      if (obj.success) {
+        showToast(`已更新思考深度: ${formatThinkingLevel(state.thinkingLevel)}`);
+      } else {
+        showToast(`设置思考深度失败: ${obj.error || "未知错误"}`);
+      }
+    }
+    else if (obj.command === "cycle_thinking_level" && obj.success) {
+      if (obj.data?.thinkingLevel) {
+        state.thinkingLevel = obj.data.thinkingLevel;
+        renderThinkingPill();
+        updateEmptyStateModelInfo();
+      }
+    }
     else if (obj.command === "switch_session" && obj.success) {
       // ask pi for current state so we can get session id, name
       sendWs({ type: "get_state" });
@@ -1181,8 +1241,10 @@ function handlePiMessage(obj) {
     case "model_select":
       if (obj.model) {
         state.currentModel = obj.model;
+        saveRecentModel(obj.model);
         renderModelPill();
         renderModelMenu();
+        updateEmptyStateModelInfo();
       }
       break;
     case "remote_user_prompt":
@@ -1399,8 +1461,16 @@ function handleEntries(entries, leafId) { /* no-op: history rendered via REST */
 function updateState(d) {
   if (d?.sessionFile) state.currentSessionFile = d.sessionFile;
   if (d?.sessionId) state.sessionId = d.sessionId;
-  if (d?.model) { state.currentModel = d.model; renderModelPill(); }
-  if (d?.thinkingLevel) state.thinkingLevel = d.thinkingLevel;
+  if (d?.model) {
+    state.currentModel = d.model;
+    saveRecentModel(d.model);
+    renderModelPill();
+  }
+  if (d?.thinkingLevel) {
+    state.thinkingLevel = d.thinkingLevel;
+    renderThinkingPill();
+  }
+  updateEmptyStateModelInfo();
   $("#topSessionName").textContent = d?.sessionName || (d?.sessionFile ? baseName(d.sessionFile) : "新对话");
 
   // Sync streaming state upon state updates (e.g. after reconnect)
@@ -1426,10 +1496,41 @@ function updateModels(models) {
   renderModelPill();
 }
 
+function formatThinkingLevel(lvl) {
+  if (!lvl) return "Medium";
+  return lvl.charAt(0).toUpperCase() + lvl.slice(1);
+}
+
+function isCurrentModelDefault() {
+  if (!state.defaultModel || !state.currentModel) return false;
+  const defId = state.defaultModel.id;
+  const curId = state.currentModel.id;
+  if (!defId || !curId) return false;
+  if (defId !== curId) return false;
+  if (state.defaultModel.provider && state.currentModel.provider) {
+    return state.defaultModel.provider === state.currentModel.provider;
+  }
+  return true;
+}
+
 function renderModelPill() {
   const m = state.currentModel;
   const pill = $("#modelPill");
-  if (!m) { pill.textContent = "选择模型"; return; }
+  const nameEl = $("#modelPillName");
+  const badgeEl = $("#modelPillBadge");
+  if (!pill) return;
+
+  pill.disabled = state.streaming;
+
+  if (!m) {
+    if (nameEl) nameEl.textContent = "选择模型";
+    if (badgeEl) badgeEl.style.display = "none";
+    pill.title = "点击选择模型 (快捷键: Ctrl+M)";
+    renderThinkingPill();
+    updateEmptyStateModelInfo();
+    return;
+  }
+
   const provider = m.provider || "?";
   let name = m.name || m.id;
   if (state.models && state.models.length > 0) {
@@ -1439,11 +1540,203 @@ function renderModelPill() {
       name = found.name;
     }
   }
-  pill.textContent = `${provider} / ${name}`;
-  pill.title = `当前模型: ${provider} / ${name} (${m.id})`;
+
+  if (nameEl) nameEl.textContent = `${provider} / ${name}`;
+
+  const isDefault = isCurrentModelDefault();
+  if (badgeEl) {
+    if (isDefault) {
+      badgeEl.textContent = state.defaultModel?.source === "project" ? "★ 项目默认" : "★ 默认";
+      badgeEl.style.display = "inline-block";
+    } else {
+      badgeEl.style.display = "none";
+    }
+  }
+
+  if (state.streaming) {
+    pill.title = "生成中暂不可切换模型";
+  } else if (isDefault) {
+    pill.title = `当前模型: ${provider} / ${name} (默认模型 · ${state.defaultModel?.source === 'project' ? '来自项目配置' : '来自全局配置'})`;
+  } else {
+    const defDesc = state.defaultModel?.id ? ` · 默认: ${state.defaultModel.provider || ''}/${state.defaultModel.id}` : "";
+    pill.title = `当前模型: ${provider} / ${name} (${m.id}${defDesc})`;
+  }
+
+  renderThinkingPill();
+  updateEmptyStateModelInfo();
+}
+
+function renderThinkingPill() {
+  const pill = $("#thinkingPill");
+  const labelEl = $("#thinkingPillLabel");
+  if (!pill) return;
+
+  const m = state.currentModel;
+  let supportsThinking = false;
+  if (m) {
+    if (m.reasoning === true) supportsThinking = true;
+    else if (state.models && state.models.length > 0) {
+      const found = state.models.find(item => item.id === m.id && item.provider === m.provider) ||
+                    state.models.find(item => item.id === m.id);
+      if (found && found.reasoning === true) supportsThinking = true;
+    }
+  }
+
+  if (!supportsThinking) {
+    pill.style.display = "none";
+    const menu = $("#thinkingMenu");
+    if (menu) menu.classList.remove("open");
+    return;
+  }
+
+  pill.style.display = "inline-flex";
+  pill.disabled = state.streaming;
+  if (labelEl) {
+    labelEl.textContent = formatThinkingLevel(state.thinkingLevel);
+  }
+  pill.title = `深度思考: ${formatThinkingLevel(state.thinkingLevel)} (点击调整)`;
+}
+
+const THINKING_LEVELS = [
+  { level: "off", label: "Off", desc: "关闭思考" },
+  { level: "minimal", label: "Minimal", desc: "最小思考" },
+  { level: "low", label: "Low", desc: "轻度思考" },
+  { level: "medium", label: "Medium", desc: "中等思考 (推荐)" },
+  { level: "high", label: "High", desc: "深度思考" },
+  { level: "xhigh", label: "Extra High", desc: "超高思考" },
+  { level: "max", label: "Max", desc: "最大思考深度" },
+];
+
+function renderThinkingMenu() {
+  const menu = $("#thinkingMenu");
+  if (!menu) return;
+  menu.innerHTML = "";
+
+  const titleRow = el("div", { class: "thinking-menu-title" }, [
+    el("span", { text: "🧠 深度思考设置" }),
+    el("span", { text: "Reasoning", style: "font-size: 10px; font-weight: normal;" })
+  ]);
+  menu.appendChild(titleRow);
+
+  const curLevel = (state.thinkingLevel || "medium").toLowerCase();
+  for (const item of THINKING_LEVELS) {
+    const active = item.level === curLevel;
+    const opt = el("div", {
+      class: "thinking-opt" + (active ? " active" : ""),
+      onclick: () => {
+        state.thinkingLevel = item.level;
+        sendWs({ type: "set_thinking_level", level: item.level });
+        renderThinkingPill();
+        updateEmptyStateModelInfo();
+        showToast(`已设置思考级别: ${item.label}`);
+        menu.classList.remove("open");
+      }
+    }, [
+      el("span", { text: (active ? "✓ " : "") + item.label }),
+      el("span", { class: "level-desc", text: item.desc })
+    ]);
+    menu.appendChild(opt);
+  }
+}
+
+function updateEmptyStateModelInfo() {
+  const nameEl = $("#emptyModelName");
+  const badgeEl = $("#emptyModelBadge");
+  const featsEl = $("#emptyModelFeatures");
+  if (!nameEl) return;
+
+  const m = state.currentModel;
+  if (!m) {
+    nameEl.textContent = "未选择模型";
+    if (badgeEl) badgeEl.style.display = "none";
+    if (featsEl) featsEl.innerHTML = "";
+    return;
+  }
+
+  const provider = m.provider || "?";
+  let name = m.name || m.id;
+  let supportsThinking = m.reasoning === true;
+  let supportsVision = Array.isArray(m.input) && m.input.includes("image");
+
+  if (state.models && state.models.length > 0) {
+    const found = state.models.find(item => item.id === m.id && item.provider === m.provider) ||
+                  state.models.find(item => item.id === m.id);
+    if (found) {
+      if (found.name) name = found.name;
+      if (found.reasoning === true) supportsThinking = true;
+      if (Array.isArray(found.input) && found.input.includes("image")) supportsVision = true;
+    }
+  }
+
+  nameEl.textContent = `${provider} / ${name}`;
+
+  const isDefault = isCurrentModelDefault();
+  if (badgeEl) {
+    if (isDefault) {
+      badgeEl.textContent = state.defaultModel?.source === "project" ? "★ 项目默认" : "★ 默认模型";
+      badgeEl.style.display = "inline-block";
+    } else {
+      badgeEl.style.display = "none";
+    }
+  }
+
+  if (featsEl) {
+    featsEl.innerHTML = "";
+    if (supportsThinking) {
+      featsEl.appendChild(el("span", {
+        class: "badge-feature",
+        text: `🧠 思考: ${formatThinkingLevel(state.thinkingLevel)}`
+      }));
+    }
+    if (supportsVision) {
+      featsEl.appendChild(el("span", {
+        class: "badge-feature",
+        text: "👁️ 支持多模态识图"
+      }));
+    }
+    if (m.id && m.name && m.id !== m.name) {
+      featsEl.appendChild(el("span", {
+        style: "font-family: monospace; font-size: 11px;",
+        text: m.id
+      }));
+    }
+  }
+}
+
+async function setDefaultModel(m) {
+  try {
+    const res = await fetch(`${API}/api/set-default-model`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        provider: m.provider,
+        modelId: m.id,
+        cwd: state.cwd,
+        scope: "global",
+      }),
+    });
+    const data = await res.json();
+    if (data.ok) {
+      state.defaultModel = {
+        provider: m.provider,
+        id: m.id,
+        thinkingLevel: data.defaultThinkingLevel || state.thinkingLevel,
+        source: data.scope || "global",
+      };
+      renderModelPill();
+      renderModelMenu();
+      updateEmptyStateModelInfo();
+      showToast(`已将 ${m.name || m.id} 设为全局默认模型`);
+    } else {
+      showToast(`设为默认模型失败: ${data.error || "未知错误"}`);
+    }
+  } catch (e) {
+    showToast(`设置失败: ${e.message}`);
+  }
 }
 
 let modelSearchQuery = "";
+let focusedModelIndex = -1;
 
 function renderModelMenu() {
   const menu = $("#modelMenu");
@@ -1468,17 +1761,36 @@ function renderModelMenu() {
     searchInput.addEventListener("click", (e) => e.stopPropagation());
     searchInput.addEventListener("input", (e) => {
       modelSearchQuery = e.target.value;
+      focusedModelIndex = -1;
       renderModelList(listContainer);
       const clearBtn = $(".btn-clear-model-search", searchWrap);
       if (clearBtn) clearBtn.style.display = modelSearchQuery ? "block" : "none";
     });
     searchInput.addEventListener("keydown", (e) => {
+      const items = listContainer._items || [];
       if (e.key === "Escape") {
         menu.classList.remove("open");
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (items.length === 0) return;
+        focusedModelIndex = (focusedModelIndex + 1) % items.length;
+        items.forEach((it, idx) => it.element.classList.toggle("focused", idx === focusedModelIndex));
+        if (items[focusedModelIndex]) {
+          items[focusedModelIndex].element.scrollIntoView({ block: "nearest" });
+        }
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (items.length === 0) return;
+        focusedModelIndex = (focusedModelIndex - 1 + items.length) % items.length;
+        items.forEach((it, idx) => it.element.classList.toggle("focused", idx === focusedModelIndex));
+        if (items[focusedModelIndex]) {
+          items[focusedModelIndex].element.scrollIntoView({ block: "nearest" });
+        }
       } else if (e.key === "Enter") {
-        const visibleOpts = listContainer.querySelectorAll(".opt");
-        if (visibleOpts.length > 0) {
-          visibleOpts[0].click();
+        if (focusedModelIndex >= 0 && items[focusedModelIndex]) {
+          items[focusedModelIndex].element.click();
+        } else if (items.length > 0) {
+          items[0].element.click();
         }
       }
     });
@@ -1494,6 +1806,7 @@ function renderModelMenu() {
         modelSearchQuery = "";
         searchInput.value = "";
         clearBtn.style.display = "none";
+        focusedModelIndex = -1;
         searchInput.focus();
         renderModelList(listContainer);
       }
@@ -1525,9 +1838,88 @@ function renderModelList(listContainer) {
 
   if (filteredModels.length === 0) {
     listContainer.appendChild(el("div", { class: "model-empty", text: "未找到匹配的模型" }));
+    listContainer._items = [];
     return;
   }
 
+  const allRenderedItems = [];
+
+  function renderModelOption(m, isDefaultBadge = false) {
+    const active = state.currentModel && m.id === state.currentModel.id && m.provider === state.currentModel.provider;
+    const isDef = state.defaultModel && m.id === state.defaultModel.id && (!state.defaultModel.provider || m.provider === state.defaultModel.provider);
+
+    const featureBadges = [];
+    if (m.reasoning) featureBadges.push(el("span", { class: "badge-feature", text: "🧠 Thinking" }));
+    if (Array.isArray(m.input) && m.input.includes("image")) featureBadges.push(el("span", { class: "badge-feature", text: "👁️ Vision" }));
+    if (isDef || isDefaultBadge) featureBadges.push(el("span", { class: "badge-default-tag", text: "★ 默认" }));
+
+    const setDefaultBtn = isDef ? null : el("button", {
+      class: "btn-set-default",
+      type: "button",
+      title: "将此模型设为全局默认模型",
+      text: "★ 设为默认",
+      onclick: (e) => {
+        e.stopPropagation();
+        setDefaultModel(m);
+      }
+    });
+
+    const opt = el("div", {
+      class: "opt" + (active ? " active" : ""),
+      onclick: () => {
+        const prev = state.currentModel;
+        $("#modelPillName").textContent = "切换中…";
+        sendWs({ type: "set_model", provider: m.provider, modelId: m.id });
+        saveRecentModel(m);
+        $("#modelMenu").classList.remove("open");
+        if (prev && (prev.id !== m.id || prev.provider !== m.provider)) {
+          appendSystemNotice(`已切换模型至 ${m.provider ? m.provider + " / " : ""}${m.name || m.id}`);
+        }
+      },
+    }, [
+      el("span", { class: "check", html: active ? "✓" : "" }),
+      el("div", { class: "model-main" }, [
+        el("div", { class: "model-name-row" }, [
+          el("span", { class: "model-name", text: `${m.name || m.id}` }),
+          ...featureBadges,
+        ]),
+        (m.name && m.id && m.name !== m.id) ? el("span", { class: "model-id-sub", text: `${m.provider ? m.provider + " · " : ""}${m.id}` }) : null,
+      ]),
+      setDefaultBtn,
+    ]);
+
+    allRenderedItems.push({ element: opt, model: m });
+    return opt;
+  }
+
+  // If no search query, show "Default & Recent" section first
+  if (!q) {
+    loadRecentModels();
+    const pinGroup = [];
+
+    // Find default model if exists
+    if (state.defaultModel?.id) {
+      const defM = state.models.find(m => m.id === state.defaultModel.id && (!state.defaultModel.provider || m.provider === state.defaultModel.provider));
+      if (defM) pinGroup.push({ model: defM, isDefault: true });
+    }
+
+    // Add recent models (excluding default)
+    for (const rm of state.recentModels) {
+      const full = state.models.find(m => m.id === rm.id && m.provider === rm.provider) || rm;
+      if (!pinGroup.some(item => item.model.id === full.id && item.model.provider === full.provider)) {
+        pinGroup.push({ model: full, isDefault: false });
+      }
+    }
+
+    if (pinGroup.length > 0) {
+      listContainer.appendChild(el("div", { class: "group-label", text: "🌟 默认与常用" }));
+      for (const item of pinGroup) {
+        listContainer.appendChild(renderModelOption(item.model, item.isDefault));
+      }
+    }
+  }
+
+  // Group rest by provider
   const groups = {};
   for (const m of filteredModels) {
     const p = m.provider || "other";
@@ -1537,21 +1929,48 @@ function renderModelList(listContainer) {
   for (const [provider, items] of Object.entries(groups).sort()) {
     listContainer.appendChild(el("div", { class: "group-label", text: provider }));
     for (const m of items) {
-      const active = state.currentModel && m.id === state.currentModel.id && m.provider === state.currentModel.provider;
-      listContainer.appendChild(el("div", {
-        class: "opt" + (active ? " active" : ""),
-        onclick: () => {
-          $("#modelPill").textContent = "切换中…";
-          sendWs({ type: "set_model", provider: m.provider, modelId: m.id });
-          $("#modelMenu").classList.remove("open");
-        },
-      }, [
-        el("span", { class: "check", html: active ? "✓ " : "" }),
-        el("span", { class: "model-name", text: `${m.name || m.id}` }),
-        (m.name && m.id && m.name !== m.id) ? el("span", { class: "model-id-sub", text: m.id }) : null,
-      ]));
+      listContainer.appendChild(renderModelOption(m));
     }
   }
+
+  listContainer._items = allRenderedItems;
+}
+
+function toggleModelMenu() {
+  if (state.streaming) {
+    showToast("生成中暂不可切换模型");
+    return;
+  }
+  sendWs({ type: "get_available_models" });
+  const menu = $("#modelMenu");
+  const thinkingMenu = $("#thinkingMenu");
+  if (thinkingMenu) thinkingMenu.classList.remove("open");
+
+  const willOpen = !menu.classList.contains("open");
+  menu.classList.toggle("open");
+  if (willOpen) {
+    focusedModelIndex = -1;
+    setTimeout(() => {
+      const input = $("#modelSearchInput");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+    }, 50);
+  }
+}
+
+function toggleThinkingMenu() {
+  if (state.streaming) {
+    showToast("生成中暂不可调整思考等级");
+    return;
+  }
+  const modelMenu = $("#modelMenu");
+  if (modelMenu) modelMenu.classList.remove("open");
+
+  const menu = $("#thinkingMenu");
+  renderThinkingMenu();
+  menu.classList.toggle("open");
 }
 
 function baseName(p) {
@@ -1598,6 +2017,7 @@ function updateComposerUI() {
 
 function setComposerAborting(yes) {
   updateComposerUI();
+  renderModelPill();
 }
 
 function submitSteer() {
@@ -1734,26 +2154,47 @@ async function init() {
     }
   });
 
-  // model pill / menu
-  $("#modelPill").addEventListener("click", (e) => {
-    e.stopPropagation();
-    sendWs({ type: "get_available_models" });
-    const menu = $("#modelMenu");
-    const willOpen = !menu.classList.contains("open");
-    menu.classList.toggle("open");
-    if (willOpen) {
-      setTimeout(() => {
-        const input = $("#modelSearchInput");
-        if (input) {
-          input.focus();
-          input.select();
-        }
-      }, 50);
+  // model pill / thinking pill / menu interactions
+  const modelPillEl = $("#modelPill");
+  if (modelPillEl) {
+    modelPillEl.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleModelMenu();
+    });
+  }
+
+  const thinkingPillEl = $("#thinkingPill");
+  if (thinkingPillEl) {
+    thinkingPillEl.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleThinkingMenu();
+    });
+  }
+
+  const emptyChangeModelBtn = $("#emptyChangeModelBtn");
+  if (emptyChangeModelBtn) {
+    emptyChangeModelBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleModelMenu();
+    });
+  }
+
+  // Keyboard shortcut: Ctrl+M / Cmd+M to toggle model selector
+  window.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "m") {
+      e.preventDefault();
+      toggleModelMenu();
     }
   });
+
   document.addEventListener("click", (e) => {
-    if (!e.target.closest("#modelMenu") && !e.target.closest("#modelPill")) {
-      $("#modelMenu").classList.remove("open");
+    if (!e.target.closest("#modelMenu") && !e.target.closest("#modelPill") && !e.target.closest("#emptyChangeModelBtn")) {
+      const m = $("#modelMenu");
+      if (m) m.classList.remove("open");
+    }
+    if (!e.target.closest("#thinkingMenu") && !e.target.closest("#thinkingPill")) {
+      const tm = $("#thinkingMenu");
+      if (tm) tm.classList.remove("open");
     }
   });
 

package/public/index.html

@@ -48,10 +48,18 @@
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px; vertical-align:-2px;"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
           <span id="cwdPill">~</span>
         </button>
-        <div style="position:relative;">
-          <button class="model-pill" id="modelPill">选择模型</button>
+        <div class="model-pill-container" id="modelPillContainer">
+          <button class="model-pill" id="modelPill" title="点击切换模型 (快捷键: Ctrl+M)">
+            <span class="model-pill-name" id="modelPillName">选择模型</span>
+            <span class="model-pill-badge" id="modelPillBadge" style="display:none;">★ 默认</span>
+          </button>
+          <button class="thinking-pill" id="thinkingPill" style="display:none;" title="点击调整深度思考 / 推理级别">
+            <span class="thinking-icon">🧠</span>
+            <span class="thinking-label" id="thinkingPillLabel">High</span>
+          </button>
         </div>
         <div class="model-menu" id="modelMenu"></div>
+        <div class="thinking-menu" id="thinkingMenu"></div>
       </div>
 
       <div class="chat" id="chat">
@@ -59,6 +67,20 @@
           <div class="logo">π</div>
           <h1>有什么可以帮你？</h1>
           <p>我是 <strong>pi</strong> 编程助手，可以读写文件、运行命令、改代码。在下面输入你的需求，或选择左侧的历史会话继续。</p>
+          <div class="empty-model-banner" id="emptyModelBanner">
+            <div class="empty-model-left">
+              <span class="empty-model-icon">🤖</span>
+              <div class="empty-model-info">
+                <div class="empty-model-title-row">
+                  <span class="empty-model-label">当前模型：</span>
+                  <span class="empty-model-name" id="emptyModelName">加载中…</span>
+                  <span class="badge-default" id="emptyModelBadge" style="display:none;">★ 默认模型</span>
+                </div>
+                <div class="empty-model-features" id="emptyModelFeatures"></div>
+              </div>
+            </div>
+            <button class="btn-change-model" id="emptyChangeModelBtn">切换模型</button>
+          </div>
           <div class="suggestions">
             <div class="chip" data-prompt="列出当前目录下的所有文件，并告诉我这是什么项目">列出当前目录文件</div>
             <div class="chip" data-prompt="阅读 README 或主要源文件，然后用一段话总结这个项目是做什么的">总结这个项目</div>

package/public/style.css

@@ -226,6 +226,14 @@ body {
   color: var(--text);
 }
 
+.model-pill-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
 .model-pill {
   font-size: 12px;
   color: var(--text-muted);
@@ -235,10 +243,52 @@ body {
   cursor: pointer;
   background: var(--bg-input);
   white-space: nowrap;
-  transition: color 0.15s, border-color 0.15s;
+  transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.model-pill:hover:not(:disabled) { color: var(--text); border-color: var(--text-dim); }
+.model-pill:disabled { opacity: 0.55; cursor: not-allowed; }
+
+.model-pill-name {
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-pill-badge {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.18);
+  color: #60a5fa;
+  font-weight: 600;
+  line-height: 1.3;
+  flex-shrink: 0;
+}
+
+.thinking-pill {
+  font-size: 12px;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 6px 10px;
+  cursor: pointer;
+  background: var(--bg-input);
+  white-space: nowrap;
+  transition: all 0.15s ease;
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
-.model-pill:hover { color: var(--text); border-color: var(--text-dim); }
+.thinking-pill:hover:not(:disabled) { color: var(--text); border-color: var(--accent); background: var(--bg-hover); }
+.thinking-pill:disabled { opacity: 0.55; cursor: not-allowed; }
+.thinking-pill .thinking-icon { font-size: 13px; line-height: 1; }
+.thinking-pill .thinking-label { font-weight: 500; }
 
 .btn-ghost {
   background: transparent;
@@ -530,6 +580,93 @@ body {
 .empty-state .logo { font-size: 48px; font-weight: bold; color: var(--accent); }
 .empty-state h1 { font-size: 32px; font-weight: 500; color: var(--text); }
 .empty-state p { font-size: 15px; max-width: 480px; line-height: 1.6; }
+
+/* Empty state model banner */
+.empty-model-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--bg-sidebar);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin: 10px 0 16px;
+  width: 100%;
+  max-width: 520px;
+  box-sizing: border-box;
+  gap: 12px;
+  text-align: left;
+}
+.empty-model-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.empty-model-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+  line-height: 1;
+}
+.empty-model-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.empty-model-title-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text);
+}
+.empty-model-label {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+.empty-model-name {
+  font-weight: 600;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.badge-default {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.18);
+  color: #60a5fa;
+  font-weight: 600;
+  line-height: 1.3;
+  flex-shrink: 0;
+}
+.empty-model-features {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-dim);
+  flex-wrap: wrap;
+}
+.btn-change-model {
+  padding: 6px 12px;
+  font-size: 12px;
+  border-radius: 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.btn-change-model:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent);
+}
+
 .suggestions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
 .suggestions .chip {
   border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px;
@@ -799,7 +936,7 @@ body {
 .model-menu {
   position: absolute; top: 52px; right: 16px;
   background: var(--bg-sidebar); border: 1px solid var(--border);
-  border-radius: 14px; padding: 0; width: 340px; max-height: 440px;
+  border-radius: 14px; padding: 0; width: 380px; max-height: 480px;
   box-shadow: 0 12px 32px rgba(0,0,0,.5); z-index: 200; display: none;
   flex-direction: column; overflow: hidden;
 }
@@ -849,15 +986,18 @@ body {
   min-height: 0;
   overflow-y: auto;
   padding: 6px;
-  max-height: 360px;
+  max-height: 400px;
 }
 .model-menu-list .group-label {
   font-size: 11px;
   color: var(--text-dim);
   text-transform: uppercase;
-  padding: 6px 8px 3px;
+  padding: 8px 8px 3px;
   font-weight: 600;
   letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 .model-menu-list .opt {
   padding: 8px 10px;
@@ -869,20 +1009,80 @@ body {
   align-items: center;
   gap: 6px;
   transition: background 0.12s;
+  position: relative;
 }
-.model-menu-list .opt:hover { background: var(--bg-hover); }
+.model-menu-list .opt:hover,
+.model-menu-list .opt.focused { background: var(--bg-hover); }
 .model-menu-list .opt.active { background: var(--bg-hover); color: var(--accent); }
 .model-menu-list .opt .check { color: var(--accent); width: 14px; flex-shrink: 0; font-size: 12px; }
-.model-menu-list .opt .model-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-menu-list .opt .model-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.model-menu-list .opt .model-name-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.model-menu-list .opt .model-name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .model-menu-list .opt .model-id-sub {
   font-size: 11px;
   color: var(--text-dim);
   font-family: "SF Mono", Menlo, Consolas, monospace;
-  max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.model-menu-list .opt .badge-feature {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+.model-menu-list .opt .badge-default-tag {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: rgba(59, 130, 246, 0.18);
+  color: #60a5fa;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.btn-set-default {
+  opacity: 0;
+  padding: 3px 8px;
+  font-size: 11px;
+  border-radius: 6px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.model-menu-list .opt:hover .btn-set-default,
+.model-menu-list .opt.focused .btn-set-default {
+  opacity: 1;
+}
+.btn-set-default:hover {
+  background: var(--bg-hover);
+  color: #60a5fa;
+  border-color: #60a5fa;
+}
+
 .model-empty {
   padding: 24px 12px;
   text-align: center;
@@ -890,6 +1090,60 @@ body {
   color: var(--text-dim);
 }
 
+/* Thinking selector dropdown */
+.thinking-menu {
+  position: absolute; top: 52px; right: 16px;
+  background: var(--bg-sidebar); border: 1px solid var(--border);
+  border-radius: 12px; padding: 6px; width: 220px;
+  box-shadow: 0 12px 32px rgba(0,0,0,.5); z-index: 210; display: none;
+  flex-direction: column; gap: 2px;
+}
+.thinking-menu.open { display: flex; }
+.thinking-menu-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  padding: 4px 8px 6px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.thinking-opt {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.thinking-opt:hover { background: var(--bg-hover); }
+.thinking-opt.active { background: var(--bg-hover); color: var(--accent); font-weight: 500; }
+.thinking-opt .level-desc { font-size: 11px; color: var(--text-dim); }
+
+/* System notice divider */
+.system-notice-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0;
+  animation: fade .18s ease;
+}
+.system-notice-text {
+  font-size: 12px;
+  color: var(--text-dim);
+  background: var(--bg-sidebar);
+  border: 1px solid var(--border);
+  padding: 3px 12px;
+  border-radius: 999px;
+  letter-spacing: 0.2px;
+}
+
 
 /* ==========================================================================
    Responsive Mobile Web Design (< 768px)
@@ -1001,18 +1255,30 @@ body {
     flex-shrink: 0;
   }
 
+  .model-pill-container {
+    max-width: 130px;
+  }
+
   .model-pill {
-    padding: 5px 10px;
+    padding: 5px 8px;
     font-size: 11px;
-    max-width: 100px;
+    max-width: 90px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     flex-shrink: 0;
   }
+  .model-pill-name {
+    max-width: 50px;
+  }
+
+  .thinking-pill {
+    padding: 5px 7px;
+    font-size: 11px;
+  }
 
-  /* Model Dropdown Menu Mobile Adjustments — fixed so it never detaches from topbar */
-  .model-menu {
+  /* Model & Thinking Dropdown Menu Mobile Adjustments */
+  .model-menu, .thinking-menu {
     position: fixed;
     top: 54px;
     left: 8px;
@@ -1025,6 +1291,16 @@ body {
     max-height: calc(100dvh - 130px);
   }
 
+  .empty-model-banner {
+    padding: 10px 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .btn-change-model {
+    align-self: flex-end;
+  }
+
   .mobile-toolbar-fab {
     display: flex;
   }

package/server.js

@@ -3,7 +3,7 @@
 // for listing sessions and reading session history from the JSONL store.
 import { spawn } from "child_process";
 import { randomUUID } from "crypto";
-import { readFile, readdir, stat } from "fs/promises";
+import { readFile, readdir, stat, writeFile, mkdir } from "fs/promises";
 import { readFileSync, existsSync } from "fs";
 import { StringDecoder } from "string_decoder";
 import express from "express";
@@ -467,15 +467,104 @@ app.post("/api/log-error", (req, res) => {
   res.json({ ok: true });
 });
 
-// Endpoint to get server environment config (home dir, server process cwd)
-app.get("/api/config", (req, res) => {
+// Helper to resolve pi settings (global and project-level)
+async function getPiSettings(targetCwd) {
+  const globalPath = path.join(home(), ".pi", "agent", "settings.json");
+  let globalSettings = {};
+  let globalExists = false;
+  try {
+    if (existsSync(globalPath)) {
+      globalSettings = JSON.parse(await readFile(globalPath, "utf8"));
+      globalExists = true;
+    }
+  } catch {}
+
+  let projectSettings = {};
+  let projectExists = false;
+  if (targetCwd) {
+    try {
+      const pPath = path.join(targetCwd, ".pi", "settings.json");
+      if (existsSync(pPath)) {
+        projectSettings = JSON.parse(await readFile(pPath, "utf8"));
+        projectExists = true;
+      }
+    } catch {}
+  }
+
+  const defaultProvider = projectSettings.defaultProvider || globalSettings.defaultProvider || null;
+  const defaultModel = projectSettings.defaultModel || globalSettings.defaultModel || null;
+  const defaultThinkingLevel = projectSettings.defaultThinkingLevel || globalSettings.defaultThinkingLevel || null;
+  const source = (projectExists && projectSettings.defaultModel) ? "project" : ((globalExists && globalSettings.defaultModel) ? "global" : "default");
+
+  return {
+    defaultProvider,
+    defaultModel,
+    defaultThinkingLevel,
+    source,
+    globalSettings,
+    projectSettings,
+  };
+}
+
+// Endpoint to get server environment config (home dir, server process cwd, default model settings)
+app.get("/api/config", async (req, res) => {
+  const reqCwd = normalizeCwd(req.query.cwd || "");
+  const settings = await getPiSettings(reqCwd);
   res.json({
     home: home(),
     serverCwd: process.cwd(),
     version: PKG_VERSION,
+    defaultModel: {
+      provider: settings.defaultProvider,
+      id: settings.defaultModel,
+      thinkingLevel: settings.defaultThinkingLevel,
+      source: settings.source,
+    },
   });
 });
 
+// Endpoint to set default model in global or project settings.json
+app.post("/api/set-default-model", async (req, res) => {
+  try {
+    const { provider, modelId, thinkingLevel, scope, cwd: reqCwd } = req.body;
+    if (!provider || !modelId) {
+      return res.status(400).json({ ok: false, error: "缺少 provider 或 modelId 参数" });
+    }
+
+    const isProject = scope === "project" && reqCwd;
+    const settingsPath = isProject
+      ? path.join(normalizeCwd(reqCwd), ".pi", "settings.json")
+      : path.join(home(), ".pi", "agent", "settings.json");
+
+    await mkdir(path.dirname(settingsPath), { recursive: true });
+
+    let current = {};
+    try {
+      if (existsSync(settingsPath)) {
+        current = JSON.parse(await readFile(settingsPath, "utf8"));
+      }
+    } catch {}
+
+    current.defaultProvider = provider;
+    current.defaultModel = modelId;
+    if (thinkingLevel !== undefined) {
+      current.defaultThinkingLevel = thinkingLevel;
+    }
+
+    await writeFile(settingsPath, JSON.stringify(current, null, 2), "utf8");
+
+    res.json({
+      ok: true,
+      scope: isProject ? "project" : "global",
+      defaultProvider: provider,
+      defaultModel: modelId,
+      defaultThinkingLevel: current.defaultThinkingLevel || null,
+    });
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
 // Endpoint to validate if a directory path exists on the server
 app.get("/api/validate-dir", async (req, res) => {
   const target = normalizeCwd(req.query.path || "");
@@ -803,6 +892,12 @@ wss.on("connection", (ws, req) => {
       case "set_model":
         agent.send({ type: "set_model", provider: msg.provider, modelId: msg.modelId });
         break;
+      case "set_thinking_level":
+        agent.send({ type: "set_thinking_level", level: msg.level });
+        break;
+      case "cycle_thinking_level":
+        agent.send({ type: "cycle_thinking_level" });
+        break;
       case "extension_ui_response":
         agent.sendNoReply({ type: "extension_ui_response", ...msg });
         break;