codex-weixin 0.2.6 → 0.2.8

package/dist/web/app.js

@@ -15,6 +15,7 @@ const state = {
   sendingMessage: false,
   savingSessionRuntime: false,
   updateInfo: null,
+  updateChecking: false,
   updateInstalling: false,
   selectedAccountId: "",
   chatFiles: []
@@ -25,6 +26,7 @@ const MAX_CHAT_FILE_BYTES = 50 * 1024 * 1024;
 const DISMISSED_UPDATE_KEY = "codex-weixin.dismissed-update";
 const UPDATE_CHECK_INTERVAL_MS = 6 * 60 * 60 * 1000;
 const UPDATE_RECONNECT_TIMEOUT_MS = 90 * 1000;
+let streamingRenderFrame = 0;
 
 const els = {};
 
@@ -48,6 +50,7 @@ document.addEventListener("DOMContentLoaded", () => {
     sessionRuntimeToolbar: document.querySelector("#sessionRuntimeToolbar"),
     sessionModelInput: document.querySelector("#sessionModelInput"),
     sessionEffortInput: document.querySelector("#sessionEffortInput"),
+    sessionStreamInput: document.querySelector("#sessionStreamInput"),
     runningAccountMetric: document.querySelector("#runningAccountMetric"),
     sessionMetric: document.querySelector("#sessionMetric"),
     workspaceMetric: document.querySelector("#workspaceMetric"),
@@ -62,6 +65,8 @@ document.addEventListener("DOMContentLoaded", () => {
     updateProgressDetail: document.querySelector("#updateProgressDetail"),
     updateLaterButton: document.querySelector("#updateLaterButton"),
     updateNowButton: document.querySelector("#updateNowButton"),
+    updateCheckButton: document.querySelector("#updateCheckButton"),
+    settingsVersionValue: document.querySelector("#settingsVersionValue"),
     accountDialog: document.querySelector("#accountDialog"),
     sessionDialog: document.querySelector("#sessionDialog")
   });
@@ -80,6 +85,7 @@ function bindEvents() {
   document.querySelector("#modelInput").addEventListener("change", () => renderEffortOptions(""));
   els.sessionModelInput.addEventListener("change", () => void handleSessionModelChange());
   els.sessionEffortInput.addEventListener("change", () => void saveSessionRuntimeSettings());
+  els.sessionStreamInput.addEventListener("change", () => void saveSessionRuntimeSettings());
   document.querySelector("#accountForm").addEventListener("submit", (event) => void saveAccountRemark(event));
   document.querySelector("#sessionForm").addEventListener("submit", (event) => void saveSession(event));
   document.querySelector("#sessionSenderInput").addEventListener("change", updateNewSessionDefaultTitle);
@@ -96,6 +102,7 @@ function bindEvents() {
   els.qrDialog.addEventListener("close", stopLoginPoll);
   els.updateLaterButton.addEventListener("click", dismissUpdate);
   els.updateNowButton.addEventListener("click", () => void installUpdate());
+  els.updateCheckButton.addEventListener("click", () => void checkForUpdateNow());
   els.updateDialog.addEventListener("cancel", (event) => {
     event.preventDefault();
     if (!state.updateInstalling) dismissUpdate();
@@ -126,23 +133,54 @@ async function bootstrap() {
 }
 
 async function checkForUpdate() {
-  if (state.updateInstalling) return;
+  if (state.updateInstalling || state.updateChecking) return;
   try {
     const info = await api("/api/update", { token: false });
     if (!info.updateAvailable || !info.latestVersion || dismissedUpdateVersion() === info.latestVersion) {
       return;
     }
-    state.updateInfo = info;
-    els.updateCurrentVersion.textContent = `v${String(info.currentVersion).replace(/^v/i, "")}`;
-    els.updateLatestVersion.textContent = `v${String(info.latestVersion).replace(/^v/i, "")}`;
-    resetUpdateDialog();
-    if (!els.updateDialog.open) els.updateDialog.showModal();
-    drawIcons();
+    showAvailableUpdate(info);
   } catch {
     // Update checks are best-effort and must not interrupt the local management page.
   }
 }
 
+async function checkForUpdateNow() {
+  if (state.updateChecking || state.updateInstalling) return;
+  const label = els.updateCheckButton.querySelector("span");
+  state.updateChecking = true;
+  els.updateCheckButton.disabled = true;
+  els.updateCheckButton.classList.add("is-loading");
+  label.textContent = "检查中";
+  try {
+    const info = await api("/api/update?force=1");
+    if (info.error) throw new Error(info.error);
+    if (info.updateAvailable && info.latestVersion) {
+      showAvailableUpdate(info);
+      return;
+    }
+    const current = String(info.currentVersion || state.version || "").replace(/^v/i, "");
+    toast(current ? `已是最新版本 v${current}` : "已是最新版本");
+  } catch (error) {
+    toast(error.message || "无法检查新版本", true);
+  } finally {
+    state.updateChecking = false;
+    els.updateCheckButton.disabled = false;
+    els.updateCheckButton.classList.remove("is-loading");
+    label.textContent = "检查更新";
+    drawIcons();
+  }
+}
+
+function showAvailableUpdate(info) {
+  state.updateInfo = info;
+  els.updateCurrentVersion.textContent = `v${String(info.currentVersion).replace(/^v/i, "")}`;
+  els.updateLatestVersion.textContent = `v${String(info.latestVersion).replace(/^v/i, "")}`;
+  resetUpdateDialog();
+  if (!els.updateDialog.open) els.updateDialog.showModal();
+  drawIcons();
+}
+
 function dismissUpdate() {
   if (state.updateInstalling) return;
   const version = state.updateInfo?.latestVersion;
@@ -290,6 +328,7 @@ function renderProductVersion() {
   const version = state.version.trim();
   els.productVersion.hidden = !version;
   els.productVersion.textContent = version ? `v${version.replace(/^v/i, "")}` : "";
+  els.settingsVersionValue.textContent = version ? `v${version.replace(/^v/i, "")}` : "--";
 }
 
 function renderMetrics() {
@@ -441,6 +480,7 @@ function renderSettings() {
   document.querySelector("#allowedWorkspacesInput").value = (state.config.allowedWorkspaces || []).join("\n");
   document.querySelector("#backendInput").value = state.config.codexBackend || "auto";
   document.querySelector("#sandboxInput").value = state.config.codexExecSandbox || "";
+  document.querySelector("#streamRepliesInput").checked = Boolean(state.config.streamReplies);
   renderModelOptions();
   document.querySelector("#effectiveModelValue").textContent = state.codexRuntime?.model || state.config.model || "Codex 默认";
   document.querySelector("#effectiveEffortValue").textContent = state.codexRuntime?.effort || state.config.effort || "Codex 默认";
@@ -691,23 +731,79 @@ function renderChatPanel() {
     return;
   }
   const renderKey = `messages:${sessionKey(session)}:${responding}:${JSON.stringify(state.sessionMessages)}`;
-  const html = state.sessionMessages.map((message) => `<article class="chat-message is-${escapeAttr(message.role)}${message.attachments?.length ? " has-attachments" : ""}">
+  const html = renderConversationMessages(state.sessionMessages, responding) + (responding ? renderTypingIndicator() : "");
+  setChatMessagesHtml(html, renderKey);
+}
+
+function renderConversationMessages(messages, responding) {
+  const html = [];
+  let lastUserCreatedAt;
+  let index = 0;
+  while (index < messages.length) {
+    const message = messages[index];
+    if (message.kind === "progress") {
+      const progress = [];
+      while (index < messages.length && messages[index].kind === "progress") {
+        progress.push(messages[index]);
+        index += 1;
+      }
+      const nextMessage = messages[index];
+      const active = responding && !nextMessage;
+      const completedAt = nextMessage?.role === "assistant"
+        ? nextMessage.createdAt
+        : progress.at(-1)?.createdAt;
+      html.push(renderProgressGroup(progress, lastUserCreatedAt, completedAt, active));
+      continue;
+    }
+    if (message.role === "user") lastUserCreatedAt = message.createdAt;
+    html.push(renderChatMessage(message));
+    index += 1;
+  }
+  return html.join("");
+}
+
+function renderChatMessage(message) {
+  return `<article class="chat-message is-${escapeAttr(message.role)}${message.attachments?.length ? " has-attachments" : ""}">
     <div class="message-meta"><span>${message.role === "user" ? "你" : "Codex"}</span>${message.createdAt ? `<time datetime="${escapeAttr(message.createdAt)}">${escapeHtml(messageTime(message.createdAt))}</time>` : ""}</div>
     <div class="message-bubble">${message.text ? renderMarkdown(message.text) : ""}${renderMessageAttachments(message.attachments)}</div>
-  </article>`).join("") + (responding ? renderTypingIndicator() : "");
-  setChatMessagesHtml(html, renderKey);
+  </article>`;
+}
+
+function renderProgressGroup(messages, startedAt, completedAt, active) {
+  const duration = formatProcessingDuration(startedAt, active ? new Date().toISOString() : completedAt);
+  return `<details class="chat-progress-group"${active ? " open" : ""}>
+    <summary>
+      <span class="progress-summary-title"><i data-lucide="chevron-right"></i>处理过程</span>
+      <span>${active ? "已处理" : "处理用时"} ${escapeHtml(duration)}</span>
+    </summary>
+    <ol class="progress-list">${messages.map((message) => `<li>${renderMarkdown(message.text)}</li>`).join("")}</ol>
+  </details>`;
+}
+
+function formatProcessingDuration(startValue, endValue) {
+  const start = new Date(startValue || "").getTime();
+  const end = new Date(endValue || "").getTime();
+  if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return "--";
+  const seconds = Math.max(0, Math.round((end - start) / 1000));
+  if (seconds < 60) return `${seconds} 秒`;
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return remaining ? `${minutes} 分 ${remaining} 秒` : `${minutes} 分钟`;
 }
 
 function renderSessionRuntimeControls(session) {
   const disabled = !session || state.sendingMessage || state.savingSessionRuntime;
   els.sessionModelInput.disabled = disabled;
   els.sessionEffortInput.disabled = disabled;
+  els.sessionStreamInput.disabled = disabled;
   const renderKey = session ? [
     sessionKey(session),
     session.model || "",
     session.effort || "",
+    typeof session.streamReplies === "boolean" ? String(session.streamReplies) : "inherit",
     state.config?.model || "",
     state.config?.effort || "",
+    String(Boolean(state.config?.streamReplies)),
     state.codexRuntime?.model || "",
     state.codexRuntime?.effort || "",
     state.codexModels.length
@@ -718,6 +814,7 @@ function renderSessionRuntimeControls(session) {
   if (!session) {
     els.sessionModelInput.innerHTML = '<option value="">选择会话后设置</option>';
     els.sessionEffortInput.innerHTML = '<option value="">选择会话后设置</option>';
+    els.sessionStreamInput.innerHTML = '<option value="">选择会话后设置</option>';
     return;
   }
 
@@ -739,6 +836,14 @@ function renderSessionRuntimeControls(session) {
   els.sessionModelInput.innerHTML = options.map((option) => `<option value="${escapeAttr(option.value)}"${option.title ? ` title="${escapeAttr(option.title)}"` : ""}>${escapeHtml(option.label)}</option>`).join("");
   els.sessionModelInput.value = session.model || "";
   setSessionEffortOptions(session.model || "", session.effort || "");
+  els.sessionStreamInput.innerHTML = [
+    `<option value="">继承全局（${state.config?.streamReplies ? "开启" : "关闭"}）</option>`,
+    '<option value="on">开启</option>',
+    '<option value="off">关闭</option>'
+  ].join("");
+  els.sessionStreamInput.value = typeof session.streamReplies === "boolean"
+    ? session.streamReplies ? "on" : "off"
+    : "";
 }
 
 function setSessionEffortOptions(modelOverride, preferredEffort) {
@@ -783,18 +888,23 @@ async function saveSessionRuntimeSettings() {
   const key = sessionKey(session);
   const model = els.sessionModelInput.value;
   const effort = els.sessionEffortInput.value;
+  const stream = els.sessionStreamInput.value;
   state.savingSessionRuntime = true;
   renderChatPanel();
   try {
     const result = await api(`/api/sessions/${encodeURIComponent(session.accountId)}/${encodeURIComponent(session.id)}`, {
       method: "PATCH",
-      body: { model: model || null, effort: effort || null }
+      body: {
+        model: model || null,
+        effort: effort || null,
+        streamReplies: stream ? stream === "on" : null
+      }
     });
     const index = state.sessions.findIndex((candidate) => sessionKey(candidate) === key);
     if (index >= 0) state.sessions[index] = result.session;
     els.sessionRuntimeToolbar.dataset.renderKey = "";
     renderSessions();
-    toast("会话模型设置已更新");
+    toast("会话设置已更新");
   } catch (error) {
     toast(error.message, true);
     await refreshData(false);
@@ -859,6 +969,8 @@ async function sendSessionMessage(event) {
   const files = [...state.chatFiles];
   if (!session || (!text && !files.length) || state.sendingMessage) return;
   const key = sessionKey(session);
+  const streaming = session.streamReplies ?? Boolean(state.config?.streamReplies);
+  let progressSequence = 0;
   state.sendingMessage = true;
   state.sessionMessages.push({
     id: `pending-${Date.now()}`,
@@ -881,10 +993,29 @@ async function sendSessionMessage(event) {
     const body = new FormData();
     body.append("text", text);
     files.forEach((file) => body.append("files", file, file.name));
-    await api(`/api/sessions/${encodeURIComponent(session.accountId)}/${encodeURIComponent(session.id)}/messages`, {
-      method: "POST",
-      body
-    });
+    const url = `/api/sessions/${encodeURIComponent(session.accountId)}/${encodeURIComponent(session.id)}/messages`;
+    if (streaming) {
+      await streamApi(`${url}?stream=1`, { method: "POST", body }, (streamEvent) => {
+        if (state.selectedSessionKey !== key) return;
+        if (streamEvent.type === "progress" && streamEvent.message?.trim()) {
+          state.sessionMessages.push({
+            id: `progress-${Date.now()}-${progressSequence++}`,
+            role: "assistant",
+            text: streamEvent.message.trim(),
+            kind: "progress",
+            createdAt: new Date().toISOString(),
+            attachments: []
+          });
+          scheduleStreamingRender();
+        }
+        if (streamEvent.type === "done" && streamEvent.result?.message) {
+          state.sessionMessages.push(streamEvent.result.message);
+          scheduleStreamingRender();
+        }
+      });
+    } else {
+      await api(url, { method: "POST", body });
+    }
     await refreshData(false);
     if (state.selectedSessionKey === key) {
       await loadSelectedSessionMessages();
@@ -903,6 +1034,15 @@ async function sendSessionMessage(event) {
   }
 }
 
+function scheduleStreamingRender() {
+  if (streamingRenderFrame) return;
+  streamingRenderFrame = requestAnimationFrame(() => {
+    streamingRenderFrame = 0;
+    renderChatPanel();
+    scrollChatToEnd();
+  });
+}
+
 function handleChatFileSelection(event) {
   const nextFiles = [...event.target.files];
   event.target.value = "";
@@ -1115,7 +1255,8 @@ async function saveSettings(event) {
         codexBackend: document.querySelector("#backendInput").value,
         codexExecSandbox: document.querySelector("#sandboxInput").value || null,
         model: document.querySelector("#modelInput").value.trim(),
-        effort: document.querySelector("#effortInput").value.trim()
+        effort: document.querySelector("#effortInput").value.trim(),
+        streamReplies: document.querySelector("#streamRepliesInput").checked
       }
     });
     state.config = result.config;
@@ -1159,6 +1300,46 @@ async function api(url, options = {}) {
   return data;
 }
 
+async function streamApi(url, options, onEvent) {
+  const headers = {};
+  if (state.requestToken) headers["X-Codex-Weixin-Token"] = state.requestToken;
+  const response = await fetch(url, {
+    method: options.method || "POST",
+    headers,
+    body: options.body
+  });
+  const contentType = response.headers.get("content-type") || "";
+  if (!contentType.startsWith("application/x-ndjson")) {
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(data.error || `请求失败 (${response.status})`);
+    return data.result;
+  }
+  if (!response.ok || !response.body) {
+    throw new Error(`请求失败 (${response.status})`);
+  }
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let result;
+  const consumeLine = (line) => {
+    if (!line.trim()) return;
+    const streamEvent = JSON.parse(line);
+    if (streamEvent.type === "error") throw new Error(streamEvent.error || "过程进度失败");
+    onEvent(streamEvent);
+    if (streamEvent.type === "done") result = streamEvent.result;
+  };
+  while (true) {
+    const { value, done } = await reader.read();
+    buffer += decoder.decode(value || new Uint8Array(), { stream: !done });
+    const lines = buffer.split(/\r?\n/);
+    buffer = lines.pop() || "";
+    for (const line of lines) consumeLine(line);
+    if (done) break;
+  }
+  if (buffer) consumeLine(buffer);
+  return result;
+}
+
 function emptyState(icon, title, description = "", action = "") {
   return `<div class="empty-state"><div class="empty-state-inner"><span class="empty-icon"><i data-lucide="${escapeAttr(icon)}"></i></span><h2>${escapeHtml(title)}</h2>${description ? `<p>${escapeHtml(description)}</p>` : ""}${action}</div></div>`;
 }

package/dist/web/index.html

@@ -109,6 +109,14 @@
               <span>推理强度</span>
               <select id="sessionEffortInput" disabled><option value="">继承全局设置</option></select>
             </label>
+            <label>
+              <span>过程进度</span>
+              <select id="sessionStreamInput" disabled>
+                <option value="">继承全局设置</option>
+                <option value="on">开启</option>
+                <option value="off">关闭</option>
+              </select>
+            </label>
           </div>
           <div class="chat-messages" id="chatMessages" aria-live="polite"></div>
           <form class="chat-composer" id="chatComposer">
@@ -184,6 +192,26 @@
               </select>
               <small class="field-hint effective-setting"><span>当前生效</span><strong id="effectiveEffortValue">正在读取</strong></small>
             </label>
+            <label class="toggle-field" for="streamRepliesInput">
+              <span>过程进度</span>
+              <span class="toggle-control">
+                <input id="streamRepliesInput" name="streamReplies" type="checkbox">
+                <span aria-hidden="true"></span>
+              </span>
+            </label>
+          </div>
+        </div>
+        <div class="settings-group">
+          <h2>版本</h2>
+          <div class="settings-update">
+            <span class="settings-update-version">
+              <small>当前版本</small>
+              <strong id="settingsVersionValue">--</strong>
+            </span>
+            <button class="button button-secondary" id="updateCheckButton" type="button">
+              <i data-lucide="refresh-cw"></i>
+              <span>检查更新</span>
+            </button>
           </div>
         </div>
         <div class="form-actions">
@@ -206,9 +234,9 @@
     </div>
     <div class="modal-body update-modal-body">
       <div class="update-version-flow" aria-label="版本升级">
-        <span><small>当前版本</small><strong id="updateCurrentVersion">--</strong></span>
-        <i data-lucide="arrow-right" aria-hidden="true"></i>
-        <span class="is-latest"><small>最新版本</small><strong id="updateLatestVersion">--</strong></span>
+        <span class="update-version-item"><small>当前版本</small><strong id="updateCurrentVersion">--</strong></span>
+        <span class="update-version-arrow" aria-hidden="true"><i data-lucide="arrow-right"></i></span>
+        <span class="update-version-item is-latest"><small>最新版本</small><strong id="updateLatestVersion">--</strong></span>
       </div>
       <p class="update-description">更新期间微信连接会短暂中断，完成后服务将自动重启并恢复连接。</p>
       <div class="update-progress" id="updateProgress" aria-live="polite" hidden>

package/dist/web/styles.css

@@ -165,7 +165,7 @@ h2 { margin: 0; font-size: 19px; line-height: 1.3; }
 .chat-header { min-height: 82px; padding: 17px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
 .chat-header h2 { max-width: 620px; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
 .chat-context { max-width: 720px; margin: 5px 0 0; overflow: hidden; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
-.chat-runtime-toolbar { min-height: 54px; padding: 9px 20px; border-bottom: 1px solid var(--line); background: #f7f9f7; display: grid; grid-template-columns: auto minmax(190px, 1fr) minmax(170px, .72fr); align-items: center; gap: 14px; }
+.chat-runtime-toolbar { min-height: 54px; padding: 9px 20px; border-bottom: 1px solid var(--line); background: #f7f9f7; display: grid; grid-template-columns: auto minmax(170px, 1fr) minmax(150px, .72fr) minmax(130px, .55fr); align-items: center; gap: 12px; }
 .chat-runtime-title { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
 .chat-runtime-title svg { width: 14px; height: 14px; color: var(--green-dark); }
 .chat-runtime-toolbar label { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; }
@@ -176,6 +176,16 @@ h2 { margin: 0; font-size: 19px; line-height: 1.3; }
 .chat-message.is-user { margin-left: auto; justify-items: end; }
 .chat-message.is-assistant { margin-right: auto; justify-items: start; }
 .chat-message.has-attachments { width: min(78%, 720px); }
+.chat-progress-group { width: min(78%, 720px); margin: 0 0 22px; color: var(--ink-soft); }
+.chat-progress-group summary { min-height: 32px; padding: 0 3px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; font-size: 10px; font-weight: 700; }
+.chat-progress-group summary::-webkit-details-marker { display: none; }
+.chat-progress-group summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
+.progress-summary-title { color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
+.progress-summary-title svg { width: 14px; height: 14px; color: var(--green-dark); transition: transform 160ms ease; }
+.chat-progress-group[open] .progress-summary-title svg { transform: rotate(90deg); }
+.progress-list { margin: 5px 0 0 8px; padding: 8px 12px 8px 24px; border-left: 2px solid #b9c9c0; font-size: 11px; line-height: 1.6; }
+.progress-list li + li { margin-top: 7px; }
+.progress-list p { margin: 0; }
 .message-meta { padding: 0 3px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 750; }
 .message-meta time { font-weight: 550; }
 .message-bubble { max-width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 7px; background: white; box-shadow: 0 4px 14px rgb(23 34 29 / 6%); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
@@ -248,8 +258,21 @@ h2 { margin: 0; font-size: 19px; line-height: 1.3; }
 .settings-form { border-top: 1px solid var(--ink); }
 .settings-group { padding: 26px 0 30px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }
 .settings-group h2 { font-size: 14px; }
-.settings-group > label, .field-grid { width: 100%; max-width: 720px; grid-column: 2; }
+.settings-group > label, .field-grid, .settings-update { width: 100%; max-width: 720px; grid-column: 2; }
 .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+.settings-update { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
+.settings-update-version { min-width: 0; display: grid; gap: 4px; }
+.settings-update-version small { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
+.settings-update-version strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }
+.button.is-loading svg { animation: spin .8s linear infinite; }
+.toggle-field { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8faf8; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
+.toggle-control { width: 38px; height: 22px; position: relative; flex: 0 0 38px; }
+.toggle-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+.toggle-control > span { position: absolute; inset: 0; border: 1px solid #aeb8b2; border-radius: 11px; background: #dfe4e1; transition: background-color .16s ease, border-color .16s ease; }
+.toggle-control > span::after { content: ""; width: 16px; height: 16px; position: absolute; left: 2px; top: 2px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(23 34 29 / 24%); transition: transform .16s ease; }
+.toggle-control input:checked + span { border-color: var(--green-dark); background: var(--green); }
+.toggle-control input:checked + span::after { transform: translateX(16px); }
+.toggle-control input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent); outline-offset: 2px; }
 label { min-width: 0; display: grid; gap: 8px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
 .field-hint { color: var(--ink-soft); font-size: 10px; font-weight: 500; line-height: 1.5; }
 .effective-setting { min-width: 0; display: flex; align-items: center; gap: 7px; }
@@ -273,11 +296,14 @@ input:focus, select:focus, textarea:focus { border-color: var(--focus); outline:
 .update-modal-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--radius); color: var(--green-dark); background: var(--green-soft); display: grid; place-items: center; }
 .update-modal-icon svg { width: 21px; height: 21px; }
 .update-modal-body { display: grid; gap: 17px; }
-.update-version-flow { min-height: 86px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
-.update-version-flow > span { min-width: 0; }
+.update-version-flow { min-height: 86px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 12px; }
+.update-version-item { min-width: 0; }
 .update-version-flow small { margin-bottom: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 750; display: block; }
 .update-version-flow strong { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; display: block; }
-.update-version-flow > svg { width: 17px; height: 17px; color: #84908a; }
+.update-version-arrow { width: 100%; color: #7e8b84; display: flex; align-items: center; gap: 5px; }
+.update-version-arrow::before { content: ""; height: 1px; flex: 1; background: #c5cec9; }
+.update-version-arrow svg { width: 15px; height: 15px; flex: 0 0 15px; stroke-width: 1.8; }
+.update-version-flow .is-latest { text-align: right; }
 .update-version-flow .is-latest strong { color: var(--green-dark); }
 .update-description { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
 .update-progress { min-height: 64px; padding: 12px 14px; border: 1px solid #b9ddc7; border-radius: var(--radius); background: var(--green-soft); display: flex; align-items: center; gap: 13px; }
@@ -365,7 +391,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--focus); outline:
   .composer-files { padding-left: 45px; }
   .composer-hint { margin-left: 45px; }
   .settings-group { grid-template-columns: 1fr; gap: 16px; }
-  .settings-group > label, .field-grid { grid-column: 1; }
+  .settings-group > label, .field-grid, .settings-update { grid-column: 1; }
   .field-grid { grid-template-columns: 1fr; }
   .qr-stage { min-height: 342px; padding-inline: 16px; }
   .qr-frame { width: min(280px, calc(100vw - 72px)); height: min(280px, calc(100vw - 72px)); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex-weixin",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Local multi-account WeChat server for OpenAI Codex.",
   "license": "MIT",
   "author": "Xuechao Zou",