@oversk7/pi-web-dsh-style 1.0.0 → 1.0.1

package/web/app.js

@@ -52,6 +52,10 @@ const S = {
   maintenanceMessage: null,
   maintenanceGeneration: 0,
   serverInstanceId: null,
+  localClient: true,
+  lanEnabled: false,
+  lanUrls: [],
+  passwordConfigured: false,
   theme: localStorage.getItem("pi-web-theme") || "system",
 };
 
@@ -69,10 +73,15 @@ function el(html) {
 }
 
 async function api(path, options = {}) {
-  const res = await fetch(path, {
+  const request = () => fetch(path, {
     headers: { "content-type": "application/json", ...(options.headers || {}) },
     ...options,
   });
+  let res = await request();
+  if (res.status === 401 && path !== "/api/auth") {
+    await requireLogin();
+    res = await request();
+  }
   const data = await res.json().catch(() => ({}));
   if (!res.ok) {
     const error = new Error(data.error || `${res.status} ${res.statusText}`);
@@ -130,8 +139,8 @@ function toggleTheme() {
 }
 
 const ICONS = {
-  logo: `<svg width="30" height="30" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" rx="12" fill="var(--dsw-alias-brand-primary, #3964fe)"/><text x="25" y="34" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="30" font-weight="700" fill="#fff">π</text></svg>`,
-  wordmark: `<span class="pi-brandLogo"><svg width="30" height="30" viewBox="0 0 50 50" fill="none" aria-hidden="true"><rect width="50" height="50" rx="12" fill="var(--dsw-alias-brand-primary, #3964fe)"/><text x="25" y="34" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="30" font-weight="700" fill="#fff">π</text></svg><span class="pi-brandName">Pi</span></span>`,
+  logo: `<svg width="30" height="30" viewBox="0 0 50 50" fill="none"><rect width="50" height="50" rx="12" fill="var(--dsw-alias-brand-primary, #3964fe)"/><text x="25" y="34" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="30" font-weight="700" fill="var(--dsw-alias-bg-base, #fff)">π</text></svg>`,
+  wordmark: `<span class="pi-brandLogo"><svg width="30" height="30" viewBox="0 0 50 50" fill="none" aria-hidden="true"><rect width="50" height="50" rx="12" fill="var(--dsw-alias-brand-primary, #3964fe)"/><text x="25" y="34" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="30" font-weight="700" fill="var(--dsw-alias-bg-base, #fff)">π</text></svg><span class="pi-brandName">Pi</span></span>`,
   panel: `<svg class="hHd-Xa_panelIcon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 12.5v-9Z" stroke="currentColor" stroke-width="1.4"/><path d="M6 2v12" stroke="currentColor" stroke-width="1.4"/></svg>`,
   plus: `<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1.5V14.5M1.5 8H14.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>`,
   search: `<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5.4" stroke="currentColor" stroke-width="1.4"/><path d="M11 11L15 15" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>`,
@@ -316,6 +325,22 @@ function usesMobileSidebar() {
   return matchMedia("(max-width: 640px)").matches;
 }
 
+function usesTouchInput() {
+  return matchMedia("(pointer: coarse)").matches;
+}
+
+function updateViewport() {
+  const viewport = window.visualViewport;
+  if (viewport && viewport.scale !== 1) return;
+  document.documentElement.style.setProperty("--pi-viewport-height", `${viewport?.height || window.innerHeight}px`);
+  document.documentElement.style.setProperty("--pi-viewport-top", `${viewport?.offsetTop || 0}px`);
+}
+
+function closeMobileSidebar() {
+  S.mobileSidebarOpen = false;
+  applyFrameLayout();
+}
+
 function currentPanelWidths() {
   const frame = $(".pI_x6G_frame");
   const frameWidth = frame?.clientWidth || window.innerWidth;
@@ -336,6 +361,8 @@ function applyFrameLayout() {
   const { sidebarWidth, previewWidth } = currentPanelWidths();
   frame.dataset.sidebarCollapsed = String(mobileSidebar || S.sidebarCollapsed);
   frame.toggleAttribute("data-mobile-sidebar-open", mobileSidebar && S.mobileSidebarOpen);
+  const sidebar = $(".pI_x6G_sidebarCol", frame);
+  if (sidebar) sidebar.inert = mobileSidebar && !S.mobileSidebarOpen;
   frame.toggleAttribute("data-details-collapsed", !S.filePreview);
   frame.style.setProperty("--pi-sidebar-width", `${sidebarWidth}px`);
   frame.style.setProperty("--pi-details-width", `${previewWidth}px`);
@@ -714,7 +741,7 @@ function renderComposerBar(hero = false) {
           <div class="uV2eYG_row">
             <div class="uV2eYG_tools">
               <button type="button" class="uV2eYG_add" aria-label="命令" title="命令" data-action="commands" ${disabled ? "disabled" : ""}>${ICONS.plus}</button>
-              <button type="button" class="uV2eYG_add pi-imagePaste" aria-label="粘贴剪贴板图片" title="${modelSupportsImages(model) ? "粘贴剪贴板图片（Alt+V）" : "当前模型不支持图片输入"}" data-action="paste-image" ${disabled || S.clipboardBusy || !modelSupportsImages(model) ? "disabled" : ""}>${ICONS.image}</button>
+              <button type="button" class="uV2eYG_add pi-imagePaste" aria-label="${S.localClient ? "粘贴剪贴板图片" : "选择图片"}" title="${modelSupportsImages(model) ? (S.localClient ? "粘贴剪贴板图片（Alt+V）" : "从手机选择图片") : "当前模型不支持图片输入"}" data-action="paste-image" ${disabled || S.clipboardBusy || !modelSupportsImages(model) ? "disabled" : ""}>${ICONS.image}</button>
             </div>
             <div class="uV2eYG_trailing">
               <div class="_7KE1Ra_root pi-modelControl">
@@ -764,8 +791,7 @@ function renderStats(snap) {
   const add = (text, className = "") => {
     if (text !== "" && text != null) parts.push({ text: String(text), className });
   };
-  if (stats.totalMessages != null) add(`消息 ${stats.totalMessages}`);
-  if (stats.toolCalls != null) add(`工具 ${stats.toolCalls}`);
+  if (cu.tokens != null) add(`上下文 ${fmtNum(cu.tokens)}/${fmtNum(cu.contextWindow ?? 0)} (${Math.round(cu.percent ?? 0)}%)`, "FJxK0a_context");
   const pendingMessages = Number(snap.state?.pendingMessageCount ?? 0);
   if (pendingMessages > 0) add(`待处理 ${pendingMessages}`, "FJxK0a_statusWarning");
   if (tokens.input != null || tokens.output != null) add(`输入 ${fmtNum(tokens.input ?? 0)} · 输出 ${fmtNum(tokens.output ?? 0)} tok`);
@@ -773,8 +799,7 @@ function renderStats(snap) {
   if (Number(tokens.cacheRead) > 0) cacheParts.push(`缓存读 ${fmtNum(tokens.cacheRead)}`);
   if (Number(tokens.cacheWrite) > 0) cacheParts.push(`写 ${fmtNum(tokens.cacheWrite)}`);
   if (cacheParts.length) add(cacheParts.join(" · "));
-  if (cu.tokens != null) add(`上下文 ${fmtNum(cu.tokens)}/${fmtNum(cu.contextWindow ?? 0)} (${Math.round(cu.percent ?? 0)}%)`, "FJxK0a_context");
-  if (typeof stats.cost === "number") add(`$${stats.cost.toFixed(3)}`);
+  if (typeof stats.cost === "number") add(formatCost(stats.cost));
   for (const [, text] of Object.entries(snap.extensionStatuses || {}).sort(([a], [b]) => a.localeCompare(b))) {
     add(text, extensionStatusClass(text));
   }
@@ -782,6 +807,11 @@ function renderStats(snap) {
   return `<div class="FJxK0a_root" role="status">${parts.map((part) => `<span class="${part.className}" title="${esc(part.text)}">${esc(part.text)}</span>`).join('<span class="FJxK0a_sep" aria-hidden="true">|</span>')}</div>`;
 }
 
+function formatCost(cost) {
+  if (cost > 0 && cost < 0.000001) return "<$0.000001";
+  return `$${cost.toFixed(cost > 0 && cost < 0.001 ? 6 : 3)}`;
+}
+
 function fmtNum(n) {
   if (!Number.isFinite(Number(n))) return String(n ?? 0);
   const v = Number(n);
@@ -799,9 +829,6 @@ function renderHeader() {
     <div class="wSkVaW_titleRow"><div class="wSkVaW_titleCluster">
       <nav class="wSkVaW_crumbs" aria-label="会话层级"><span class="wSkVaW_crumbSeg"><button type="button" class="wSkVaW_crumb wSkVaW_crumbCurrent" disabled>${esc(session.title || "新会话")}</button></span></nav>
     </div></div>
-    <div class="wSkVaW_headerUtilities">
-      <button type="button" class="nL4_yW_sessionLogButton" data-action="export-current"><span>导出记录</span></button>
-    </div>
     <div class="wSkVaW_tabs" role="tablist">
       <button type="button" role="tab" aria-selected="${!historyActive}" class="wSkVaW_tab ${historyActive ? "" : "wSkVaW_tabActive"}" data-action="conversation-tab">对话</button>
       <button type="button" role="tab" aria-selected="${historyActive}" class="wSkVaW_tab ${historyActive ? "wSkVaW_tabActive" : ""}" data-action="history-current">会话历史</button>
@@ -2186,7 +2213,7 @@ function renderHistoryView(view) {
   const errorBanner = dialog.error && nodes.length > 0 ? `<div class="pi-historyErrorBanner" role="alert">${esc(dialog.error)}</div>` : "";
   const busyText = dialog.busyRestoreMode === "all" ? "正在回溯对话和文件…" : "正在切换会话分支…";
   return `<section class="pi-historyView" role="tabpanel" aria-label="会话历史">
-    <div class="pi-historyHeader"><div><div class="pi-historyTitle">会话历史</div><div class="pi-historySubtitle">${nodes.filter((node) => node.rewindable).length} 条用户消息 · ${nodes.filter((node) => !node.active).length} 个历史分支节点</div></div>${returnButton}</div>
+    <div class="pi-historyHeader"><div><div class="pi-historyTitle">会话历史</div><div class="pi-historySubtitle">${nodes.filter((node) => node.rewindable).length} 条用户消息 · ${nodes.filter((node) => !node.active).length} 个历史分支节点</div></div><div class="pi-historyActions">${returnButton}<button type="button" class="nL4_yW_sessionLogButton" data-action="export-current"><span>导出记录</span></button></div></div>
     <div class="pi-historyTabs" role="tablist">
       <button type="button" role="tab" aria-selected="${dialog.mode === "rewind"}" class="pi-historyTab ${dialog.mode === "rewind" ? "pi-historyTabActive" : ""}" data-action="history-mode" data-mode="rewind">回溯</button>
       <button type="button" role="tab" aria-selected="${dialog.mode === "tree"}" class="pi-historyTab ${dialog.mode === "tree" ? "pi-historyTabActive" : ""}" data-action="history-mode" data-mode="tree">会话树</button>
@@ -2260,6 +2287,148 @@ async function navigateHistory(entryId, role, restoreMode) {
   }
 }
 
+const networkSettings = { data: null, form: null, dirty: false, saving: false, loading: false, error: "", request: 0 };
+
+function networkForm() {
+  if (networkSettings.form) return networkSettings.form;
+  const form = el(`<form id="webNetworkForm" class="pi-networkForm">
+    <label>访问方式<select name="mode" class="pi-passwordInput"><option value="local">仅本机</option><option value="lan">局域网</option><option value="relay">服务器中转</option></select></label>
+    <div class="pi-networkRelay" hidden>
+      <label>服务器地址<input name="serverAddr" class="pi-passwordInput" placeholder="服务器 IP 或域名" autocomplete="off"></label>
+      <label>frps 端口<input name="serverPort" class="pi-passwordInput" type="number" min="1" max="65535" value="7000"></label>
+      <label>认证密钥<input name="token" class="pi-passwordInput" type="password" autocomplete="new-password" placeholder="输入认证密钥"></label>
+      <label>HTTPS 手机入口<input name="origin" class="pi-passwordInput" type="url" placeholder="https://pi.example.com" autocomplete="off"></label>
+      <label>frpc 原生路径<input name="frpcPath" class="pi-passwordInput" placeholder="frpc" autocomplete="off"></label>
+      <p>首次使用请<a href="https://github.com/fatedier/frp/releases" target="_blank" rel="noopener noreferrer">下载原生 frpc</a>。路径为空时使用 PATH 中的 frpc，扩展会托管该进程。</p>
+      <details><summary>高级设置</summary><div class="pi-networkAdvanced">
+        <label>隧道名<input name="proxyName" class="pi-passwordInput" autocomplete="off" placeholder="使用默认名称"></label>
+        <label>服务器内部端口<input name="visitorPort" class="pi-passwordInput" type="number" min="1" max="65535" value="13000"></label>
+      </div></details>
+    </div>
+    <p class="pi-networkHint">选择模式后保存生效。</p>
+    <button type="submit" class="pi-settingsAction pi-settingsActionPrimary">保存设置</button>
+    <div class="pi-networkStatus pi-settingsStatus" role="status"></div>
+    <div class="pi-networkUrls"></div>
+    <div class="pi-networkDownloads" hidden><p>下载已保存的服务器配置，证书路径请按服务器修改。</p><div class="pi-networkDownloadButtons">${["frps.toml", "visitor.toml", "nginx.conf"].map((name) => `<button type="button" class="pi-settingsAction" data-network-file="${name}">下载 ${name}</button>`).join("")}</div></div>
+  </form>`);
+  networkSettings.form = form;
+  form.oninput = form.onchange = () => {
+    networkSettings.dirty = true;
+    updateNetworkForm();
+  };
+  form.onsubmit = saveNetworkSettings;
+  form.querySelectorAll("[data-network-file]").forEach((button) => {
+    button.onclick = async () => {
+      if (button.disabled || !S.localClient) return;
+      button.disabled = true;
+      try {
+        const { files } = await api("/api/network/server-files");
+        const name = button.dataset.networkFile;
+        if (typeof files?.[name] !== "string") throw new Error("服务器未返回此配置文件");
+        const url = URL.createObjectURL(new Blob([files[name]], { type: "text/plain;charset=utf-8" }));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = name;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+      } catch (error) {
+        networkSettings.error = error.message || String(error);
+      } finally {
+        button.disabled = false;
+        updateNetworkForm();
+      }
+    };
+  });
+  return form;
+}
+
+function updateNetworkForm(sync = false) {
+  if (!S.localClient) return;
+  const form = networkForm();
+  const state = networkSettings;
+  if (sync && state.data && !state.dirty && !state.saving) {
+    const { settings } = state.data;
+    const relay = settings.relay || {};
+    const values = { mode: settings.mode, serverAddr: relay.serverAddr || "", serverPort: relay.serverPort || 7000, token: "", origin: relay.origin || "", frpcPath: relay.frpcPath || "", proxyName: relay.proxyName || "", visitorPort: relay.visitorPort || 13000 };
+    for (const [name, value] of Object.entries(values)) form.elements.namedItem(name).value = value;
+  }
+  const relayMode = form.elements.namedItem("mode").value === "relay";
+  $(".pi-networkRelay", form).hidden = !relayMode;
+  form.querySelectorAll("input[name],select[name]").forEach((input) => {
+    input.disabled = state.saving || !state.data || (input.tagName === "INPUT" && !relayMode);
+  });
+  for (const name of ["serverAddr", "serverPort", "origin"]) form.elements.namedItem(name).required = relayMode;
+  form.elements.namedItem("token").placeholder = state.data?.settings.relay?.tokenConfigured ? "已设置，留空保留现有密钥" : "输入认证密钥";
+  const submit = $('button[type="submit"]', form);
+  submit.disabled = state.saving || !state.data || Boolean(state.data.applying);
+  submit.textContent = state.saving ? "保存中…" : state.data?.applying ? "正在应用…" : relayMode ? "保存并连接" : "保存设置";
+  const status = $(".pi-networkStatus", form);
+  const labels = { stopped: "未连接", connecting: "连接中", connected: "已连接", error: "连接失败" };
+  status.textContent = state.error || (state.loading && !state.data ? "正在加载网络设置…" : state.data ? state.data.applying ? "正在应用配置…" : state.data.status.message || labels[state.data.status.state] : "正在加载网络设置…");
+  status.classList.toggle("pi-settingsStatus-error", Boolean(state.error || state.data?.status.state === "error"));
+  const urls = $(".pi-networkUrls", form);
+  const urlsKey = JSON.stringify(state.data?.urls || []);
+  if (urls.dataset.urls !== urlsKey) {
+    urls.dataset.urls = urlsKey;
+    urls.innerHTML = (state.data?.urls || []).map((url) => `<div class="pi-settingsActionRow"><input class="pi-lanUrl" aria-label="手机访问链接" readonly value="${esc(url)}"><button type="button" class="pi-settingsAction" data-action="copy-text" data-text="${esc(url)}">复制链接</button></div>`).join("");
+  }
+  $(".pi-networkDownloads", form).hidden = state.data?.settings.mode !== "relay";
+}
+
+async function loadNetworkSettings() {
+  if (!S.localClient || networkSettings.saving) return;
+  const state = networkSettings;
+  const request = ++state.request;
+  state.loading = true;
+  updateNetworkForm();
+  try {
+    const data = await api("/api/network");
+    if (request !== state.request) return;
+    state.data = data;
+    state.error = "";
+    updateNetworkForm(true);
+  } catch (error) {
+    if (request !== state.request) return;
+    state.error = error.status === 404 ? "重新加载运行时以启用网络设置。" : `加载网络设置失败：${error.message || String(error)}。重新打开设置可重试。`;
+  } finally {
+    if (request === state.request) {
+      state.loading = false;
+      updateNetworkForm();
+    }
+  }
+}
+
+async function saveNetworkSettings(event) {
+  event.preventDefault();
+  const state = networkSettings;
+  if (!S.localClient || state.saving || !state.data || state.data.applying) return;
+  const form = event.currentTarget;
+  const value = (name) => form.elements.namedItem(name).value;
+  const mode = value("mode");
+  const body = { mode };
+  if (mode === "relay") body.relay = {
+    serverAddr: value("serverAddr").trim(), serverPort: Number(value("serverPort")), token: value("token"),
+    origin: value("origin").trim(), frpcPath: value("frpcPath").trim() || "frpc",
+    proxyName: value("proxyName").trim() || undefined, visitorPort: Number(value("visitorPort") || 13000),
+  };
+  ++state.request;
+  state.dirty = true;
+  state.saving = true;
+  state.error = "";
+  updateNetworkForm();
+  try {
+    state.data = await post("/api/network", body);
+    state.dirty = false;
+    form.elements.namedItem("token").value = "";
+  } catch (error) {
+    state.error = `保存失败：${error.message || String(error)}`;
+  } finally {
+    state.saving = false;
+    updateNetworkForm(!state.dirty);
+    if (!state.dirty) void loadNetworkSettings();
+  }
+}
+
 function renderSettings() {
   const busy = Boolean(S.maintenanceBusy);
   const themes = [
@@ -2282,6 +2451,15 @@ function renderSettings() {
           ${themes.map(([value, label]) => `<button type="button" data-action="choose-theme" data-theme="${value}" aria-pressed="${S.theme === value}" ${busy ? "disabled" : ""}>${label}</button>`).join("")}
         </div>
       </section>
+      <section class="pi-settingsSection" aria-labelledby="pi-settings-network">
+        <h3 id="pi-settings-network">手机访问</h3>
+        ${S.localClient ? '<div id="webNetworkMount"></div>' : '<p>已连接远程服务</p>'}
+        ${S.localClient ? `<form id="webPasswordForm" class="pi-passwordForm">
+          <label for="webPassword">${S.passwordConfigured ? "更换访问密码" : "设置访问密码"}</label>
+          <div class="pi-settingsActionRow"><input id="webPassword" class="pi-passwordInput" type="password" name="password" autocomplete="new-password" maxlength="256" required placeholder="${S.passwordConfigured ? "输入新密码" : "输入固定密码"}"><button type="submit" class="pi-settingsAction">保存密码</button></div>
+          <p class="pi-passwordStatus" role="status">${S.passwordConfigured ? "已设置密码，修改后手机需重新登录。" : "设置后，手机可用此密码登录。"}</p>
+        </form>` : ""}
+      </section>
       <section class="pi-settingsSection" aria-labelledby="pi-settings-maintenance">
         <h3 id="pi-settings-maintenance">Pi 维护</h3>
         <div class="pi-settingsActionRow">
@@ -2302,12 +2480,56 @@ function renderOverlay() {
   const overlay = $("#overlayMount");
   if (!overlay) return;
   if (S.settingsOpen) {
+    const passwordForm = $("#webPasswordForm", overlay);
+    const focused = overlay.contains(document.activeElement) ? document.activeElement : null;
+    const scrollTop = $(".pi-settingsPanel", overlay)?.scrollTop || 0;
+    passwordForm?.remove();
+    networkSettings.form?.remove();
     overlay.innerHTML = renderSettings();
+    const nextForm = $("#webPasswordForm", overlay);
+    if (passwordForm && nextForm) {
+      $("label", passwordForm).textContent = $("label", nextForm).textContent;
+      $(".pi-passwordStatus", passwordForm).textContent = $(".pi-passwordStatus", nextForm).textContent;
+      $("#webPassword", passwordForm).placeholder = $("#webPassword", nextForm).placeholder;
+      nextForm.replaceWith(passwordForm);
+    }
+    const form = $("#webPasswordForm", overlay);
+    if (form) form.onsubmit = saveWebPassword;
+    const networkMount = $("#webNetworkMount", overlay);
+    if (networkMount) {
+      networkMount.replaceWith(networkForm());
+      updateNetworkForm();
+    }
+    if (focused?.isConnected) focused.focus({ preventScroll: true });
+    $(".pi-settingsPanel", overlay).scrollTop = scrollTop;
     return;
   }
   overlay.innerHTML = "";
 }
 
+async function saveWebPassword(event) {
+  event.preventDefault();
+  const form = event.currentTarget;
+  const input = $("#webPassword", form);
+  const button = $("button", form);
+  if (input.disabled) return;
+  const password = input.value;
+  input.disabled = true;
+  button.disabled = true;
+  try {
+    await post("/api/auth/password", { password });
+    input.value = "";
+    S.passwordConfigured = true;
+    renderOverlay();
+    showToast("访问密码已保存");
+  } catch (error) {
+    showToast(error.message || String(error), "error");
+  } finally {
+    input.disabled = false;
+    button.disabled = false;
+  }
+}
+
 function syncComposerInput() {
   const input = $("#composerInput");
   if (!input) return;
@@ -2345,10 +2567,12 @@ function bindComposerInput() {
       const hasImage = [...(event.clipboardData?.items || [])].some((item) => item.type.startsWith("image/"));
       if (!hasImage) return;
       event.preventDefault();
-      void pasteSystemClipboard();
+      if (S.localClient) void pasteSystemClipboard();
+      else void uploadImages([...(event.clipboardData?.items || [])].filter((item) => item.type.startsWith("image/")).map((item) => item.getAsFile()).filter(Boolean));
     });
     input.addEventListener("keydown", (event) => {
-      if (event.isComposing) return;
+      if (event.isComposing || event.keyCode === 229) return;
+      if (event.key === "Enter" && usesTouchInput() && !event.ctrlKey && !event.metaKey) return;
       if (S.commandMenuOpen) {
         const commands = commandSuggestions();
         if ((event.key === "ArrowUp" || event.key === "ArrowDown") && commands.length > 0) {
@@ -2427,10 +2651,16 @@ async function loadBootstrap() {
   const boot = await api("/api/bootstrap");
   S.workspaces = applySavedWorkspaceOrder(boot.workspaces || []);
   S.collapsed = new Set(S.workspaces.map((workspace) => workspace.id));
-  S.currentWorkspaceId = boot.currentWorkspaceId;
-  S.currentSessionId = boot.currentSessionId;
+  const savedSessionId = sessionStorage.getItem("pi-web-current-session");
+  S.currentSessionId = S.workspaces.some((workspace) => workspace.sessions?.some((session) => session.id === savedSessionId))
+    ? savedSessionId : boot.currentSessionId;
   S.serverInstanceId = boot.instanceId || null;
-  S.currentWorkspaceId = boot.currentWorkspaceId || S.workspaces[0]?.id || null;
+  S.localClient = boot.localClient !== false;
+  S.lanEnabled = boot.lanEnabled === true;
+  S.lanUrls = boot.lanUrls || [];
+  S.passwordConfigured = boot.passwordConfigured === true;
+  S.currentWorkspaceId = S.workspaces.find((workspace) => workspace.sessions?.some((session) => session.id === S.currentSessionId))?.id
+    || boot.currentWorkspaceId || S.workspaces[0]?.id || null;
   S.newSessionSnapshot = {
     session: null,
     state: boot.modelInfo?.state || null,
@@ -2444,10 +2674,12 @@ async function loadBootstrap() {
     dialogs: [],
   };
   renderApp();
-  if (S.currentSessionId) openSession(S.currentSessionId, { silent: true });
+  if (S.currentSessionId) await openSession(S.currentSessionId, { silent: true });
 }
 
 async function openSession(id, opts = {}) {
+  closeMobileSidebar();
+  sessionStorage.setItem("pi-web-current-session", id);
   closeCommandMenu();
   ++S.historyGeneration;
   S.conversationTab = "conversation";
@@ -2536,6 +2768,7 @@ async function adoptWorkspacePath(path) {
 
 async function promptWorkspace() {
   closePopovers();
+  if (!S.localClient) return promptWorkspaceBrowse();
   try {
     const data = await post("/api/fs/pick");
     if (data.error) throw new Error(data.error);
@@ -2690,6 +2923,7 @@ async function navigate(path) {
     target = data;
     browser.home = data.home || browser.home;
     browser.parent = data;
+    browser.pathDraft = null;
     browser.loading = false;
     renderBrowser();
   } catch (error) {
@@ -2955,6 +3189,28 @@ async function refreshWorkspaces() {
   return S.workspaces;
 }
 
+async function copyText(value) {
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    const previous = document.activeElement;
+    const field = document.createElement("textarea");
+    field.value = value;
+    field.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;font-size:16px";
+    document.body.appendChild(field);
+    field.select();
+    const copied = document.execCommand("copy");
+    field.remove();
+    previous?.focus({ preventScroll: true });
+    if (copied) return true;
+    const dialog = el(`<div class="pi-dialogBackdrop"><div class="pi-dialogCard" role="dialog" aria-label="手动复制"><div class="pi-dialogTitle">长按文本复制</div><textarea class="pi-copyField" readonly>${esc(value)}</textarea><button type="button" class="pi-settingsAction">关闭</button></div></div>`);
+    dialog.querySelector("button").onclick = () => dialog.remove();
+    document.body.appendChild(dialog);
+    return false;
+  }
+}
+
 let toastTimer = 0;
 function showToast(message, type = "info") {
   $(".pi-toast")?.remove();
@@ -3073,7 +3329,50 @@ async function deleteImageAttachment(id) {
   await api(`/api/attachments/${encodeURIComponent(id)}`, { method: "DELETE" }).catch(() => {});
 }
 
+function readImageData(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result).split(",")[1]);
+    reader.onerror = () => reject(new Error("无法读取图片"));
+    reader.readAsDataURL(file);
+  });
+}
+
+async function uploadImages(files) {
+  if (S.clipboardBusy || !files.length) return;
+  if (!modelSupportsImages()) return showToast("当前模型不支持图片输入，请先切换视觉模型", "warning");
+  if (S.draftAttachments.length + files.length > 4) return showToast("每条消息最多附加 4 张图片", "warning");
+  if (files.some((file) => file.size > 15 * 1024 * 1024)) return showToast("图片不能超过 15 MB", "warning");
+  const key = draftKey();
+  setClipboardBusy(true);
+  try {
+    for (const file of files) {
+      const data = await post("/api/attachments", { data: await readImageData(file) });
+      if (draftKey() !== key) {
+        await deleteImageAttachment(data.attachment?.id);
+        showToast("会话已切换，本次上传已取消", "warning");
+        break;
+      }
+      setDraftAttachments([...S.draftAttachments, data.attachment]);
+    }
+    queueRender(true, { conversation: true });
+  } catch (error) {
+    showToast(error.message || String(error), "error");
+  } finally {
+    setClipboardBusy(false);
+  }
+}
+
 async function pasteSystemClipboard() {
+  if (!S.localClient) {
+    const picker = document.createElement("input");
+    picker.type = "file";
+    picker.accept = "image/png,image/jpeg,image/gif,image/webp,image/bmp";
+    picker.multiple = true;
+    picker.addEventListener("change", () => { void uploadImages([...picker.files]); });
+    picker.click();
+    return;
+  }
   if (S.clipboardBusy) return;
   if (!modelSupportsImages()) {
     showToast("当前模型不支持图片输入，请先切换视觉模型", "warning");
@@ -3245,6 +3544,7 @@ async function executeLocalSlashCommand(text) {
     S.settingsOpen = true;
     closePopovers();
     renderOverlay();
+    void loadNetworkSettings();
   } else if (name === "new") {
     await ensureWorkspaceThen((ws) => createAndOpenSession(ws.id, ""));
   } else if (name === "rewind" || name === "tree") {
@@ -3272,8 +3572,7 @@ async function executeLocalSlashCommand(text) {
     const value = assistantMessageText(assistant);
     if (!value) showToast("暂无可复制的助手回复", "warning");
     else {
-      await navigator.clipboard.writeText(value);
-      showToast("已复制最后一条助手回复");
+      if (await copyText(value)) showToast("已复制最后一条助手回复");
     }
   } else if (name === "session") {
     const snap = currentSnapshot();
@@ -3285,7 +3584,7 @@ async function executeLocalSlashCommand(text) {
       `路径：${snap.session?.cwd || "-"}`,
       `模型：${snap.state?.model?.provider || "-"}/${snap.state?.model?.id || "-"} · 思考 ${thinkingLabel(snap.state?.thinkingLevel || "off")}`,
       `上下文：${fmtNum(cu.tokens ?? 0)} / ${fmtNum(cu.contextWindow ?? 0)} tok（${Math.round(cu.percent ?? 0)}%）`,
-      `输入 ${fmtNum(tokens.input ?? 0)} · 输出 ${fmtNum(tokens.output ?? 0)} tok · 成本 ${typeof stats.cost === "number" ? `$${stats.cost.toFixed(3)}` : "-"}`,
+      `输入 ${fmtNum(tokens.input ?? 0)} · 输出 ${fmtNum(tokens.output ?? 0)} tok · 成本 ${typeof stats.cost === "number" ? formatCost(stats.cost) : "-"}`,
     ].join("\n"));
   }
   return true;
@@ -3655,6 +3954,7 @@ async function onClick(ev) {
     S.settingsOpen = true;
     closePopovers();
     renderOverlay();
+    void loadNetworkSettings();
   } else if (action === "settings-close") {
     if (!S.maintenanceBusy) {
       S.settingsOpen = false;
@@ -3780,11 +4080,7 @@ async function onClick(ev) {
     const command = availableSlashCommands().find((item) => item.name === target.dataset.command);
     await applyCommandSuggestion(command, false);
   } else if (action === "copy-text") {
-    try {
-      await navigator.clipboard.writeText(target.dataset.text || "");
-    } catch {
-      // ignore
-    }
+    if (await copyText(target.dataset.text || "")) showToast("已复制");
   } else if (action === "copy-assistant-message") {
     const messageIndex = Number.parseInt(target.dataset.messageIndex || "", 10);
     const message = currentSnapshot().messages?.[messageIndex];
@@ -3794,8 +4090,7 @@ async function onClick(ev) {
       return;
     }
     try {
-      await navigator.clipboard.writeText(value);
-      showToast("已复制本条 AI 回复");
+      if (await copyText(value)) showToast("已复制本条 AI 回复");
     } catch (error) {
       showToast(`复制失败：${error.message || String(error)}`, "error");
     }
@@ -3955,7 +4250,7 @@ async function onClick(ev) {
       contextLine,
       `输入 ${fmtNum(tokens.input ?? 0)} · 输出 ${fmtNum(tokens.output ?? 0)} · 缓存读 ${fmtNum(tokens.cacheRead ?? 0)} · 缓存写 ${fmtNum(tokens.cacheWrite ?? 0)} tok`,
       `消息 ${stats.totalMessages ?? "?"}（用户 ${stats.userMessages ?? "?"} / 助手 ${stats.assistantMessages ?? "?"} / 工具 ${stats.toolCalls ?? "?"}）`,
-      typeof stats.cost === "number" ? `成本 $${stats.cost.toFixed(3)}` : "",
+      typeof stats.cost === "number" ? `成本 ${formatCost(stats.cost)}` : "",
     ].filter(Boolean);
     alert(lines.join("\n"));
   } else if (action === "view-options") {
@@ -4140,12 +4435,109 @@ function onWorkspaceDragEnd() {
   resetWorkspaceDrag();
 }
 
+let loginPromise;
+
+function requireLogin() {
+  if (loginPromise) return loginPromise;
+  eventSource?.close();
+  loginPromise = (async () => {
+    let { passwordConfigured } = await api("/api/auth");
+    const dialog = el(`<div class="pi-loginBackdrop">
+      <form class="pi-loginCard" aria-labelledby="pi-login-title">
+        <h1 id="pi-login-title">登录 Pi Web</h1>
+        <p class="pi-loginMessage" role="status">${passwordConfigured ? "输入访问密码，继续使用会话。" : "请先在电脑网页的「设置 → 手机访问」中设置密码。"}</p>
+        <label for="pi-login-password">访问密码</label>
+        <input id="pi-login-password" class="pi-passwordInput" type="password" name="password" autocomplete="current-password" maxlength="256" required ${passwordConfigured ? "" : "disabled"}>
+        <button type="submit" class="pi-settingsAction pi-settingsActionPrimary">${passwordConfigured ? "登录" : "重新检查"}</button>
+      </form>
+    </div>`);
+    const root = $("#root");
+    root.inert = true;
+    document.body.appendChild(dialog);
+    const form = $("form", dialog);
+    const input = $("input", dialog);
+    const button = $("button", dialog);
+    const message = $(".pi-loginMessage", dialog);
+    await new Promise((resolve) => {
+      form.onsubmit = async (event) => {
+        event.preventDefault();
+        if (button.disabled) return;
+        button.disabled = true;
+        try {
+          if (!passwordConfigured) {
+            ({ passwordConfigured } = await api("/api/auth"));
+            input.disabled = !passwordConfigured;
+            button.textContent = passwordConfigured ? "登录" : "重新检查";
+            if (passwordConfigured) {
+              message.textContent = "输入访问密码，继续使用会话。";
+              input.focus();
+            }
+            return;
+          }
+          await post("/api/auth", { password: input.value });
+          input.value = "";
+          dialog.remove();
+          root.inert = false;
+          resolve();
+        } catch (error) {
+          message.textContent = error.message || String(error);
+          input.focus();
+        } finally {
+          button.disabled = false;
+        }
+      };
+    });
+    if (eventSource) connectEvents();
+  })().finally(() => { loginPromise = null; });
+  return loginPromise;
+}
+
+let eventSource;
+let resyncPending;
+
+async function resyncAfterReconnect() {
+  if (resyncPending) return resyncPending;
+  resyncPending = (async () => {
+    const boot = await api("/api/bootstrap");
+    S.workspaces = applySavedWorkspaceOrder(boot.workspaces || []);
+    S.serverInstanceId = boot.instanceId || null;
+    S.lanEnabled = boot.lanEnabled === true;
+    S.lanUrls = boot.lanUrls || [];
+    S.passwordConfigured = boot.passwordConfigured === true;
+    if (S.settingsOpen || networkSettings.data) void loadNetworkSettings();
+    const id = S.currentSessionId;
+    const generation = S.openGeneration;
+    if (id && S.workspaces.some((workspace) => workspace.sessions?.some((session) => session.id === id))) {
+      const before = S.snapshots.get(id);
+      const data = await post(`/api/sessions/${encodeURIComponent(id)}/open`);
+      if (S.snapshots.get(id) === before) S.snapshots.set(id, data);
+    } else if (id && generation === S.openGeneration) {
+      rememberCurrentDraft();
+      ++S.openGeneration;
+      S.currentSessionId = null;
+      S.loadingSession = null;
+      loadCurrentDraftValue();
+    }
+    queueRender(true);
+  })().catch((error) => {
+    if (error.status === 401) showToast(error.message, "error");
+  }).finally(() => { resyncPending = null; });
+  return resyncPending;
+}
+
 function connectEvents() {
+  eventSource?.close();
   const es = new EventSource("/api/events");
+  eventSource = es;
+  es.onopen = () => { void resyncAfterReconnect(); };
   es.onmessage = (ev) => {
     try {
       const event = JSON.parse(ev.data);
       if (event.type === "heartbeat") return;
+      if (event.type === "network_changed") {
+        void loadNetworkSettings();
+        return;
+      }
       if (event.type === "maintenance_error") {
         S.maintenanceGeneration += 1;
         S.maintenanceBusy = null;
@@ -4163,17 +4555,10 @@ function connectEvents() {
         return;
       }
       if (event.type === "editor_text") {
-        if (event.sessionId === S.currentSessionId) {
-          setDraftValue(event.text || "");
+        if (event.sessionId === S.currentSessionId && event.text !== S.draft) {
+          restoreMessagesToDraft(event.sessionId, [event.text]);
           closeCommandMenu();
-          restoreDraft();
-          syncComposerInput();
           queueRender(true, { sidebar: false, conversation: true, overlay: false });
-          requestAnimationFrame(() => {
-            const input = $("#composerInput");
-            input?.focus();
-            input?.setSelectionRange(input.value.length, input.value.length);
-          });
         }
         return;
       }
@@ -4210,17 +4595,25 @@ function connectEvents() {
       // ignore malformed event
     }
   };
-  es.onerror = () => {
-    // EventSource reconnects automatically.
-  };
+  es.onerror = () => { void resyncAfterReconnect(); };
 }
 
-window.addEventListener("resize", applyFrameLayout);
+window.addEventListener("resize", () => { updateViewport(); applyFrameLayout(); });
+window.visualViewport?.addEventListener("resize", updateViewport);
+window.visualViewport?.addEventListener("scroll", updateViewport);
+window.addEventListener("online", () => { if (eventSource && !loginPromise) connectEvents(); });
+document.addEventListener("visibilitychange", () => {
+  if (!document.hidden && eventSource && !loginPromise) connectEvents();
+});
+updateViewport();
 bindGlobalEvents();
-loadBootstrap().catch((error) => {
+async function startApp() {
+  await loadBootstrap();
+  connectEvents();
+}
+startApp().catch((error) => {
   document.body.insertAdjacentHTML(
     "beforeend",
     `<div class="pi-dialogBackdrop"><div class="pi-dialogCard"><div class="pi-dialogTitle">无法连接到 pi-web</div><div class="pi-dialogMessage">${esc(error.message)}</div></div></div>`,
   );
 });
-connectEvents();