@liguoshuai/pi-web-chat 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -7,7 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
-## [Unreleased]
+## [1.1.0] - 2026-07-26
+
+### Added
+- **后台进程持久化 (Process Persistence)**：刷新或暂时离开 Web 页面时，`pi` Agent 进程继续在后台运行，重新打开/刷新网页会自动重挂载 (re-attach) 正在运行的进程，任务不会中断。
+- **历史工具输出归折 (Clean Tool Results Rendering)**：从历史记录恢复会话时，将离散的 `toolResult` 输出与对应 `toolCall` 绑定，整洁收纳于工具调用的 `⚙` 折叠卡片内，避免原始日志/代码平铺乱穿于聊天框中。
+
+### Fixed
+- **历史会话加载异常**：修复 `/api/session` 接口中局部变量名遮蔽 Node.js `path` 模块导致的无法弹出会话历史问题。
+
+---
+
+## [1.0.1] - 2026-07-20
 
 ### Fixed
 - **空内容 pi 气泡**：`message_start` 原本不区分角色，用户消息回显也建了一个空 pi 气泡 — 现在只对 `role:assistant` 开 streaming 块。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.0.1",
+  "version": "1.1.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

@@ -24,13 +24,16 @@ const state = {
   ws: null,
   wsConnected: false,
   cwd: null,
+  homeDir: "",
+  serverCwd: "",
   currentSessionFile: null,
   // entriesByCallId: for live assistant messages we accumulate tool calls + text
   streamingMsg: null,   // DOM node for the in-progress assistant message
   streamingText: "",    // accumulated text deltas
   streamingThinking: "",
+  thinkingOpen: true,
+  thinkingUserToggled: false,
   activeToolCalls: new Map(), // toolCallId -> { node, body, state }
-  thinkingOpen: false,
   queuedAssistantTextId: null,
   streaming: false,
   models: [],
@@ -39,6 +42,134 @@ const state = {
   sessionId: null,
 };
 
+let toastTimer = null;
+function showToast(msg) {
+  const toast = $("#toast");
+  if (!toast) return;
+  toast.textContent = msg;
+  toast.classList.add("show");
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => {
+    toast.classList.remove("show");
+  }, 2500);
+}
+
+function formatCwdDisplay(p) {
+  if (!p) return "~";
+  const home = state.homeDir;
+  if (home && (p === home || p === home + "/")) return "~";
+  if (home && p.startsWith(home + "/")) return "~/" + p.slice(home.length + 1);
+  return p;
+}
+
+function updateCwdDisplay() {
+  const pill = $("#cwdPill");
+  const wrap = $("#cwdPillWrap");
+  if (pill) pill.textContent = formatCwdDisplay(state.cwd);
+  if (wrap) wrap.title = `工作目录: ${state.cwd || "~"}`;
+}
+
+function setCwd(newCwd) {
+  state.cwd = newCwd;
+  localStorage.setItem("pi_cwd", newCwd);
+  updateCwdDisplay();
+  clearChat();
+  showEmptyState(true);
+  state.currentSessionFile = null;
+  $("#topSessionName").textContent = "新对话";
+  connectWs({});
+  refreshSessions();
+}
+
+async function loadServerConfig() {
+  try {
+    const res = await fetch(`${API}/api/config`);
+    const data = await res.json();
+    if (data.home) state.homeDir = data.home;
+    if (data.serverCwd) state.serverCwd = data.serverCwd;
+  } catch {}
+  if (!state.cwd) {
+    state.cwd = localStorage.getItem("pi_cwd") || state.serverCwd || state.homeDir || "";
+  }
+  updateCwdDisplay();
+}
+
+async function openCwdModal() {
+  await loadServerConfig();
+  const modal = $("#cwdModal");
+  const input = $("#cwdInput");
+  const errorEl = $("#cwdError");
+  const chipsEl = $("#quickDirChips");
+  if (!modal || !input) return;
+
+  input.value = state.cwd || state.homeDir || "";
+  if (errorEl) { errorEl.style.display = "none"; errorEl.textContent = ""; }
+
+  if (chipsEl) {
+    chipsEl.innerHTML = "";
+    const quicks = [];
+    if (state.homeDir) quicks.push({ label: "~ (用户主页)", path: state.homeDir });
+    if (state.serverCwd && state.serverCwd !== state.homeDir) {
+      quicks.push({ label: "服务启动目录", path: state.serverCwd });
+    }
+    let recents = [];
+    try { recents = JSON.parse(localStorage.getItem("pi_recent_cwds") || "[]"); } catch {}
+    recents.forEach(r => {
+      if (r && r !== state.homeDir && r !== state.serverCwd && !quicks.some(q => q.path === r)) {
+        quicks.push({ label: formatCwdDisplay(r), path: r });
+      }
+    });
+
+    quicks.forEach(q => {
+      chipsEl.appendChild(el("div", {
+        class: "chip",
+        text: q.label,
+        onclick: () => { input.value = q.path; }
+      }));
+    });
+  }
+
+  modal.classList.add("open");
+  setTimeout(() => input.select(), 50);
+}
+
+function closeCwdModal() {
+  const modal = $("#cwdModal");
+  if (modal) modal.classList.remove("open");
+}
+
+async function confirmCwdChange() {
+  const input = $("#cwdInput");
+  const errorEl = $("#cwdError");
+  const rawPath = input.value.trim();
+  if (!rawPath) return;
+
+  try {
+    const res = await fetch(`${API}/api/validate-dir?path=${encodeURIComponent(rawPath)}`);
+    const data = await res.json();
+    if (data.ok && data.path) {
+      let recents = [];
+      try { recents = JSON.parse(localStorage.getItem("pi_recent_cwds") || "[]"); } catch {}
+      recents = [data.path, ...recents.filter(r => r !== data.path)].slice(0, 8);
+      localStorage.setItem("pi_recent_cwds", JSON.stringify(recents));
+
+      closeCwdModal();
+      setCwd(data.path);
+      showToast(`已切换工作目录: ${formatCwdDisplay(data.path)}`);
+    } else {
+      if (errorEl) {
+        errorEl.textContent = data.error || "指定路径无法访问";
+        errorEl.style.display = "block";
+      }
+    }
+  } catch (e) {
+    if (errorEl) {
+      errorEl.textContent = "网络请求失败，请重试";
+      errorEl.style.display = "block";
+    }
+  }
+}
+
 // ---- Markdown render (small, safe renderer) ----
 function escapeHtml(s) {
   return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
@@ -249,8 +380,24 @@ function renderSidebar(sessions) {
   });
 }
 
+async function toggleSidebar() {
+  const app = $(".app");
+  const isOpen = app.classList.toggle("sidebar-open");
+  if (window.innerWidth > 768) {
+    localStorage.setItem("sidebarCollapsed", !isOpen);
+  }
+}
+
+function closeSidebar() {
+  $(".app").classList.remove("sidebar-open");
+}
+
 async function loadSession(file) {
   state.currentSessionFile = file;
+  // Mobile: close sidebar on selection
+  if (window.innerWidth <= 768) {
+    closeSidebar();
+  }
   // pull transcript from REST then connect a fresh WS pointed at this session
   const res = await fetch(`${API}/api/session?file=${encodeURIComponent(file)}`);
   const data = await res.json();
@@ -270,7 +417,17 @@ async function loadSession(file) {
 }
 
 function reconstructFromEntries(entries) {
-  // entries contains message + message_summary + model_change etc., in path order.
+  // Map toolResults by toolCallId so we can attach them to their toolCall in the assistant message
+  const toolResults = new Map();
+  for (const e of entries) {
+    if (e.type === "message" && e.message?.role === "toolResult") {
+      const m = e.message;
+      if (m.toolCallId) {
+        toolResults.set(m.toolCallId, m);
+      }
+    }
+  }
+
   const out = [];
   for (const e of entries) {
     if (e.type !== "message") continue;
@@ -280,10 +437,17 @@ function reconstructFromEntries(entries) {
       // skip "bash execution" pseudo-users (those have role user but content type special)
       out.push({ role: "user", text: extractContentText(m.content), ts: m.timestamp });
     } else if (m.role === "assistant") {
-      out.push({ role: "assistant", content: m.content, ts: m.timestamp, usage: m.usage });
-    } else if (m.role === "toolResult") {
-      out.push({ role: "toolResult", toolCallId: m.toolCallId, toolName: m.toolName, content: m.content, isError: m.isError, ts: m.timestamp });
+      const rawContent = Array.isArray(m.content) ? m.content : (m.content ? [{ type: "text", text: String(m.content) }] : []);
+      const content = rawContent.map(part => {
+        if (part && part.type === "toolCall") {
+          const res = toolResults.get(part.id);
+          return { ...part, result: res || null };
+        }
+        return part;
+      });
+      out.push({ role: "assistant", content, ts: m.timestamp, usage: m.usage });
     }
+    // toolResult entries are attached directly to assistant toolCall parts, so they don't produce standalone messages
   }
   return out;
 }
@@ -304,6 +468,8 @@ function clearChat() {
   state.streamingMsg = null;
   state.streamingText = "";
   state.streamingThinking = "";
+  state.thinkingOpen = true;
+  state.thinkingUserToggled = false;
   state.activeToolCalls.clear();
 }
 
@@ -349,14 +515,30 @@ function renderAssistantBlock(m) {
   return node;
 }
 
-function makeThinkingBlock(thinkingText) {
-  const block = el("div", { class: "thinking-block" });
-  const head = el("div", { class: "thinking-head", onclick: () => body.style.display = body.style.display === "none" ? "block" : "none" }, [
-    el("span", { text: "💭 思考过程" }),
-    el("span", { text: "(点击展开/收起)" }),
+function makeThinkingBlock(thinkingText, isActivelyThinking = false) {
+  const block = el("div", { class: "thinking-block" + (isActivelyThinking ? " active" : "") });
+  const head = el("div", {
+    class: "thinking-head",
+    onclick: () => {
+      const isHidden = body.style.display === "none";
+      body.style.display = isHidden ? "block" : "none";
+      state.thinkingOpen = isHidden;
+      state.thinkingUserToggled = true;
+    }
+  }, [
+    el("span", { class: "thinking-title", text: isActivelyThinking ? "💭 正在思考中…" : "💭 思考过程" }),
+    isActivelyThinking ? el("span", { class: "thinking-pulse" }) : null,
+    el("span", { class: "thinking-toggle-hint", text: "(点击展开/收起)" }),
   ]);
+  
   const body = el("div", { class: "thinking-body", html: escapeHtml(thinkingText) });
-  body.style.display = "none";
+  
+  if (state.thinkingUserToggled) {
+    body.style.display = state.thinkingOpen ? "block" : "none";
+  } else {
+    body.style.display = isActivelyThinking ? "block" : "none";
+  }
+  
   block.appendChild(head);
   block.appendChild(body);
   return block;
@@ -364,21 +546,42 @@ function makeThinkingBlock(thinkingText) {
 
 function makeToolBlockFromCall(call) {
   const block = el("div", { class: "tool-block" });
+  const hasResult = Boolean(call.result);
+  const isError = call.result ? Boolean(call.result.isError) : false;
+
+  let resultText = "";
+  if (hasResult) {
+    resultText = extractContentText(call.result.content);
+  }
+
+  const stateText = hasResult ? (isError ? "错误" : "完成") : "…";
+  const stateClass = "state" + (hasResult && isError ? " error" : "");
+
   const head = el("div", { class: "tool-head" }, [
     el("span", { class: "ic", text: "⚙" }),
     el("span", { class: "name", text: call.name }),
     el("span", { class: "args", text: summaryArgs(call.name, call.arguments) }),
-    el("span", { class: "state", text: "…" }),
+    el("span", { class: stateClass, text: stateText }),
   ]);
-  const body = el("div", { class: "tool-body", html: "执行中…" });
+
+  const bodyText = hasResult ? (resultText || "(无输出)") : "执行中…";
+  const body = el("div", { class: "tool-body", html: escapeHtml(bodyText) });
   body.style.display = "none";
-  head.addEventListener("click", () => body.style.display = body.style.display === "none" ? "block" : "none");
+
+  head.addEventListener("click", () => {
+    body.style.display = body.style.display === "none" ? "block" : "none";
+  });
+
   block.appendChild(head);
   block.appendChild(body);
   block._head = head;
   block._body = body;
   block._callId = call.id;
-  state.activeToolCalls.set(call.id, { block, body, head });
+
+  if (!hasResult && call.id) {
+    state.activeToolCalls.set(call.id, { block, body, head });
+  }
+
   return block;
 }
 
@@ -412,6 +615,8 @@ function ensureStreamingMsg() {
   state.streamingMsg = node;
   state.streamingText = "";
   state.streamingThinking = "";
+  state.thinkingOpen = true;
+  state.thinkingUserToggled = false;
   state.activeToolCalls.clear();
   $("#chat-inner").appendChild(node);
   scrollBottom();
@@ -422,28 +627,45 @@ function refreshStreamingContent() {
   const node = state.streamingMsg;
   if (!node) return;
   const content = node.querySelector(".content");
-  // Build the current content html again from scratch.
-  // Order: text then thinking then tool calls. We keep it simple — append in
-  // arrival order using permanent child slots keyed by index.
-  // Easiest: rebuild.
   content.innerHTML = "";
-  if (state.streamingThinking) {
-    content.appendChild(makeThinkingBlock(state.streamingThinking));
+
+  const hasThinking = Boolean(state.streamingThinking);
+  const hasText = Boolean(state.streamingText);
+  const hasTools = state.activeToolCalls.size > 0;
+
+  // Immediate visual feedback placeholder while waiting for LLM first token
+  if (state.streaming && !hasThinking && !hasText && !hasTools) {
+    content.appendChild(el("div", { class: "thinking-placeholder" }, [
+      el("span", { class: "thinking-spinner" }),
+      el("span", { class: "thinking-label", text: "正在思考中…" })
+    ]));
+    scrollBottom();
+    return;
   }
-  if (state.streamingText) {
-    content.appendChild(el("div", { html: renderMarkdown(state.streamingText) + (state.streaming ? '<span class="typing-cursor"></span>' : "") }));
+
+  if (state.streamingThinking) {
+    const isActivelyThinking = state.streaming && !hasText && !hasTools;
+    content.appendChild(makeThinkingBlock(state.streamingThinking, isActivelyThinking));
   }
-  // Re-append tool call blocks. Active ones are kept in a Map by insertion order.
   for (const v of state.activeToolCalls.values()) {
     content.appendChild(v.block);
   }
+  if (state.streamingText) {
+    content.appendChild(el("div", { html: renderMarkdown(state.streamingText) + (state.streaming ? '<span class="typing-cursor"></span>' : "") }));
+  }
   scrollBottom();
 }
 
 function finalizeStreamingMsg() {
+  state.streaming = false;
+  if (state.streamingMsg) {
+    refreshStreamingContent();
+  }
   state.streamingMsg = null;
   state.streamingText = "";
   state.streamingThinking = "";
+  state.thinkingOpen = true;
+  state.thinkingUserToggled = false;
   state.activeToolCalls.clear();
 }
 
@@ -511,6 +733,18 @@ function handlePiMessage(obj) {
   if (obj.type === "response") {
     if (obj.command === "get_state" && obj.success) updateState(obj.data);
     else if (obj.command === "get_available_models" && obj.success) updateModels(obj.data.models || []);
+    else if (obj.command === "set_model") {
+      if (obj.success) {
+        if (obj.data) state.currentModel = obj.data;
+        renderModelPill();
+        renderModelMenu();
+        showToast(`已切换模型: ${state.currentModel?.name || state.currentModel?.id || ""}`);
+        sendWs({ type: "get_state" });
+      } else {
+        showToast(`切换模型失败: ${obj.error || "未知错误"}`);
+        renderModelPill();
+      }
+    }
     else if (obj.command === "switch_session" && obj.success) {
       // ask pi for current state so we can get session id, name
       sendWs({ type: "get_state" });
@@ -533,17 +767,15 @@ function handlePiMessage(obj) {
     case "agent_start":
       state.streaming = true;
       setComposerAborting(true);
-      // Refresh opportunistically; pi's session file may not be fsync'd yet
-      // at agent_start (in which case this refresh is a no-op), but the
-      // later agent_settled branch refreshes too — so a new conversation
-      // shows up in the sidebar as soon as the reply finishes, without
-      // needing a manual page reload.
+      ensureStreamingMsg();
+      refreshStreamingContent();
       refreshSessions();
       break;
     case "agent_end":
       finalizeStreamingMsg();
       break;
     case "agent_settled":
+      finalizeStreamingMsg();
       state.streaming = false;
       setComposerAborting(false);
       refreshSessions(); // titles may have changed
@@ -657,6 +889,7 @@ function handlePiMessage(obj) {
       break;
     }
     case "pi_exit":
+      finalizeStreamingMsg();
       state.streaming = false;
       setComposerAborting(false);
       $("#connDot").style.color = "var(--danger)";
@@ -698,7 +931,9 @@ function renderModelPill() {
   const pill = $("#modelPill");
   if (!m) { pill.textContent = "选择模型"; return; }
   const provider = m.provider || "?";
-  pill.textContent = `${provider} / ${m.id || m.name}`;
+  const name = m.name || m.id;
+  pill.textContent = `${provider} / ${name}`;
+  pill.title = `当前模型: ${provider} / ${name} (${m.id})`;
 }
 
 function renderModelMenu() {
@@ -716,7 +951,11 @@ function renderModelMenu() {
       const active = state.currentModel && m.id === state.currentModel.id && m.provider === state.currentModel.provider;
       menu.appendChild(el("div", {
         class: "opt" + (active ? " active" : ""),
-        onclick: () => { sendWs({ type: "set_model", provider: m.provider, modelId: m.id }); menu.classList.remove("open"); },
+        onclick: () => {
+          $("#modelPill").textContent = "切换中…";
+          sendWs({ type: "set_model", provider: m.provider, modelId: m.id });
+          menu.classList.remove("open");
+        },
       }, [
         el("span", { class: "check", html: active ? "✓ " : "" }),
         document.createTextNode(`${m.name || m.id}`),
@@ -766,6 +1005,12 @@ function submitPrompt() {
   appendMessageNode("user", { text });
   ta.value = "";
   autoResize();
+
+  state.streaming = true;
+  setComposerAborting(true);
+  ensureStreamingMsg();
+  refreshStreamingContent();
+
   // Set session name from the first prompt of a brand-new session.
   if (state.currentSessionFile == null) {
     sendWs({ type: "set_session_name", name: text.slice(0, 60).replace(/\s+/g, " ") });
@@ -784,6 +1029,7 @@ function init() {
   // Default cwd to home (server uses home default too).
   state.cwd = document.body.dataset.cwd || "";
 
+  // event listeners
   // event listeners
   $("#btnNew").addEventListener("click", () => {
     if (state.streaming) {
@@ -795,8 +1041,8 @@ function init() {
     connectWs({}); // no session -> pi creates a new one
     $("#topSessionName").textContent = "新对话";
     state.currentSessionFile = null;
-    // Pull the updated sidebar immediately so the just-opened session
-    // appears as soon as pi reports back (and on subsequent resolves).
+    // Mobile: close sidebar on new session
+    if (window.innerWidth <= 768) closeSidebar();
     refreshSessions();
   });
 
@@ -831,6 +1077,9 @@ function init() {
     });
   });
 
+  $("#btnToggleSidebar").addEventListener("click", toggleSidebar);
+  $("#sidebarOverlay").addEventListener("click", closeSidebar);
+
   // sidebar search (client side filter)
   $("#sidebarSearch").addEventListener("input", (e) => {
     const q = e.target.value.toLowerCase();
@@ -839,6 +1088,64 @@ function init() {
     });
   });
 
+  // Restore sidebar state for desktop, collapse by default on mobile
+  if (window.innerWidth > 768) {
+    if (localStorage.getItem("sidebarCollapsed") === "true") {
+      $(".app").classList.remove("sidebar-open");
+    }
+  } else {
+    $(".app").classList.remove("sidebar-open");
+  }
+
+  // Warn user if navigating/refreshing while a response is streaming
+  window.addEventListener("beforeunload", (e) => {
+    if (state.streaming) {
+      e.preventDefault();
+      e.returnValue = "任务正在运行中，刷新或离开页面将中断当前任务。";
+      return e.returnValue;
+    }
+  });
+
+  // Keep sidebar state consistent across viewport resizes.
+  // Desktop uses an inline sidebar; mobile uses a drawer with an overlay.
+  // If the user resizes across the 768px breakpoint, a stale `sidebar-open`
+  // class would either show a stray inline sidebar on a collapsed desktop
+  // layout, or worse, leave the full-screen overlay covering the main area
+  // on mobile — making the whole UI unclickable. Sync on every resize.
+  let lastIsMobile = window.innerWidth <= 768;
+  window.addEventListener("resize", () => {
+    const isMobile = window.innerWidth <= 768;
+    if (isMobile !== lastIsMobile) {
+      lastIsMobile = isMobile;
+      // Crossing the breakpoint: always close the drawer to reach a known state.
+      $(".app").classList.remove("sidebar-open");
+    }
+  });
+
+  // CWD modal listeners
+  const cwdBtn = $("#cwdPillWrap");
+  if (cwdBtn) cwdBtn.addEventListener("click", openCwdModal);
+  const cwdCloseBtn = $("#cwdModalClose");
+  if (cwdCloseBtn) cwdCloseBtn.addEventListener("click", closeCwdModal);
+  const cwdConfirmBtn = $("#cwdConfirmBtn");
+  if (cwdConfirmBtn) cwdConfirmBtn.addEventListener("click", confirmCwdChange);
+  const cwdModalEl = $("#cwdModal");
+  if (cwdModalEl) {
+    cwdModalEl.addEventListener("click", (e) => {
+      if (e.target === cwdModalEl) closeCwdModal();
+    });
+  }
+  const cwdInputEl = $("#cwdInput");
+  if (cwdInputEl) {
+    cwdInputEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") { e.preventDefault(); confirmCwdChange(); }
+      else if (e.key === "Escape") { e.preventDefault(); closeCwdModal(); }
+    });
+  }
+
+  // Load server config & restore saved CWD
+  loadServerConfig();
+
   refreshSessions();
   // start in the disconnected state; connectWs will flip to green on open.
   const initDot = $("#connDot");

package/public/index.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext y='20' font-size='20'%3Eπ%3C/text%3E%3C/svg%3E">
 </head>
 <body data-cwd="">
-  <div class="app">
+  <div class="app sidebar-open">
     <!-- Sidebar -->
     <aside class="sidebar">
       <div class="sidebar-top">
@@ -27,11 +27,22 @@
       </div>
     </aside>
 
+    <!-- Sidebar Overlay -->
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
     <!-- Main -->
     <main class="main">
       <div class="topbar">
+        <button class="btn-toggle-sidebar" id="btnToggleSidebar" title="切换侧边栏">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </button>
         <div class="session-name" id="topSessionName">新对话</div>
-        <button class="btn-ghost" id="modelPillWrap" title="工作目录">
+        <button class="btn-ghost" id="cwdPillWrap" title="点击切换工作目录">
+          <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;">
@@ -63,6 +74,31 @@
       </div>
     </main>
   </div>
+
+  <!-- CWD Modal -->
+  <div class="modal-overlay" id="cwdModal">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>切换工作目录</h3>
+        <button class="btn-close" id="cwdModalClose">&times;</button>
+      </div>
+      <div class="modal-body">
+        <p class="modal-desc">选择或输入 pi 代理运行的目标工作目录：</p>
+        <div class="input-group">
+          <input type="text" id="cwdInput" placeholder="/path/to/project" />
+          <button class="btn-primary" id="cwdConfirmBtn">确定切换</button>
+        </div>
+        <div id="cwdError" class="modal-error"></div>
+        <div class="quick-dirs">
+          <span class="quick-label">快捷选择：</span>
+          <div id="quickDirChips" class="chips"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Toast notification -->
+  <div class="toast" id="toast"></div>
   <script src="/app.js"></script>
 </body>
 </html>