codex-to-im 0.1.0 → 0.1.2

package/dist/ui-server.mjs

@@ -4616,16 +4616,16 @@ function parsePositiveInt(value) {
 }
 function loadConfig() {
   const env = loadRawConfigEnv();
-  const rawRuntime = env.get("CTI_RUNTIME") || "claude";
-  const runtime = ["claude", "codex", "auto"].includes(rawRuntime) ? rawRuntime : "claude";
+  const rawRuntime = env.get("CTI_RUNTIME") || "codex";
+  const runtime = ["claude", "codex", "auto"].includes(rawRuntime) ? rawRuntime : "codex";
   return {
     runtime,
-    enabledChannels: splitCsv(env.get("CTI_ENABLED_CHANNELS")) ?? [],
+    enabledChannels: splitCsv(env.get("CTI_ENABLED_CHANNELS")) ?? ["feishu"],
     defaultWorkDir: env.get("CTI_DEFAULT_WORKDIR") || process.cwd(),
     defaultModel: env.get("CTI_DEFAULT_MODEL") || void 0,
     defaultMode: env.get("CTI_DEFAULT_MODE") || "code",
     historyMessageLimit: parsePositiveInt(env.get("CTI_HISTORY_MESSAGE_LIMIT")) ?? 8,
-    codexSkipGitRepoCheck: env.has("CTI_CODEX_SKIP_GIT_REPO_CHECK") ? env.get("CTI_CODEX_SKIP_GIT_REPO_CHECK") === "true" : void 0,
+    codexSkipGitRepoCheck: env.has("CTI_CODEX_SKIP_GIT_REPO_CHECK") ? env.get("CTI_CODEX_SKIP_GIT_REPO_CHECK") === "true" : true,
     tgBotToken: env.get("CTI_TG_BOT_TOKEN") || void 0,
     tgChatId: env.get("CTI_TG_CHAT_ID") || void 0,
     tgAllowedUsers: splitCsv(env.get("CTI_TG_ALLOWED_USERS")),
@@ -4891,7 +4891,7 @@ var CodexProvider = class {
   /** Maps session IDs to Codex thread IDs for resume. */
   threadIds = /* @__PURE__ */ new Map();
   /**
-   * Lazily load the Codex SDK. Throws a clear error if not installed.
+   * Lazily load the Codex SDK. Throws a clear error if the installation is incomplete.
    */
   async ensureSDK() {
     if (this.sdk && this.codex) {
@@ -4901,7 +4901,7 @@ var CodexProvider = class {
       this.sdk = await Function('return import("@openai/codex-sdk")')();
     } catch {
       throw new Error(
-        "[CodexProvider] @openai/codex-sdk is not installed. Install it with: npm install @openai/codex-sdk"
+        "[CodexProvider] @openai/codex-sdk is missing from this codex-to-im installation. Reinstall codex-to-im or run npm install in the project root."
       );
     }
     const apiKey = process.env.CTI_CODEX_API_KEY || process.env.CODEX_API_KEY || process.env.OPENAI_API_KEY || void 0;
@@ -4940,6 +4940,10 @@ var CodexProvider = class {
                 { type: "text", text: params.prompt }
               ];
               for (const file of imageFiles) {
+                if (file.filePath && fs2.existsSync(file.filePath)) {
+                  parts.push({ type: "local_image", path: file.filePath });
+                  continue;
+                }
                 const ext = MIME_EXT[file.type] || ".png";
                 const tmpPath = path2.join(os2.tmpdir(), `cti-img-${Date.now()}-${Math.random().toString(36).slice(2)}${ext}`);
                 fs2.writeFileSync(tmpPath, Buffer.from(file.data, "base64"));
@@ -5128,9 +5132,39 @@ import os3 from "node:os";
 import path3 from "node:path";
 var ACTIVE_WINDOW_MS = 15 * 60 * 1e3;
 var MAX_SESSION_META_BYTES = 4 * 1024 * 1024;
+var TITLE_MAX_CHARS = 72;
+function getCodexHome() {
+  return process.env.CODEX_HOME || path3.join(os3.homedir(), ".codex");
+}
 function getCodexSessionsRoot() {
-  const codexHome = process.env.CODEX_HOME || path3.join(os3.homedir(), ".codex");
-  return path3.join(codexHome, "sessions");
+  return path3.join(getCodexHome(), "sessions");
+}
+function getArchivedSessionsRoot() {
+  return path3.join(getCodexHome(), "archived_sessions");
+}
+function getSessionIndexPath() {
+  return path3.join(getCodexHome(), "session_index.jsonl");
+}
+function extractThreadIdFromRolloutName(name) {
+  const match = name.match(/-([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})\.jsonl$/i);
+  return match?.[1] || null;
+}
+function loadArchivedThreadIds() {
+  const archivedRoot = getArchivedSessionsRoot();
+  if (!fs3.existsSync(archivedRoot)) return /* @__PURE__ */ new Set();
+  let entries;
+  try {
+    entries = fs3.readdirSync(archivedRoot, { withFileTypes: true });
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+  const ids = /* @__PURE__ */ new Set();
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    const threadId = extractThreadIdFromRolloutName(entry.name);
+    if (threadId) ids.add(threadId);
+  }
+  return ids;
 }
 function readFirstLine(filePath, maxBytes = MAX_SESSION_META_BYTES) {
   const fd = fs3.openSync(filePath, "r");
@@ -5178,7 +5212,36 @@ function isDesktopLike(meta) {
   const source = meta?.source?.toLowerCase() || "";
   return originator.includes("desktop") || source === "vscode" || source === "desktop";
 }
-function parseDesktopSession(filePath) {
+function loadThreadNameIndex(archivedThreadIds) {
+  const indexPath = getSessionIndexPath();
+  if (!fs3.existsSync(indexPath)) return /* @__PURE__ */ new Map();
+  let content = "";
+  try {
+    content = fs3.readFileSync(indexPath, "utf-8");
+  } catch {
+    return /* @__PURE__ */ new Map();
+  }
+  const titles = /* @__PURE__ */ new Map();
+  for (const line of content.split(/\r?\n/)) {
+    if (!line.trim()) continue;
+    let parsed;
+    try {
+      parsed = JSON.parse(line);
+    } catch {
+      continue;
+    }
+    const threadId = parsed.id?.trim();
+    const title = trimTitle(parsed.thread_name || "");
+    if (!threadId || !title || archivedThreadIds.has(threadId)) continue;
+    const updatedAt = parsed.updated_at || "";
+    const existing = titles.get(threadId);
+    if (!existing || updatedAt >= existing.updatedAt) {
+      titles.set(threadId, { title, updatedAt });
+    }
+  }
+  return new Map(Array.from(titles.entries()).map(([threadId, entry]) => [threadId, entry.title]));
+}
+function parseDesktopSession(filePath, threadNames, archivedThreadIds) {
   const firstLine = readFirstLine(filePath);
   if (!firstLine) return null;
   let parsed;
@@ -5190,6 +5253,9 @@ function parseDesktopSession(filePath) {
   if (parsed.type !== "session_meta" || !parsed.payload?.id || !isDesktopLike(parsed.payload)) {
     return null;
   }
+  if (archivedThreadIds.has(parsed.payload.id)) {
+    return null;
+  }
   let stat;
   try {
     stat = fs3.statSync(filePath);
@@ -5200,6 +5266,8 @@ function parseDesktopSession(filePath) {
   const lastEventAt = stat.mtime.toISOString();
   const firstSeenAt = parsed.payload.timestamp || parsed.timestamp || stat.birthtime.toISOString();
   const threadId = parsed.payload.id;
+  const title = threadNames.get(threadId);
+  if (!title) return null;
   return {
     threadId,
     filePath,
@@ -5209,18 +5277,27 @@ function parseDesktopSession(filePath) {
     cliVersion: parsed.payload.cli_version || void 0,
     firstSeenAt,
     lastEventAt,
-    title: cwd ? path3.basename(cwd) : `Session ${threadId.slice(0, 8)}`,
+    title,
     activeEstimate: Date.now() - stat.mtimeMs < ACTIVE_WINDOW_MS
   };
 }
+function trimTitle(text2) {
+  const normalized = text2.replace(/\s+/g, " ").trim();
+  if (!normalized) return "";
+  if (normalized.length <= TITLE_MAX_CHARS) return normalized;
+  return `${normalized.slice(0, TITLE_MAX_CHARS - 3).trimEnd()}...`;
+}
 function listDesktopSessions(limit = 12) {
   const root = getCodexSessionsRoot();
   if (!fs3.existsSync(root)) return [];
+  const archivedThreadIds = loadArchivedThreadIds();
+  const threadNames = loadThreadNameIndex(archivedThreadIds);
+  if (threadNames.size === 0) return [];
   const files = [];
   walkSessionFiles(root, files);
   const sessions = [];
   for (const filePath of files) {
-    const session = parseDesktopSession(filePath);
+    const session = parseDesktopSession(filePath, threadNames, archivedThreadIds);
     if (session) sessions.push(session);
   }
   return sessions.sort((a, b) => b.lastEventAt.localeCompare(a.lastEventAt)).slice(0, Math.max(1, limit));
@@ -5229,6 +5306,9 @@ function getDesktopSessionByThreadId(threadId) {
   const sessions = listDesktopSessions(200);
   return sessions.find((session) => session.threadId === threadId) || null;
 }
+function isArchivedDesktopThread(threadId) {
+  return loadArchivedThreadIds().has(threadId);
+}
 
 // src/session-bindings.ts
 import path4 from "node:path";
@@ -5237,9 +5317,6 @@ function getSessionName(session) {
   if (session.working_directory) return path4.basename(session.working_directory);
   return session.id.slice(0, 8);
 }
-function getSessionDescription(session) {
-  return session.working_directory || "(no working directory)";
-}
 function bindStoreToSession(store, channelType, chatId, sessionId) {
   const session = store.getSession(sessionId);
   if (!session) return null;
@@ -5284,29 +5361,29 @@ function bindStoreToSdkSession(store, channelType, chatId, sdkSessionId, opts) {
     model: model || session.model
   });
 }
-function listBindingTargetOptions(store, desktopLimit = 12) {
-  const desktopOptions = listDesktopSessions(desktopLimit).map((session) => ({
+function listBindingTargetOptions(_store, desktopLimit = 12) {
+  return listDesktopSessions(desktopLimit).map((session) => ({
     key: `desktop:${session.threadId}`,
     kind: "desktop",
     id: session.threadId,
-    label: `[Desktop] ${session.title}`,
-    description: `${session.threadId.slice(0, 8)}... \xB7 ${session.cwd || "(no cwd)"}`
-  }));
-  const sessionOptions = store.listSessions().map((session) => ({
-    key: `session:${session.id}`,
-    kind: "session",
-    id: session.id,
-    label: `[Internal] ${getSessionName(session)}`,
-    description: `${session.id.slice(0, 8)}... \xB7 ${getSessionDescription(session)}${session.sdk_session_id ? ` \xB7 thread ${session.sdk_session_id.slice(0, 8)}...` : ""}`
+    label: session.title,
+    description: `${session.threadId.slice(0, 8)}... \xB7 ${session.cwd || "(no cwd)"}`,
+    cwd: session.cwd,
+    threadId: session.threadId
   }));
-  return [...desktopOptions, ...sessionOptions];
 }
 function listBindingSummaries(store) {
   return store.listChannelBindings().map((binding) => {
     const session = store.getSession(binding.codepilotSessionId);
     const currentThreadId = binding.sdkSessionId || session?.sdk_session_id || void 0;
+    const desktop = currentThreadId ? getDesktopSessionByThreadId(currentThreadId) : null;
+    const archived = currentThreadId ? isArchivedDesktopThread(currentThreadId) : false;
     const currentTargetKey = currentThreadId ? `desktop:${currentThreadId}` : `session:${binding.codepilotSessionId}`;
-    const currentTargetLabel = currentThreadId ? `Desktop thread ${currentThreadId.slice(0, 8)}...` : `Internal session ${binding.codepilotSessionId.slice(0, 8)}...`;
+    const currentTargetLabel = currentThreadId ? desktop?.title || (archived ? `\u5DF2\u5F52\u6863\u684C\u9762\u7EBF\u7A0B ${currentThreadId.slice(0, 8)}...` : `Desktop thread ${currentThreadId.slice(0, 8)}...`) : getSessionName(session || {
+      id: binding.codepilotSessionId,
+      working_directory: binding.workingDirectory,
+      model: binding.model
+    });
     return {
       id: binding.id,
       channelType: binding.channelType,
@@ -5509,6 +5586,10 @@ async function stopBridge() {
   }
   return getBridgeStatus();
 }
+async function restartBridge() {
+  await stopBridge();
+  return await startBridge();
+}
 function getBridgeLogs(lines = 200) {
   ensureDirs();
   const filePath = path5.join(logsDir, "bridge.log");
@@ -6483,6 +6564,18 @@ function mergeConfig(payload) {
     weixinMediaEnabled: payload.weixinMediaEnabled === true
   };
 }
+function getWeixinAccountsPayload() {
+  return listWeixinAccounts().map((account) => ({
+    accountId: account.accountId,
+    name: account.name,
+    userId: account.userId,
+    enabled: account.enabled,
+    baseUrl: account.baseUrl,
+    cdnBaseUrl: account.cdnBaseUrl,
+    lastLoginAt: account.lastLoginAt,
+    updatedAt: account.updatedAt
+  }));
+}
 async function validateFeishuCredentials(config) {
   if (!config.feishuAppId || !config.feishuAppSecret) {
     return { ok: false, message: "Feishu App ID / App Secret \u4E0D\u80FD\u4E3A\u7A7A\u3002" };
@@ -6559,155 +6652,253 @@ function renderHtml() {
     <title>Codex to IM</title>
     <style>
       :root {
-        --bg: #faf8f5;
+        --bg: #f5f7fa;
         --surface: #ffffff;
-        --panel: #f2ece5;
-        --border: #d7cec3;
-        --text: #2f2419;
-        --muted: #6d5d4a;
-        --primary: #9a3412;
-        --primary-strong: #7c2d12;
-        --success: #166534;
-        --danger: #b91c1c;
-        --sidebar: #efe7dd;
+        --surface-soft: #fafafa;
+        --border: #e5e7eb;
+        --border-strong: #d0d7e2;
+        --text: #111827;
+        --muted: #667085;
+        --primary: #1677ff;
+        --primary-strong: #0958d9;
+        --success: #15803d;
+        --danger: #dc2626;
+        --sidebar: #001529;
+        --sidebar-border: #0f2b46;
+        --sidebar-text: #c7d2e0;
+        --sidebar-active: #1677ff;
+        --code-bg: #0f172a;
       }
 
       * { box-sizing: border-box; }
       html, body { height: 100%; }
       body {
         margin: 0;
-        font: 14px/1.5 "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
+        font: 14px/1.5 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
         color: var(--text);
         background: var(--bg);
       }
 
+      button, input, select, textarea {
+        font: inherit;
+      }
+
       .shell {
         min-height: 100vh;
         display: grid;
-        grid-template-columns: 248px minmax(0, 1fr);
+        grid-template-columns: 232px minmax(0, 1fr);
       }
 
       .sidebar {
         background: var(--sidebar);
-        border-right: 1px solid var(--border);
-        padding: 28px 20px;
+        color: var(--sidebar-text);
+        padding: 20px 16px;
+        border-right: 1px solid var(--sidebar-border);
+      }
+
+      .brand {
+        padding: 10px 12px 18px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        margin-bottom: 18px;
       }
 
-      .sidebar-title {
-        font-size: 17px;
+      .brand-title {
+        margin: 0;
+        color: #ffffff;
+        font-size: 16px;
         font-weight: 700;
-        margin: 0 0 6px;
       }
 
-      .sidebar-copy {
-        margin: 0 0 24px;
-        color: var(--muted);
+      .brand-copy {
+        margin: 6px 0 0;
+        color: var(--sidebar-text);
+        font-size: 13px;
       }
 
       .nav {
         display: grid;
-        gap: 8px;
+        gap: 4px;
       }
 
-      .nav a {
-        color: var(--text);
-        text-decoration: none;
-        padding: 8px 10px;
+      .nav-link {
+        width: 100%;
+        border: 0;
+        background: transparent;
+        color: var(--sidebar-text);
+        text-align: left;
+        padding: 10px 12px;
         border-radius: 8px;
+        cursor: pointer;
+      }
+
+      .nav-link:hover {
+        background: rgba(255, 255, 255, 0.08);
+        color: #ffffff;
       }
 
-      .nav a:hover {
-        background: rgba(255, 255, 255, 0.55);
+      .nav-link.active {
+        background: var(--sidebar-active);
+        color: #ffffff;
       }
 
       .main {
-        padding: 28px 32px 40px;
+        padding: 28px 32px 36px;
       }
 
-      .topbar {
+      .page {
+        display: none;
+      }
+
+      .page.active {
+        display: block;
+      }
+
+      .page-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
-        gap: 20px;
-        margin-bottom: 24px;
+        gap: 16px;
+        margin-bottom: 20px;
       }
 
-      .topbar h1 {
-        margin: 0 0 4px;
+      .page-title {
+        margin: 0;
         font-size: 28px;
         line-height: 1.2;
       }
 
-      .topbar p {
-        margin: 0;
+      .page-copy {
+        margin: 6px 0 0;
         color: var(--muted);
       }
 
       .status-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 12px;
-        margin-bottom: 24px;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 16px;
+        margin-bottom: 20px;
       }
 
-      .status-card, .panel {
+      .status-card,
+      .panel {
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: 10px;
       }
 
       .status-card {
-        padding: 14px 16px;
+        padding: 16px 18px;
       }
 
       .status-card strong {
         display: block;
         font-size: 12px;
         color: var(--muted);
-        margin-bottom: 8px;
         font-weight: 600;
+        margin-bottom: 8px;
       }
 
       .status-value {
-        font-size: 20px;
+        font-size: 22px;
+        line-height: 1.2;
         font-weight: 700;
+        word-break: break-word;
       }
 
-      .stack {
-        display: grid;
-        gap: 20px;
+      .panel {
+        padding: 20px;
       }
 
       .section-grid {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 18px;
+        gap: 20px;
       }
 
-      .channel-grid {
+      .overview-grid {
         display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 18px;
+        grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
+        gap: 20px;
       }
 
-      .panel {
-        padding: 18px;
+      .panel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 12px;
+        margin-bottom: 16px;
       }
 
-      .panel h2 {
-        margin: 0 0 16px;
+      .panel-header h2,
+      .panel-header h3 {
+        margin: 0;
         font-size: 18px;
       }
 
+      .panel-header p {
+        margin: 6px 0 0;
+        color: var(--muted);
+      }
+
+      .toolbar,
+      .actions,
+      .session-actions {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+
+      button {
+        border: 1px solid var(--border-strong);
+        background: #ffffff;
+        color: var(--text);
+        border-radius: 8px;
+        padding: 9px 14px;
+        cursor: pointer;
+      }
+
+      button:hover {
+        border-color: var(--primary);
+        color: var(--primary);
+      }
+
+      button.primary {
+        background: var(--primary);
+        border-color: var(--primary);
+        color: #ffffff;
+      }
+
+      button.primary:hover {
+        background: var(--primary-strong);
+        border-color: var(--primary-strong);
+        color: #ffffff;
+      }
+
+      button[disabled] {
+        border-color: var(--border);
+        color: #9ca3af;
+        background: #f3f4f6;
+        cursor: not-allowed;
+      }
+
+      button[disabled]:hover {
+        border-color: var(--border);
+        color: #9ca3af;
+      }
+
       .fields {
         display: grid;
-        gap: 14px;
+        gap: 16px;
       }
 
       .field-row {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 14px;
+        gap: 16px;
+      }
+
+      .field-row.triple {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
       }
 
       label {
@@ -6719,16 +6910,15 @@ function renderHtml() {
 
       input, select, textarea {
         width: 100%;
-        border: 1px solid var(--border);
-        background: #fff;
+        border: 1px solid var(--border-strong);
+        background: #ffffff;
         color: var(--text);
         border-radius: 8px;
         padding: 10px 12px;
-        font: inherit;
       }
 
       input:focus, select:focus, textarea:focus {
-        outline: 2px solid rgba(154, 52, 18, 0.16);
+        outline: 2px solid rgba(22, 119, 255, 0.14);
         border-color: var(--primary);
       }
 
@@ -6739,7 +6929,7 @@ function renderHtml() {
 
       .checkbox-row {
         display: flex;
-        gap: 18px;
+        gap: 16px;
         flex-wrap: wrap;
       }
 
@@ -6748,7 +6938,6 @@ function renderHtml() {
         align-items: center;
         gap: 8px;
         color: var(--text);
-        font-weight: 500;
       }
 
       .checkbox input {
@@ -6757,129 +6946,217 @@ function renderHtml() {
         margin: 0;
       }
 
-      .actions {
-        display: flex;
+      .notice {
+        padding: 12px 14px;
+        background: #f8fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        color: var(--muted);
+      }
+
+      .message {
+        display: none;
+        margin-top: 14px;
+        padding: 10px 12px;
+        border-radius: 8px;
+      }
+
+      .message.show { display: block; }
+      .message.success { background: rgba(21, 128, 61, 0.10); color: var(--success); }
+      .message.error { background: rgba(220, 38, 38, 0.10); color: var(--danger); }
+
+      .global-message-host {
+        position: fixed;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: grid;
         gap: 10px;
-        flex-wrap: wrap;
+        z-index: 2000;
+        pointer-events: none;
       }
 
-      button {
+      .global-message {
+        min-width: 240px;
+        max-width: min(560px, calc(100vw - 32px));
+        padding: 10px 14px;
+        border-radius: 8px;
         border: 1px solid var(--border);
-        background: #fff;
+        background: rgba(255, 255, 255, 0.96);
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
         color: var(--text);
-        border-radius: 8px;
-        padding: 10px 14px;
-        font: inherit;
-        cursor: pointer;
       }
 
-      button.primary {
-        background: var(--primary);
-        border-color: var(--primary);
-        color: #fff;
+      .global-message.success {
+        border-color: rgba(21, 128, 61, 0.16);
       }
 
-      button.primary:hover {
-        background: var(--primary-strong);
+      .global-message.error {
+        border-color: rgba(220, 38, 38, 0.16);
       }
 
-      button:hover {
-        border-color: var(--primary);
+      .info-list {
+        display: grid;
+        gap: 12px;
       }
 
-      .notice {
+      .info-item {
         padding: 12px 14px;
+        border: 1px solid var(--border);
         border-radius: 8px;
-        background: var(--panel);
+        background: var(--surface-soft);
+      }
+
+      .info-item strong {
+        display: block;
+        margin-bottom: 4px;
+        font-size: 12px;
         color: var(--muted);
       }
 
-      .notice strong {
-        color: var(--text);
+      .mono,
+      .project-group-path,
+      .session-path,
+      .binding-detail code {
+        font-family: "Cascadia Code", Consolas, "SF Mono", monospace;
       }
 
-      .logs {
-        white-space: pre-wrap;
-        word-break: break-word;
-        background: #231b14;
-        color: #f3eee7;
+      .session-list {
+        display: grid;
+        gap: 16px;
+      }
+
+      .project-group {
+        border: 1px solid var(--border);
         border-radius: 10px;
-        padding: 14px;
-        min-height: 260px;
-        overflow: auto;
+        background: var(--surface);
+        padding: 16px;
+        display: grid;
+        gap: 14px;
       }
 
-      .message {
-        margin-top: 12px;
-        padding: 10px 12px;
-        border-radius: 8px;
-        display: none;
+      .project-group-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 16px;
       }
 
-      .message.show { display: block; }
-      .message.success { background: rgba(22, 101, 52, 0.1); color: var(--success); }
-      .message.error { background: rgba(185, 28, 28, 0.1); color: var(--danger); }
+      .project-group-title {
+        font-size: 16px;
+        font-weight: 700;
+      }
 
-      .session-list {
+      .project-group-path {
+        color: var(--muted);
+        font-size: 12px;
+        margin-top: 4px;
+        word-break: break-all;
+      }
+
+      .project-group-count {
+        color: var(--muted);
+        font-size: 12px;
+        white-space: nowrap;
+      }
+
+      .project-session-list {
         display: grid;
-        gap: 10px;
+        gap: 12px;
       }
 
       .session-card {
         border: 1px solid var(--border);
         border-radius: 10px;
-        padding: 12px 14px;
-        background: #fcfbf9;
+        padding: 14px;
+        background: var(--surface-soft);
+      }
+
+      .session-card.current-thread {
+        border-color: rgba(22, 119, 255, 0.32);
+        background: rgba(22, 119, 255, 0.03);
       }
 
       .session-head {
-        display: flex;
-        justify-content: space-between;
-        gap: 12px;
+        display: grid;
+        grid-template-columns: minmax(0, 1.9fr) 150px minmax(220px, 1fr) auto;
+        gap: 16px;
         align-items: center;
-        margin-bottom: 6px;
+      }
+
+      .session-main {
+        min-width: 0;
+        display: grid;
+        gap: 4px;
       }
 
       .session-title {
         font-weight: 700;
       }
 
-      .session-meta {
+      .session-title-row {
         display: flex;
+        align-items: center;
         gap: 8px;
         flex-wrap: wrap;
-        margin: 8px 0;
       }
 
-      .session-pill {
+      .session-mark {
         display: inline-flex;
         align-items: center;
-        padding: 3px 8px;
+        padding: 1px 8px;
         border-radius: 999px;
-        border: 1px solid var(--border);
+        background: rgba(22, 119, 255, 0.10);
+        color: var(--primary);
+        font-size: 12px;
+        border: 1px solid rgba(22, 119, 255, 0.16);
+      }
+
+      .session-thread {
         color: var(--muted);
-        background: #fff;
         font-size: 12px;
       }
 
-      .session-pill.active {
-        color: var(--success);
-        border-color: rgba(22, 101, 52, 0.26);
-        background: rgba(22, 101, 52, 0.08);
+      .session-thread code {
+        word-break: break-all;
       }
 
-      .session-path {
-        font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
+      .session-inline-action {
+        border: 0;
+        background: transparent;
+        color: var(--primary);
+        padding: 0;
+        margin-left: 8px;
+        font-size: 12px;
+      }
+
+      .session-inline-action:hover {
+        color: var(--primary-strong);
+        text-decoration: underline;
+      }
+
+      .session-cell {
+        min-width: 0;
+        display: grid;
+        gap: 4px;
+      }
+
+      .session-label {
+        color: var(--muted);
         font-size: 12px;
+      }
+
+      .session-value,
+      .session-path {
         color: var(--muted);
+        font-size: 12px;
         word-break: break-all;
       }
 
       .session-actions {
-        display: flex;
-        gap: 8px;
+        justify-content: flex-end;
+        align-items: center;
         flex-wrap: wrap;
-        margin-top: 10px;
       }
 
       .panel-block {
@@ -6894,217 +7171,535 @@ function renderHtml() {
         font-weight: 700;
       }
 
-      .binding-list {
-        display: grid;
-        gap: 10px;
+      .channel-shell {
+        padding: 0;
+        overflow: hidden;
       }
 
-      .binding-item {
-        border: 1px solid var(--border);
-        border-radius: 10px;
-        background: #fcfbf9;
-        padding: 12px 14px;
+      .channel-tabs {
+        display: flex;
+        align-items: flex-end;
+        gap: 0;
+        padding: 0 20px;
+        border-bottom: 1px solid var(--border);
+        background: #ffffff;
       }
 
-      .binding-head {
-        display: flex;
-        justify-content: space-between;
-        align-items: baseline;
-        gap: 10px;
-        margin-bottom: 6px;
+      .command-sections {
+        display: grid;
+        gap: 14px;
       }
 
-      .binding-title {
-        font-weight: 700;
+      .command-section {
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        background: var(--surface-soft);
+        overflow: hidden;
       }
 
-      .binding-detail {
-        color: var(--muted);
-        font-size: 12px;
-        margin-top: 4px;
-        word-break: break-all;
+      .command-section-title {
+        margin: 0;
+        padding: 10px 14px;
+        font-size: 14px;
+        font-weight: 700;
+        border-bottom: 1px solid var(--border);
+        background: #ffffff;
       }
 
-      .binding-controls {
+      .command-list {
+        display: grid;
+      }
+
+      .command-item {
+        display: grid;
+        grid-template-columns: 280px minmax(0, 1fr);
+        gap: 16px;
+        padding: 10px 14px;
+        border-top: 1px solid var(--border);
+      }
+
+      .command-item:first-child {
+        border-top: 0;
+      }
+
+      .command-item code {
+        word-break: break-all;
+      }
+
+      .channel-tab {
+        border: 0;
+        border-bottom: 2px solid transparent;
+        border-radius: 0;
+        padding: 14px 18px 12px;
+        background: transparent;
+        color: var(--muted);
+        margin-bottom: -1px;
+      }
+
+      .channel-tab.active {
+        color: var(--primary);
+        border-bottom-color: var(--primary);
+        background: transparent;
+      }
+
+      .channel-view {
+        display: none;
+        padding: 20px;
+      }
+
+      .channel-view.active {
+        display: block;
+      }
+
+      .binding-list {
+        display: grid;
+        gap: 10px;
+      }
+
+      .binding-item {
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        background: var(--surface-soft);
+        padding: 12px 14px;
+      }
+
+      .binding-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 10px;
+        margin-bottom: 6px;
+      }
+
+      .binding-title {
+        font-weight: 700;
+      }
+
+      .binding-detail {
+        color: var(--muted);
+        font-size: 12px;
+        margin-top: 4px;
+        word-break: break-all;
+      }
+
+      .binding-controls {
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto;
         gap: 10px;
         margin-top: 12px;
       }
 
-      .binding-empty {
-        padding: 12px 14px;
-        border: 1px dashed var(--border);
+      .binding-table-wrap {
+        margin-top: 12px;
+        border: 1px solid var(--border);
         border-radius: 10px;
+        background: #ffffff;
+        overflow: hidden;
+      }
+
+      .binding-table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      .binding-table th,
+      .binding-table td {
+        padding: 10px 12px;
+        border-top: 1px solid var(--border);
+        text-align: left;
+        vertical-align: top;
+      }
+
+      .binding-table thead th {
+        border-top: 0;
+        background: #f8fafc;
+        color: var(--muted);
+        font-size: 12px;
+        font-weight: 700;
+      }
+
+      .binding-table tbody tr.current {
+        background: rgba(22, 119, 255, 0.04);
+      }
+
+      .binding-table-title {
+        font-weight: 700;
+        word-break: break-word;
+      }
+
+      .binding-table-thread,
+      .binding-table-path {
+        font-size: 12px;
         color: var(--muted);
-        background: #fcfbf9;
+        word-break: break-all;
+      }
+
+      .binding-table-mark {
+        display: inline-flex;
+        align-items: center;
+        margin-left: 8px;
+        padding: 1px 8px;
+        border-radius: 999px;
+        background: rgba(22, 119, 255, 0.10);
+        color: var(--primary);
+        font-size: 12px;
+      }
+
+      .binding-target-btn {
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        background: #ffffff;
+        white-space: nowrap;
+      }
+
+      .binding-target-btn.current {
+        border-color: rgba(22, 119, 255, 0.30);
+        background: rgba(22, 119, 255, 0.08);
+        color: var(--primary);
       }
 
-      .ghost {
+      .binding-empty {
+        padding: 12px 14px;
+        border: 1px dashed var(--border-strong);
+        border-radius: 8px;
         color: var(--muted);
+        background: var(--surface-soft);
       }
 
+      .logs {
+        white-space: pre-wrap;
+        word-break: break-word;
+        background: var(--code-bg);
+        color: #e2e8f0;
+        border-radius: 10px;
+        padding: 16px;
+        min-height: 420px;
+        overflow: auto;
+      }
+
+      .ghost,
       .small {
         color: var(--muted);
         font-size: 12px;
       }
 
-      @media (max-width: 1080px) {
+      @media (max-width: 1180px) {
+        .overview-grid,
+        .section-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      @media (max-width: 980px) {
         .shell { grid-template-columns: 1fr; }
-        .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
-        .section-grid { grid-template-columns: 1fr; }
-        .channel-grid { grid-template-columns: 1fr; }
-        .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+        .sidebar { border-right: 0; border-bottom: 1px solid var(--sidebar-border); }
+        .nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+        .main { padding: 20px 20px 28px; }
+        .field-row,
+        .field-row.triple,
+        .command-item,
         .binding-controls { grid-template-columns: 1fr; }
+        .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      }
+
+      @media (max-width: 720px) {
+        .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+        .status-grid { grid-template-columns: 1fr; }
+        .page-header,
+        .panel-header,
+        .project-group-head,
+        .binding-head { flex-direction: column; align-items: stretch; }
+        .session-head { grid-template-columns: 1fr; }
+        .session-actions { justify-content: flex-start; }
       }
     </style>
   </head>
   <body>
     <div class="shell">
       <aside class="sidebar">
-        <p class="sidebar-title">Codex to IM</p>
-        <p class="sidebar-copy">\u672C\u5730\u5B89\u88C5\u3001\u914D\u7F6E\u3001\u6D4B\u8BD5\u548C\u540E\u53F0\u63A7\u5236\u90FD\u5728\u8FD9\u91CC\u3002</p>
+        <div class="brand">
+          <p class="brand-title">Codex to IM</p>
+          <p class="brand-copy">\u672C\u5730\u540E\u53F0\u3001\u4F1A\u8BDD\u5171\u4EAB\u3001\u901A\u9053\u7ED1\u5B9A\u548C\u8C03\u8BD5\u90FD\u8D70\u8FD9\u91CC\u3002</p>
+        </div>
         <nav class="nav">
-          <a href="#overview">\u6982\u89C8</a>
-          <a href="#config">\u914D\u7F6E</a>
-          <a href="#feishu">\u98DE\u4E66</a>
-          <a href="#wechat">\u5FAE\u4FE1</a>
-          <a href="#desktop">\u684C\u9762\u4F1A\u8BDD</a>
-          <a href="#ops">\u8FD0\u884C\u63A7\u5236</a>
-          <a href="#logs">\u65E5\u5FD7</a>
+          <button type="button" class="nav-link active" data-page="overview">\u6982\u89C8</button>
+          <button type="button" class="nav-link" data-page="sessions">\u4F1A\u8BDD</button>
+          <button type="button" class="nav-link" data-page="config">\u914D\u7F6E</button>
+          <button type="button" class="nav-link" data-page="channels">\u901A\u9053</button>
+          <button type="button" class="nav-link" data-page="logs">\u65E5\u5FD7</button>
+          <button type="button" class="nav-link" data-page="commands">\u547D\u4EE4\u8BF4\u660E</button>
         </nav>
       </aside>
       <main class="main">
-        <section class="topbar" id="overview">
-          <div>
-            <h1>\u672C\u5730\u6865\u63A5\u5DE5\u4F5C\u53F0</h1>
-            <p>\u540E\u53F0\u670D\u52A1\u3001\u901A\u9053\u914D\u7F6E\u3001\u684C\u9762\u4F1A\u8BDD\u5171\u4EAB\u548C\u901A\u9053\u6D4B\u8BD5\u90FD\u8D70\u8FD9\u4E00\u9875\u3002</p>
-          </div>
-        </section>
-
-        <section class="status-grid">
-          <div class="status-card">
-            <strong>Bridge</strong>
-            <div class="status-value" id="bridgeStatus">-</div>
-          </div>
-          <div class="status-card">
-            <strong>Codex \u96C6\u6210</strong>
-            <div class="status-value" id="integrationStatus">-</div>
-          </div>
-          <div class="status-card">
-            <strong>Runtime</strong>
-            <div class="status-value" id="runtimeStatus">-</div>
-          </div>
-          <div class="status-card">
-            <strong>Desktop Sessions</strong>
-            <div class="status-value" id="desktopSessionCount">-</div>
-          </div>
-          <div class="status-card">
-            <strong>IM Bindings</strong>
-            <div class="status-value" id="bindingCount">-</div>
-          </div>
-          <div class="status-card">
-            <strong>Config Home</strong>
-            <div class="status-value" id="homeStatus" style="font-size:14px;">-</div>
+        <section class="page active" data-page="overview">
+          <div class="page-header">
+            <div>
+              <h1 class="page-title">\u6982\u89C8</h1>
+              <p class="page-copy">\u8FD0\u884C\u72B6\u6001\u3001\u540E\u53F0\u63A7\u5236\u548C\u5F53\u524D\u73AF\u5883\u96C6\u4E2D\u5728\u8FD9\u4E00\u9875\u3002</p>
+            </div>
           </div>
-        </section>
 
-        <div class="stack">
-          <section class="panel" id="desktop">
-            <h2>\u6700\u8FD1\u684C\u9762\u4F1A\u8BDD</h2>
-            <div class="notice">
-              \u8FD9\u91CC\u5217\u51FA\u6700\u8FD1\u5728 <code>Codex Windows App</code> \u4E2D\u6D3B\u8DC3\u8FC7\u7684\u672C\u5730\u4F1A\u8BDD\uFF0C\u4F5C\u4E3A\u63A5\u7BA1\u5230\u98DE\u4E66\u6216\u5FAE\u4FE1\u7684\u5019\u9009\u5165\u53E3\u3002
+          <section class="status-grid">
+            <div class="status-card">
+              <strong>Bridge</strong>
+              <div class="status-value" id="bridgeStatus">-</div>
             </div>
-            <div class="notice" style="margin-top: 12px;">
-              \u6700\u77ED\u8DEF\u5F84\uFF1A\u5728\u8FD9\u91CC\u627E\u5230\u76EE\u6807 thread\uFF0C\u7136\u540E\u628A <code>/thread 019d1da4</code> \u8FD9\u6837\u7684\u547D\u4EE4\u53D1\u7ED9\u98DE\u4E66\u673A\u5668\u4EBA\uFF0C\u6216\u5728\u4E0B\u9762\u7684\u7ED1\u5B9A\u5217\u8868\u91CC\u76F4\u63A5\u5207\u6362\u3002
+            <div class="status-card">
+              <strong>Codex \u96C6\u6210</strong>
+              <div class="status-value" id="integrationStatus">-</div>
             </div>
-            <div class="session-actions">
-              <button id="refreshDesktopBtn">\u5237\u65B0\u684C\u9762\u4F1A\u8BDD</button>
+            <div class="status-card">
+              <strong>Runtime</strong>
+              <div class="status-value" id="runtimeStatus">-</div>
+            </div>
+            <div class="status-card">
+              <strong>Desktop Sessions</strong>
+              <div class="status-value" id="desktopSessionCount">-</div>
+            </div>
+            <div class="status-card">
+              <strong>IM Bindings</strong>
+              <div class="status-value" id="bindingCount">-</div>
+            </div>
+            <div class="status-card">
+              <strong>Config Home</strong>
+              <div class="status-value" id="homeStatus" style="font-size: 14px;">-</div>
             </div>
-            <div class="small" id="desktopSessionMeta" style="margin: 12px 0 14px;">\u6B63\u5728\u52A0\u8F7D\u2026</div>
-            <div class="session-list" id="desktopSessionsList"></div>
-            <div class="message" id="desktopMessage"></div>
           </section>
 
-          <div class="section-grid">
-            <section class="panel" id="config">
-              <h2>\u57FA\u7840\u914D\u7F6E</h2>
-              <div class="fields">
-                <div class="field-row">
-                  <label>
-                    Runtime
-                    <select id="runtime">
-                      <option value="codex">codex</option>
-                      <option value="auto">auto</option>
-                      <option value="claude">claude</option>
-                    </select>
-                  </label>
-                  <label>
-                    \u9ED8\u8BA4\u6A21\u5F0F
-                    <select id="defaultMode">
-                      <option value="code">code</option>
-                      <option value="plan">plan</option>
-                      <option value="ask">ask</option>
-                    </select>
-                  </label>
-                  <label>
-                    /history \u8FD4\u56DE\u6761\u6570
-                    <input id="historyMessageLimit" type="number" min="1" max="20" value="8" />
-                  </label>
-                </div>
-                <label>
-                  \u9ED8\u8BA4\u5DE5\u4F5C\u76EE\u5F55
-                  <input id="defaultWorkDir" placeholder="D:\\workspace\\project" />
-                </label>
-                <label>
-                  \u9ED8\u8BA4\u6A21\u578B
-                  <input id="defaultModel" placeholder="\u7559\u7A7A\u5219\u4F7F\u7528 runtime \u9ED8\u8BA4\u6A21\u578B" />
-                </label>
-                <div class="checkbox-row">
-                  <label class="checkbox"><input id="channelFeishu" type="checkbox" /> \u542F\u7528\u98DE\u4E66</label>
-                  <label class="checkbox"><input id="channelWeixin" type="checkbox" /> \u542F\u7528\u5FAE\u4FE1</label>
-                  <label class="checkbox"><input id="autoApprove" type="checkbox" /> \u81EA\u52A8\u6279\u51C6\u5DE5\u5177\u6743\u9650</label>
-                </div>
-                <div class="checkbox-row">
-                  <label class="checkbox"><input id="codexSkipGitRepoCheck" type="checkbox" /> \u5141\u8BB8\u5728\u672A\u4FE1\u4EFB Git \u76EE\u5F55\u8FD0\u884C Codex</label>
+          <div class="overview-grid">
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>\u8FD0\u884C\u63A7\u5236</h2>
+                  <p>\u4FDD\u5B58\u914D\u7F6E\u540E\uFF0C\u53EF\u4EE5\u76F4\u63A5\u5728\u8FD9\u91CC\u542F\u505C bridge\u3001\u6D4B\u8BD5 Codex \u6216\u5237\u65B0\u6574\u4F53\u72B6\u6001\u3002</p>
                 </div>
-                <div class="small">\u5982\u679C\u65B0\u5EFA\u4F1A\u8BDD\u62A5 \u201CNot inside a trusted directory\u201D\uFF0C\u53EF\u4EE5\u6253\u5F00\u8FD9\u4E2A\u9009\u9879\u3002\u4FEE\u6539\u540E\u9700\u8981\u91CD\u542F Bridge \u624D\u4F1A\u751F\u6548\u3002</div>
               </div>
-            </section>
-
-            <section class="panel" id="ops">
-              <h2>\u8FD0\u884C\u63A7\u5236</h2>
               <div class="actions">
                 <button class="primary" id="startBridgeBtn">\u542F\u52A8 Bridge</button>
                 <button id="stopBridgeBtn">\u505C\u6B62 Bridge</button>
+                <button id="restartBridgeBtn">\u91CD\u542F Bridge</button>
                 <button id="testCodexBtn">\u6D4B\u8BD5 Codex</button>
                 <button id="refreshBtn">\u5237\u65B0\u72B6\u6001</button>
               </div>
+
               <div class="panel-block">
                 <p class="panel-subtitle">\u5F53\u524D\u80FD\u529B</p>
-                <div class="notice">
-                  \u5DF2\u63A5\u901A\uFF1A\u4FDD\u5B58\u914D\u7F6E\u3001\u540E\u53F0\u542F\u505C\u3001\u98DE\u4E66\u51ED\u636E\u6D4B\u8BD5\u3001\u5FAE\u4FE1\u626B\u7801\u3001Codex \u8FDE\u63A5\u6D4B\u8BD5\u3001\u684C\u9762\u4F1A\u8BDD\u53D1\u73B0\u3001IM \u7ED1\u5B9A\u67E5\u770B\u4E0E\u7F51\u9875\u4FA7\u5207\u6362\u3002
-                </div>
+                <div class="notice">\u5DF2\u63A5\u901A\uFF1A\u4FDD\u5B58\u914D\u7F6E\u3001\u540E\u53F0\u542F\u505C\u3001\u98DE\u4E66\u51ED\u636E\u6D4B\u8BD5\u3001\u5FAE\u4FE1\u626B\u7801\u3001Codex \u8FDE\u63A5\u6D4B\u8BD5\u3001\u684C\u9762\u4F1A\u8BDD\u53D1\u73B0\u3001IM \u7ED1\u5B9A\u67E5\u770B\u4E0E\u7F51\u9875\u4FA7\u5207\u6362\u3002</div>
               </div>
+
               <div class="panel-block">
                 <p class="panel-subtitle">\u53EF\u9009 Codex \u96C6\u6210</p>
-                <div class="notice">
-                  \u4E3B\u6D41\u7A0B\u4E0D\u4F9D\u8D56\u8FD9\u5C42\u96C6\u6210\u3002\u53EA\u6709\u5F53\u4F60\u60F3\u5728 Codex \u91CC\u76F4\u63A5\u6253\u5F00 <code>codex-to-im</code>\uFF0C\u6216\u8005\u4FDD\u7559\u4E00\u4E2A\u201C\u5171\u4EAB\u5F53\u524D\u4F1A\u8BDD\u5230\u98DE\u4E66\u201D\u7684\u8F7B\u5165\u53E3\u65F6\uFF0C\u624D\u9700\u8981\u5B89\u88C5\u5B83\u3002
-                </div>
+                <div class="notice">\u4E3B\u6D41\u7A0B\u4E0D\u4F9D\u8D56\u8FD9\u5C42\u96C6\u6210\u3002\u53EA\u6709\u5F53\u4F60\u60F3\u5728 Codex \u91CC\u76F4\u63A5\u6253\u5F00 codex-to-im\uFF0C\u6216\u8005\u4FDD\u7559\u4E00\u4E2A\u201C\u5171\u4EAB\u5F53\u524D\u4F1A\u8BDD\u5230\u98DE\u4E66\u201D\u7684\u8F7B\u5165\u53E3\u65F6\uFF0C\u624D\u9700\u8981\u5B89\u88C5\u5B83\u3002</div>
                 <div class="actions" style="margin-top: 12px;">
                   <button id="installIntegrationBtn">\u5B89\u88C5\u53EF\u9009 Codex \u96C6\u6210</button>
                 </div>
               </div>
-              <div class="small" style="margin-top: 12px;">
-                \u5305\u6839\u76EE\u5F55\uFF1A<span id="packageRoot">-</span>
-              </div>
+
               <div class="message" id="opsMessage"></div>
             </section>
+
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>\u5F53\u524D\u73AF\u5883</h2>
+                  <p>\u8FD9\u91CC\u663E\u793A\u672C\u673A\u8FD0\u884C\u65F6\u548C\u5173\u952E\u76EE\u5F55\uFF0C\u4FBF\u4E8E\u6392\u67E5\u90E8\u7F72\u95EE\u9898\u3002</p>
+                </div>
+              </div>
+              <div class="info-list">
+                <div class="info-item">
+                  <strong>\u5305\u6839\u76EE\u5F55</strong>
+                  <div class="mono" id="packageRoot">-</div>
+                </div>
+                <div class="info-item">
+                  <strong>\u914D\u7F6E\u76EE\u5F55</strong>
+                  <div class="mono" id="overviewHomeStatus">-</div>
+                </div>
+                <div class="info-item">
+                  <strong>\u684C\u9762\u4F1A\u8BDD\u6839\u76EE\u5F55</strong>
+                  <div class="mono" id="desktopRootStatus">-</div>
+                </div>
+                <div class="info-item">
+                  <strong>\u754C\u9762\u8BF4\u660E</strong>
+                  <div>\u5DE6\u4FA7\u5207\u6362\u9875\u9762\uFF1B\u201C\u4F1A\u8BDD\u201D\u7BA1\u7406\u684C\u9762 thread\uFF1B\u201C\u901A\u9053\u201D\u91CC\u67E5\u770B\u98DE\u4E66/\u5FAE\u4FE1\u5F53\u524D\u7ED1\u5B9A\u5E76\u76F4\u63A5\u5207\u6362\u3002</div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </section>
+
+        <section class="page" data-page="sessions">
+          <div class="page-header">
+            <div>
+              <h1 class="page-title">\u4F1A\u8BDD</h1>
+              <p class="page-copy">\u6309\u5DE5\u7A0B\u76EE\u5F55\u67E5\u770B\u6700\u8FD1\u684C\u9762\u4F1A\u8BDD\uFF0C\u5E76\u590D\u5236 thread \u6216\u63A5\u7BA1\u547D\u4EE4\u3002</p>
+            </div>
+            <div class="toolbar">
+              <button id="refreshDesktopBtn">\u5237\u65B0\u684C\u9762\u4F1A\u8BDD</button>
+            </div>
+          </div>
+
+          <section class="panel" id="desktop">
+            <div class="notice">\u8FD9\u91CC\u53EA\u5C55\u793A\u5728 Codex \u684C\u9762\u7D22\u5F15\u91CC\u6709\u540D\u5B57\u7684\u7EBF\u7A0B\uFF0C\u548C Windows App \u5DE6\u4FA7\u5217\u8868\u4FDD\u6301\u4E00\u81F4\u3002</div>
+            <div class="notice" style="margin-top: 12px;">\u6700\u77ED\u8DEF\u5F84\uFF1A\u627E\u5230\u76EE\u6807 thread\uFF0C\u7136\u540E\u628A <code>/thread 019d1da4</code> \u8FD9\u6837\u7684\u547D\u4EE4\u53D1\u7ED9\u98DE\u4E66\u673A\u5668\u4EBA\uFF0C\u6216\u76F4\u63A5\u5230\u201C\u901A\u9053\u201D\u9875\u5207\u6362\u7ED1\u5B9A\u3002</div>
+            <div class="small" id="desktopSessionMeta" style="margin: 14px 0 16px;">\u6B63\u5728\u52A0\u8F7D\u2026</div>
+            <div class="session-list" id="desktopSessionsList"></div>
+            <div class="message" id="desktopMessage"></div>
+          </section>
+        </section>
+
+        <section class="page" data-page="config">
+          <div class="page-header">
+            <div>
+              <h1 class="page-title">\u914D\u7F6E</h1>
+              <p class="page-copy">\u8FD9\u91CC\u7EF4\u62A4\u672C\u5730\u9ED8\u8BA4\u5DE5\u4F5C\u76EE\u5F55\u3001\u8FD0\u884C\u6A21\u5F0F\u548C\u5168\u5C40\u884C\u4E3A\u5F00\u5173\u3002</p>
+            </div>
+          </div>
+
+          <section class="panel" id="config">
+            <div class="panel-header">
+              <div>
+                <h2>\u57FA\u7840\u914D\u7F6E</h2>
+                <p>\u4FDD\u5B58\u540E\u4F1A\u5199\u5165\u672C\u5730\u914D\u7F6E\u76EE\u5F55\uFF1B\u6D89\u53CA\u8FD0\u884C\u65F6\u7684\u9009\u9879\u901A\u5E38\u9700\u8981\u91CD\u542F Bridge \u624D\u751F\u6548\u3002</p>
+              </div>
+              <div class="toolbar">
+                <button class="primary" id="saveConfigBtn">\u4FDD\u5B58\u914D\u7F6E</button>
+              </div>
+            </div>
+
+            <div class="fields">
+              <div class="field-row triple">
+                <label>
+                  Runtime
+                  <select id="runtime">
+                    <option value="codex" selected>codex</option>
+                    <option value="auto">auto</option>
+                    <option value="claude">claude</option>
+                  </select>
+                </label>
+                <label>
+                  \u9ED8\u8BA4\u6A21\u5F0F
+                  <select id="defaultMode">
+                    <option value="code">code</option>
+                    <option value="plan">plan</option>
+                    <option value="ask">ask</option>
+                  </select>
+                </label>
+                <label>
+                  /history \u8FD4\u56DE\u6761\u6570
+                  <input id="historyMessageLimit" type="number" min="1" max="20" value="8" />
+                </label>
+              </div>
+              <label>
+                \u9ED8\u8BA4\u5DE5\u4F5C\u76EE\u5F55
+                <input id="defaultWorkDir" placeholder="D:\\workspace\\project" />
+              </label>
+              <label>
+                \u9ED8\u8BA4\u6A21\u578B
+                <input id="defaultModel" placeholder="\u7559\u7A7A\u5219\u4F7F\u7528 runtime \u9ED8\u8BA4\u6A21\u578B" />
+              </label>
+              <div class="checkbox-row">
+                <label class="checkbox"><input id="channelFeishu" type="checkbox" checked /> \u542F\u7528\u98DE\u4E66</label>
+                <label class="checkbox"><input id="channelWeixin" type="checkbox" /> \u542F\u7528\u5FAE\u4FE1</label>
+                <label class="checkbox"><input id="autoApprove" type="checkbox" /> \u81EA\u52A8\u6279\u51C6\u5DE5\u5177\u6743\u9650</label>
+              </div>
+              <div class="checkbox-row">
+                <label class="checkbox"><input id="codexSkipGitRepoCheck" type="checkbox" checked /> \u5141\u8BB8\u5728\u672A\u4FE1\u4EFB Git \u76EE\u5F55\u8FD0\u884C Codex</label>
+              </div>
+              <div class="small">\u5982\u679C\u65B0\u5EFA\u4F1A\u8BDD\u62A5 \u201CNot inside a trusted directory\u201D\uFF0C\u53EF\u4EE5\u6253\u5F00\u8FD9\u4E2A\u9009\u9879\u3002\u4FEE\u6539\u540E\u9700\u8981\u91CD\u542F Bridge \u624D\u4F1A\u751F\u6548\u3002</div>
+            </div>
+
+            <div class="message" id="configMessage"></div>
+          </section>
+        </section>
+
+        <section class="page" data-page="commands">
+          <div class="page-header">
+            <div>
+              <h1 class="page-title">\u547D\u4EE4\u8BF4\u660E</h1>
+              <p class="page-copy">\u8FD9\u91CC\u5217\u51FA\u5F53\u524D\u6865\u63A5\u804A\u5929\u91CC\u53EF\u7528\u7684\u547D\u4EE4\uFF0C\u98DE\u4E66\u548C\u5FAE\u4FE1\u5171\u7528\u540C\u4E00\u5957\u8BED\u4E49\u3002</p>
+            </div>
+          </div>
+
+          <section class="panel">
+            <div class="panel-header">
+              <div>
+                <h2>\u547D\u4EE4\u4F7F\u7528\u8BF4\u660E</h2>
+                <p>\u4E0B\u9762\u8FD9\u4E9B\u547D\u4EE4\u9002\u7528\u4E8E\u5F53\u524D\u6865\u63A5\u5230\u7684\u804A\u5929\u901A\u9053\uFF0C\u98DE\u4E66\u548C\u5FAE\u4FE1\u5171\u7528\u540C\u4E00\u5957\u547D\u4EE4\u8BED\u4E49\u3002</p>
+              </div>
+            </div>
+
+            <div class="notice" style="margin-bottom: 16px;">\u6700\u77ED\u4F7F\u7528\u8DEF\u5F84\uFF1A\u5148\u53D1 <code>/threads</code> \u67E5\u770B\u6700\u8FD1\u684C\u9762\u4F1A\u8BDD\uFF0C\u518D\u53D1 <code>/thread 1</code> \u63A5\u7BA1\uFF1B\u4E4B\u540E\u76F4\u63A5\u53D1\u9001\u6587\u672C\u5373\u53EF\u7EE7\u7EED\u5F53\u524D\u4F1A\u8BDD\u3002</div>
+
+            <div class="command-sections">
+              <section class="command-section">
+                <h3 class="command-section-title">\u6700\u5E38\u7528</h3>
+                <div class="command-list">
+                  <div class="command-item"><code>/help</code><div>\u67E5\u770B\u5B8C\u6574\u547D\u4EE4\u8BF4\u660E\u3002</div></div>
+                  <div class="command-item"><code>/threads</code><div>\u5217\u51FA\u6700\u8FD1\u684C\u9762\u4F1A\u8BDD\u3002</div></div>
+                  <div class="command-item"><code>/thread &lt;thread-id | \u5E8F\u53F7&gt;</code><div>\u7ED1\u5B9A\u684C\u9762 thread\uFF0C\u63A5\u7BA1\u684C\u9762\u4F1A\u8BDD\u3002</div></div>
+                  <div class="command-item"><code>\u76F4\u63A5\u53D1\u9001\u6587\u672C</code><div>\u7EE7\u7EED\u5F53\u524D\u5DF2\u7ED1\u5B9A\u4F1A\u8BDD\u3002</div></div>
+                  <div class="command-item"><code>/status</code><div>\u67E5\u770B\u5F53\u524D\u804A\u5929\u7ED1\u5B9A\u5230\u4E86\u54EA\u6761\u4F1A\u8BDD\u3001thread\u3001\u76EE\u5F55\u548C\u6A21\u5F0F\u3002</div></div>
+                  <div class="command-item"><code>/history</code><div>\u67E5\u770B\u5F53\u524D\u4F1A\u8BDD\u6700\u8FD1 N \u6761\u6D88\u606F\u3002</div></div>
+                </div>
+              </section>
+
+              <section class="command-section">
+                <h3 class="command-section-title">\u5207\u6362\u4E0E\u7ED1\u5B9A</h3>
+                <div class="command-list">
+                  <div class="command-item"><code>/sessions</code><div>\u5217\u51FA\u5185\u90E8\u4F1A\u8BDD\u3002</div></div>
+                  <div class="command-item"><code>/use &lt;session-id | \u5E8F\u53F7&gt;</code><div>\u5207\u6362\u5230\u5DF2\u6709\u5185\u90E8\u4F1A\u8BDD\u3002</div></div>
+                  <div class="command-item"><code>/bind &lt;session-id | thread-id | \u5E8F\u53F7&gt;</code><div>\u667A\u80FD\u7ED1\u5B9A\uFF0C\u517C\u5BB9\u65E7\u7528\u6CD5\uFF1B\u53EF\u7ED1\u5B9A\u5185\u90E8\u4F1A\u8BDD\u6216\u684C\u9762 thread\u3002</div></div>
+                </div>
+              </section>
+
+              <section class="command-section">
+                <h3 class="command-section-title">\u4F1A\u8BDD\u8BBE\u7F6E</h3>
+                <div class="command-list">
+                  <div class="command-item"><code>/new [\u7EDD\u5BF9\u8DEF\u5F84]</code><div>\u65B0\u5EFA\u4F1A\u8BDD\uFF1B\u53EF\u9009\u5730\u6307\u5B9A\u5DE5\u4F5C\u76EE\u5F55\u3002</div></div>
+                  <div class="command-item"><code>/cwd /path/to/project</code><div>\u4FEE\u6539\u5F53\u524D\u4F1A\u8BDD\u5DE5\u4F5C\u76EE\u5F55\u3002</div></div>
+                  <div class="command-item"><code>/mode plan|code|ask</code><div>\u4FEE\u6539\u5F53\u524D\u4F1A\u8BDD\u6A21\u5F0F\u3002</div></div>
+                  <div class="command-item"><code>/stop</code><div>\u505C\u6B62\u5F53\u524D\u4EFB\u52A1\u3002</div></div>
+                </div>
+              </section>
+
+              <section class="command-section">
+                <h3 class="command-section-title">\u6743\u9650</h3>
+                <div class="command-list">
+                  <div class="command-item"><code>/perm allow|allow_session|deny &lt;id&gt;</code><div>\u6587\u672C\u65B9\u5F0F\u5904\u7406\u4E00\u4E2A\u5F85\u6279\u51C6\u6743\u9650\u3002</div></div>
+                  <div class="command-item"><code>1 / 2 / 3</code><div>\u5FEB\u901F\u5904\u7406\u5355\u4E2A\u5F85\u6279\u51C6\u6743\u9650\u3002</div></div>
+                </div>
+              </section>
+            </div>
+          </section>
+        </section>
+
+        <section class="page" data-page="channels">
+          <div class="page-header">
+            <div>
+              <h1 class="page-title">\u901A\u9053</h1>
+              <p class="page-copy">\u6BCF\u4E2A\u901A\u9053\u90FD\u663E\u793A\u5F53\u524D\u7ED1\u5B9A\u7684\u4F1A\u8BDD\uFF0C\u5E76\u652F\u6301\u5728\u7F51\u9875\u91CC\u76F4\u63A5\u6539\u7ED1\u3002</p>
+            </div>
           </div>
 
-          <div class="channel-grid">
-            <section class="panel" id="feishu">
-              <h2>\u98DE\u4E66 / Lark</h2>
+          <section class="panel channel-shell">
+            <div class="channel-tabs" role="tablist" aria-label="\u901A\u9053\u914D\u7F6E">
+              <button type="button" class="channel-tab active" data-channel="feishu" role="tab" aria-selected="true">\u98DE\u4E66</button>
+              <button type="button" class="channel-tab" data-channel="weixin" role="tab" aria-selected="false">\u5FAE\u4FE1</button>
+            </div>
+
+            <div class="channel-view active" data-channel="feishu" role="tabpanel">
+              <section id="feishu">
+              <div class="panel-header">
+                <div>
+                  <h2>\u98DE\u4E66 / Lark</h2>
+                  <p>\u586B\u5199\u51ED\u636E\u3001\u6D4B\u8BD5\u53EF\u7528\u6027\uFF0C\u5E76\u67E5\u770B\u5F53\u524D\u98DE\u4E66\u804A\u5929\u7ED1\u5B9A\u5230\u54EA\u6761\u4F1A\u8BDD\u3002</p>
+                </div>
+                <div class="toolbar">
+                  <button id="saveFeishuChannelBtn">\u4FDD\u5B58\u901A\u9053\u914D\u7F6E</button>
+                  <button id="testFeishuBtn">\u6D4B\u8BD5\u98DE\u4E66\u51ED\u636E</button>
+                </div>
+              </div>
+
               <div class="fields">
                 <div class="field-row">
                   <label>
@@ -7130,28 +7725,48 @@ function renderHtml() {
                   <label class="checkbox"><input id="feishuStreamingEnabled" type="checkbox" checked /> \u542F\u7528\u98DE\u4E66\u6D41\u5F0F\u54CD\u5E94\u5361\u7247</label>
                 </div>
                 <div class="small">\u9700\u8981\u98DE\u4E66\u4FA7\u5DF2\u5F00\u901A\u53EF\u66F4\u65B0\u5361\u7247\u7684\u76F8\u5173\u80FD\u529B\uFF1B\u5982\u679C\u6743\u9650\u4E0D\u8DB3\uFF0C\u4F1A\u81EA\u52A8\u56DE\u9000\u4E3A\u6700\u7EC8\u7ED3\u679C\u6D88\u606F\u3002</div>
-                <div class="actions">
-                  <button class="primary" id="saveConfigBtn">\u4FDD\u5B58\u914D\u7F6E</button>
-                  <button id="testFeishuBtn">\u6D4B\u8BD5\u98DE\u4E66\u51ED\u636E</button>
-                </div>
+              </div>
+
+              <div class="panel-block">
+                <p class="panel-subtitle">\u901A\u9053\u72B6\u6001</p>
+                <div class="small" id="feishuRuntimeMeta">\u6B63\u5728\u52A0\u8F7D\u2026</div>
               </div>
               <div class="panel-block">
                 <p class="panel-subtitle">\u5F53\u524D\u98DE\u4E66\u7ED1\u5B9A</p>
                 <div class="small" id="feishuBindingMeta">\u6B63\u5728\u52A0\u8F7D\u2026</div>
                 <div class="binding-list" id="feishuBindings" style="margin-top: 12px;"></div>
               </div>
+
               <div class="message" id="feishuMessage"></div>
-            </section>
+              </section>
+            </div>
+
+            <div class="channel-view" data-channel="weixin" role="tabpanel">
+              <section id="wechat">
+              <div class="panel-header">
+                <div>
+                  <h2>\u5FAE\u4FE1</h2>
+                  <p>\u626B\u7801\u767B\u5F55\u5FAE\u4FE1\u5E76\u67E5\u770B\u5F53\u524D\u804A\u5929\u7ED1\u5B9A\u7684\u4F1A\u8BDD\u3002</p>
+                </div>
+                <div class="toolbar">
+                  <button id="saveWeixinChannelBtn">\u4FDD\u5B58\u901A\u9053\u914D\u7F6E</button>
+                  <button id="weixinLoginBtn">\u5F00\u59CB\u5FAE\u4FE1\u626B\u7801</button>
+                </div>
+              </div>
 
-            <section class="panel" id="wechat">
-              <h2>\u5FAE\u4FE1</h2>
               <div class="fields">
                 <div class="checkbox-row">
                   <label class="checkbox"><input id="weixinMediaEnabled" type="checkbox" /> \u542F\u7528\u56FE\u7247 / \u6587\u4EF6 / \u89C6\u9891\u5165\u7AD9\u4E0B\u8F7D</label>
                 </div>
-                <div class="actions">
-                  <button id="weixinLoginBtn">\u5F00\u59CB\u5FAE\u4FE1\u626B\u7801</button>
-                </div>
+              </div>
+              <div class="panel-block">
+                <p class="panel-subtitle">\u901A\u9053\u72B6\u6001</p>
+                <div class="small" id="weixinRuntimeMeta">\u6B63\u5728\u52A0\u8F7D\u2026</div>
+              </div>
+              <div class="panel-block">
+                <p class="panel-subtitle">\u5DF2\u767B\u5F55\u5FAE\u4FE1\u8D26\u53F7</p>
+                <div class="small" id="weixinAccountMeta">\u6B63\u5728\u52A0\u8F7D\u2026</div>
+                <div class="binding-list" id="weixinAccounts" style="margin-top: 12px;"></div>
               </div>
               <div class="panel-block">
                 <p class="panel-subtitle">\u5F53\u524D\u5FAE\u4FE1\u7ED1\u5B9A</p>
@@ -7159,23 +7774,41 @@ function renderHtml() {
                 <div class="binding-list" id="weixinBindings" style="margin-top: 12px;"></div>
               </div>
               <div class="message" id="weixinMessage"></div>
-            </section>
+              </section>
+            </div>
+          </section>
+        </section>
+
+        <section class="page" data-page="logs">
+          <div class="page-header">
+            <div>
+              <h1 class="page-title">\u65E5\u5FD7</h1>
+              <p class="page-copy">\u65E5\u5FD7\u9875\u53EA\u8D1F\u8D23\u67E5\u770B bridge \u65E5\u5FD7\uFF0C\u4FBF\u4E8E\u6392\u67E5\u8FD0\u884C\u548C\u901A\u9053\u95EE\u9898\u3002</p>
+            </div>
+            <div class="toolbar">
+              <button id="refreshLogsBtn">\u5237\u65B0\u65E5\u5FD7</button>
+            </div>
           </div>
 
           <section class="panel" id="logs">
-            <h2>\u65E5\u5FD7</h2>
             <div class="logs" id="logsOutput">\u7B49\u5F85\u52A0\u8F7D\u65E5\u5FD7\u2026</div>
           </section>
-        </div>
+        </section>
       </main>
     </div>
+    <div id="globalMessageHost" class="global-message-host" aria-live="polite"></div>
 
     <script>
       const state = {
         config: null,
+        bridgeStatus: null,
         desktopSessions: [],
         bindings: [],
         bindingOptions: [],
+        weixinAccounts: [],
+        desktopRoot: '',
+        activePage: 'overview',
+        activeChannel: 'feishu',
       };
 
       function escapeHtml(value) {
@@ -7196,6 +7829,16 @@ function renderHtml() {
         return '/thread ' + value.slice(0, 12);
       }
 
+      function pathSegments(value) {
+        const normalized = String(value || '').split('/').join('\\\\');
+        return normalized.split('\\\\').filter(Boolean);
+      }
+
+      function baseName(value) {
+        const segments = pathSegments(value);
+        return segments[segments.length - 1] || value || '(no cwd)';
+      }
+
       function formatTime(value) {
         if (!value) return '-';
         const date = new Date(value);
@@ -7207,6 +7850,33 @@ function renderHtml() {
         return option.label + ' \xB7 ' + option.description;
       }
 
+      function renderBindingTable(binding) {
+        const sessions = state.desktopSessions || [];
+        if (!sessions.length) {
+          return '<div class="binding-empty">\u5F53\u524D\u8FD8\u6CA1\u6709\u548C\u4F1A\u8BDD\u9875\u4E00\u81F4\u7684\u547D\u540D\u684C\u9762\u7EBF\u7A0B\u3002</div>';
+        }
+
+        return ''
+          + '<div class="binding-table-wrap">'
+          +   '<table class="binding-table">'
+          +     '<thead><tr><th>\u6807\u9898</th><th>Thread</th><th>\u76EE\u5F55</th><th>\u64CD\u4F5C</th></tr></thead>'
+          +     '<tbody>'
+          +       sessions.map((session) => {
+            const targetKey = 'desktop:' + session.threadId;
+            const active = targetKey === binding.currentTargetKey;
+            return ''
+              + '<tr class="' + (active ? 'current' : '') + '">'
+              +   '<td><div class="binding-table-title">' + escapeHtml(session.title || 'Untitled Session') + (active ? '<span class="binding-table-mark">\u5F53\u524D</span>' : '') + '</div></td>'
+              +   '<td><div class="binding-table-thread"><code>' + escapeHtml(session.threadId) + '</code></div></td>'
+              +   '<td><div class="binding-table-path">' + escapeHtml(session.cwd || '(no cwd)') + '</div></td>'
+              +   '<td><button type="button" class="binding-target-btn' + (active ? ' current' : '') + '" data-action="switch-binding-target" data-binding-id="' + escapeHtml(binding.id) + '" data-target-key="' + escapeHtml(targetKey) + '"' + (active ? ' disabled' : '') + '>' + (active ? '\u5F53\u524D\u4F1A\u8BDD' : '\u5207\u6362\u5230\u5F53\u524D\u4F1A\u8BDD') + '</button></td>'
+              + '</tr>';
+          }).join('')
+          +     '</tbody>'
+          +   '</table>'
+          + '</div>';
+      }
+
       function enabledChannelsFromForm() {
         const channels = [];
         if (document.getElementById('channelFeishu').checked) channels.push('feishu');
@@ -7235,53 +7905,316 @@ function renderHtml() {
 
       function showMessage(id, type, message) {
         const node = document.getElementById(id);
+        if (!node) return;
         node.className = 'message show ' + type;
         node.textContent = message;
       }
 
+      function showGlobalMessage(type, message) {
+        const host = document.getElementById('globalMessageHost');
+        if (!host) return;
+
+        const item = document.createElement('div');
+        item.className = 'global-message ' + (type || 'success');
+        item.textContent = message;
+        host.appendChild(item);
+
+        window.setTimeout(() => {
+          item.remove();
+        }, 2200);
+      }
+
+      function setActivePage(page, syncHash) {
+        const nextPage = ['overview', 'sessions', 'config', 'commands', 'channels', 'logs'].includes(page) ? page : 'overview';
+        state.activePage = nextPage;
+
+        document.querySelectorAll('.nav-link').forEach((element) => {
+          const node = element;
+          node.classList.toggle('active', node.dataset.page === nextPage);
+        });
+
+        document.querySelectorAll('.page').forEach((element) => {
+          const node = element;
+          node.classList.toggle('active', node.dataset.page === nextPage);
+        });
+
+        if (syncHash !== false) {
+          const hash = nextPage === 'channels'
+            ? '#channels/' + state.activeChannel
+            : '#' + nextPage;
+          if (window.location.hash !== hash) {
+            history.replaceState(null, '', hash);
+          }
+        }
+      }
+
+      function setActiveChannel(channel, syncHash) {
+        const nextChannel = channel === 'weixin' ? 'weixin' : 'feishu';
+        state.activeChannel = nextChannel;
+
+        document.querySelectorAll('.channel-tab').forEach((element) => {
+          const node = element;
+          const active = node.dataset.channel === nextChannel;
+          node.classList.toggle('active', active);
+          node.setAttribute('aria-selected', active ? 'true' : 'false');
+        });
+
+        document.querySelectorAll('.channel-view').forEach((element) => {
+          const node = element;
+          const active = node.dataset.channel === nextChannel;
+          node.classList.toggle('active', active);
+          node.hidden = !active;
+        });
+
+        if (syncHash !== false && state.activePage === 'channels') {
+          const hash = '#channels/' + nextChannel;
+          if (window.location.hash !== hash) {
+            history.replaceState(null, '', hash);
+          }
+        }
+      }
+
+      function syncPageFromHash() {
+        const raw = String(window.location.hash || '').replace(/^#/, '');
+        if (!raw) {
+          setActivePage('overview', false);
+          setActiveChannel('feishu', false);
+          return;
+        }
+
+        if (raw.startsWith('channels/')) {
+          setActivePage('channels', false);
+          setActiveChannel(raw.split('/')[1] || 'feishu', false);
+          return;
+        }
+
+        setActivePage(raw, false);
+      }
+
       async function copyText(value, successMessage) {
         if (!navigator.clipboard || !value) {
           throw new Error('\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u590D\u5236\uFF0C\u6216\u6CA1\u6709\u53EF\u590D\u5236\u7684\u5185\u5BB9\u3002');
         }
         await navigator.clipboard.writeText(value);
-        showMessage('desktopMessage', 'success', successMessage);
+        showGlobalMessage('success', successMessage);
+      }
+
+      function groupDesktopSessions(sessions) {
+        const groups = new Map();
+        for (const session of sessions || []) {
+          const key = session.cwd || '(no cwd)';
+          if (!groups.has(key)) {
+            groups.set(key, {
+              key,
+              name: baseName(key),
+              cwd: key,
+              latest: session.lastEventAt || '',
+              sessions: [],
+            });
+          }
+          const group = groups.get(key);
+          group.sessions.push(session);
+          if ((session.lastEventAt || '') > group.latest) {
+            group.latest = session.lastEventAt || '';
+          }
+        }
+
+        return Array.from(groups.values())
+          .map((group) => ({
+            ...group,
+            sessions: group.sessions.sort((left, right) => (right.lastEventAt || '').localeCompare(left.lastEventAt || '')),
+          }))
+          .sort((left, right) => {
+            const timeOrder = (right.latest || '').localeCompare(left.latest || '');
+            if (timeOrder !== 0) return timeOrder;
+            return left.name.localeCompare(right.name, 'zh-CN');
+          });
+      }
+
+      function isChannelEnabled(channelType) {
+        return Boolean(state.config && (state.config.enabledChannels || []).includes(channelType));
+      }
+
+      function runningChannels() {
+        return state.bridgeStatus && Array.isArray(state.bridgeStatus.channels) ? state.bridgeStatus.channels : [];
+      }
+
+      function isChannelRunning(channelType) {
+        return Boolean(state.bridgeStatus && state.bridgeStatus.running && runningChannels().includes(channelType));
+      }
+
+      function bridgeNeedsRestart() {
+        if (!state.config || !state.bridgeStatus || !state.bridgeStatus.running) return false;
+        const configured = (state.config.enabledChannels || []).slice().sort().join(',');
+        const running = runningChannels().slice().sort().join(',');
+        return configured !== running;
+      }
+
+      function channelLabel(channelType) {
+        return channelType === 'weixin' ? '\u5FAE\u4FE1' : '\u98DE\u4E66';
+      }
+
+      function channelRuntimeText(channelType) {
+        const label = channelLabel(channelType);
+        if (!isChannelEnabled(channelType)) {
+          return label + '\u5728\u914D\u7F6E\u4E2D\u672A\u542F\u7528\u3002';
+        }
+        if (!state.bridgeStatus || !state.bridgeStatus.running) {
+          return label + '\u5DF2\u542F\u7528\uFF0C\u4F46 Bridge \u8FD8\u6CA1\u542F\u52A8\u3002\u542F\u52A8 Bridge \u540E\u624D\u4F1A\u771F\u6B63\u63A5\u901A\u3002';
+        }
+        if (!isChannelRunning(channelType)) {
+          return label + '\u5DF2\u5199\u5165\u914D\u7F6E\uFF0C\u4F46\u5F53\u524D\u8FD0\u884C\u4E2D\u7684 Bridge \u8FD8\u6CA1\u52A0\u8F7D\u8FD9\u4E2A\u901A\u9053\u3002\u70B9\u51FB\u201C\u91CD\u542F Bridge\u201D\u540E\u751F\u6548\u3002';
+        }
+        return label + '\u5DF2\u63A5\u901A\u5230\u5F53\u524D\u8FD0\u884C\u4E2D\u7684 Bridge\u3002';
+      }
+
+      function emptyBindingText(channelType) {
+        const label = channelLabel(channelType);
+        if (!isChannelEnabled(channelType)) {
+          return label + '\u672A\u542F\u7528\u3002\u5148\u5728\u201C\u914D\u7F6E\u201D\u91CC\u52FE\u9009\u540E\u4FDD\u5B58\u3002';
+        }
+        if (!state.bridgeStatus || !state.bridgeStatus.running) {
+          return label + '\u5DF2\u542F\u7528\uFF0C\u4F46 Bridge \u8FD8\u6CA1\u542F\u52A8\u3002\u542F\u52A8\u540E\u624D\u4F1A\u521B\u5EFA\u7ED1\u5B9A\u3002';
+        }
+        if (!isChannelRunning(channelType)) {
+          return label + '\u5DF2\u542F\u7528\uFF0C\u4F46\u5F53\u524D\u8FD0\u884C\u4E2D\u7684 Bridge \u8FD8\u6CA1\u52A0\u8F7D\u8FD9\u4E2A\u901A\u9053\u3002\u70B9\u51FB\u201C\u91CD\u542F Bridge\u201D\u540E\u751F\u6548\u3002';
+        }
+        return label + '\u5F53\u524D\u8FD8\u6CA1\u6709\u804A\u5929\u63A5\u5165\u3002\u5148\u4ECE' + label + '\u53D1\u4E00\u6761\u6D88\u606F\uFF0Cbridge \u624D\u4F1A\u521B\u5EFA\u7ED1\u5B9A\u3002';
+      }
+
+      function quickSwitchState(channelType) {
+        const label = channelLabel(channelType);
+        if (!isChannelEnabled(channelType)) {
+          return { disabled: true, title: label + '\u672A\u542F\u7528\u3002' };
+        }
+        if (!state.bridgeStatus || !state.bridgeStatus.running) {
+          return { disabled: true, title: 'Bridge \u8FD8\u6CA1\u542F\u52A8\u3002\u542F\u52A8\u540E\u518D\u5207\u6362' + label + '\u4F1A\u8BDD\u3002' };
+        }
+        if (!isChannelRunning(channelType)) {
+          return { disabled: true, title: label + '\u5DF2\u5199\u5165\u914D\u7F6E\uFF0C\u4F46\u5F53\u524D\u8FD0\u884C\u4E2D\u7684 Bridge \u8FD8\u6CA1\u52A0\u8F7D\u3002\u8BF7\u5148\u91CD\u542F Bridge\u3002' };
+        }
+
+        const bindings = state.bindings.filter((item) => item.channelType === channelType);
+        if (bindings.length === 0) {
+          return { disabled: true, title: '\u5F53\u524D\u8FD8\u6CA1\u6709' + label + '\u804A\u5929\u7ED1\u5B9A\u3002\u5148\u8BA9' + label + '\u53D1\u6765\u4E00\u6761\u6D88\u606F\u3002' };
+        }
+        if (bindings.length > 1) {
+          return { disabled: true, title: label + '\u6709\u591A\u4E2A\u7ED1\u5B9A\uFF0C\u8BF7\u5230\u901A\u9053\u9875\u5207\u6362\u3002' };
+        }
+
+        return {
+          disabled: false,
+          title: '\u5207\u6362' + label + '\u5230\u5F53\u524D\u4F1A\u8BDD',
+          bindingId: bindings[0].id,
+        };
+      }
+
+      function currentThreadMarks(threadId) {
+        const marks = [];
+        const currentTargetKey = 'desktop:' + threadId;
+        const counts = new Map();
+
+        for (const binding of state.bindings || []) {
+          const matchesThread = binding.currentThreadId === threadId || binding.currentTargetKey === currentTargetKey;
+          if (!matchesThread) continue;
+          counts.set(binding.channelType, (counts.get(binding.channelType) || 0) + 1);
+        }
+
+        for (const [channelType, count] of counts.entries()) {
+          const label = channelType === 'weixin' ? '\u5FAE\u4FE1\u5F53\u524D' : '\u98DE\u4E66\u5F53\u524D';
+          marks.push(count > 1 ? label + ' x' + count : label);
+        }
+
+        return marks;
+      }
+
+      function renderDesktopSessionCard(session) {
+        const feishuSwitch = quickSwitchState('feishu');
+        const weixinSwitch = quickSwitchState('weixin');
+        const targetKey = 'desktop:' + session.threadId;
+        const originator = session.originator || 'Codex Desktop';
+        const marks = currentThreadMarks(session.threadId);
+        const markHtml = marks.map((mark) => '<span class="session-mark">' + escapeHtml(mark) + '</span>').join('');
+
+        return ''
+          + '<article class="session-card' + (marks.length ? ' current-thread' : '') + '">'
+          +   '<div class="session-head">'
+          +     '<div class="session-main">'
+          +       '<div class="session-title-row"><div class="session-title">' + escapeHtml(session.title || 'Untitled Session') + '</div>' + markHtml + '</div>'
+          +       '<div class="session-thread">Thread: <code>' + escapeHtml(session.threadId) + '</code><button type="button" class="session-inline-action" data-action="copy-thread" data-thread-id="' + escapeHtml(session.threadId) + '">\u590D\u5236</button></div>'
+          +     '</div>'
+          +     '<div class="session-cell">'
+          +       '<div class="session-label">\u6765\u6E90</div>'
+          +       '<div class="session-value">' + escapeHtml(originator) + '</div>'
+          +     '</div>'
+          +     '<div class="session-cell">'
+          +       '<div class="session-label">\u76EE\u5F55</div>'
+          +       '<div class="session-path">' + escapeHtml(session.cwd || '(no cwd)') + '</div>'
+          +     '</div>'
+          +     '<div class="session-actions">'
+          +       '<button type="button" data-action="bind-channel" data-channel="feishu" data-binding-id="' + escapeHtml(feishuSwitch.bindingId || '') + '" data-target-key="' + escapeHtml(targetKey) + '" title="' + escapeHtml(feishuSwitch.title) + '"' + (feishuSwitch.disabled ? ' disabled' : '') + '>\u98DE\u4E66\u5207\u5230\u6B64\u4F1A\u8BDD</button>'
+          +       '<button type="button" data-action="bind-channel" data-channel="weixin" data-binding-id="' + escapeHtml(weixinSwitch.bindingId || '') + '" data-target-key="' + escapeHtml(targetKey) + '" title="' + escapeHtml(weixinSwitch.title) + '"' + (weixinSwitch.disabled ? ' disabled' : '') + '>\u5FAE\u4FE1\u5207\u5230\u6B64\u4F1A\u8BDD</button>'
+          +       '<button type="button" data-action="copy-bind-command" data-thread-id="' + escapeHtml(session.threadId) + '">\u590D\u5236\u547D\u4EE4</button>'
+          +   '</div>'
+          + '</div>'
+          + '</article>';
       }
 
       function renderDesktopSessions(result) {
         state.desktopSessions = result.sessions || [];
+        state.desktopRoot = result.root || '-';
+        const groups = groupDesktopSessions(state.desktopSessions);
         document.getElementById('desktopSessionCount').textContent = String(state.desktopSessions.length);
         document.getElementById('desktopSessionMeta').textContent =
-          '\u626B\u63CF\u76EE\u5F55\uFF1A' + (result.root || '-') + ' \xB7 \u6700\u8FD1 ' + state.desktopSessions.length + ' \u6761\u684C\u9762\u4F1A\u8BDD';
+          '\u626B\u63CF\u76EE\u5F55\uFF1A' + state.desktopRoot + ' \xB7 ' + groups.length + ' \u4E2A\u5DE5\u7A0B \xB7 ' + state.desktopSessions.length + ' \u6761\u684C\u9762\u4F1A\u8BDD';
+        document.getElementById('desktopRootStatus').textContent = state.desktopRoot;
 
         const list = document.getElementById('desktopSessionsList');
         if (state.desktopSessions.length === 0) {
           list.innerHTML = '<div class="notice ghost">\u5F53\u524D\u6CA1\u6709\u53D1\u73B0\u684C\u9762\u7AEF\u4F1A\u8BDD\u3002\u5148\u5728 Codex Windows App \u4E2D\u6253\u5F00\u6216\u8FD0\u884C\u4E00\u4E2A\u4F1A\u8BDD\uFF0C\u518D\u56DE\u5230\u8FD9\u91CC\u5237\u65B0\u3002</div>';
+          rerenderBindingPanels();
           return;
         }
 
-        list.innerHTML = state.desktopSessions.map((session) => {
-          const tags = [
-            '<span class="session-pill ' + (session.activeEstimate ? 'active' : '') + '">' + (session.activeEstimate ? '\u6700\u8FD1\u6D3B\u8DC3' : '\u5386\u53F2\u4F1A\u8BDD') + '</span>',
-            '<span class="session-pill">' + escapeHtml(session.originator || 'Codex Desktop') + '</span>',
-            session.source ? '<span class="session-pill">' + escapeHtml(session.source) + '</span>' : '',
-          ].filter(Boolean).join('');
+        list.innerHTML = groups.map((group) => ''
+          + '<section class="project-group">'
+          +   '<div class="project-group-head">'
+          +     '<div>'
+          +       '<div class="project-group-title">' + escapeHtml(group.name) + '</div>'
+          +       '<div class="project-group-path">' + escapeHtml(group.cwd || '(no cwd)') + '</div>'
+          +     '</div>'
+          +     '<div class="project-group-count">' + group.sessions.length + ' \u4E2A\u7EBF\u7A0B</div>'
+          +   '</div>'
+          +   '<div class="project-session-list">'
+          +     group.sessions.map((session) => renderDesktopSessionCard(session)).join('')
+          +   '</div>'
+          + '</section>'
+        ).join('');
+
+        rerenderBindingPanels();
+      }
+
+      function rerenderDesktopSessions() {
+        if (!state.desktopSessions.length && !state.desktopRoot) return;
+        renderDesktopSessions({
+          root: state.desktopRoot,
+          sessions: state.desktopSessions,
+        });
+      }
 
-          return ''
-            + '<article class="session-card">'
-            +   '<div class="session-head">'
-            +     '<div class="session-title">' + escapeHtml(session.title || 'Untitled Session') + '</div>'
-            +     '<div class="small">' + escapeHtml(formatTime(session.lastEventAt)) + '</div>'
-            +   '</div>'
-            +   '<div class="small">Thread: <code>' + escapeHtml(shortId(session.threadId)) + '</code></div>'
-            +   '<div class="session-meta">' + tags + '</div>'
-            +   '<div class="session-path">' + escapeHtml(session.cwd || '(no cwd)') + '</div>'
-            +   '<div class="session-actions">'
-            +     '<button type="button" data-action="copy-thread" data-thread-id="' + escapeHtml(session.threadId) + '">\u590D\u5236 Thread ID</button>'
-            +     '<button type="button" data-action="copy-bind-command" data-thread-id="' + escapeHtml(session.threadId) + '">\u590D\u5236\u98DE\u4E66\u63A5\u7BA1\u547D\u4EE4</button>'
-            +     '<button type="button" data-action="copy-cwd" data-cwd="' + escapeHtml(session.cwd || '') + '">\u590D\u5236\u5DE5\u4F5C\u76EE\u5F55</button>'
-            +   '</div>'
-            + '</article>';
-        }).join('');
+      function rerenderBindingPanels() {
+        renderChannelBindings(
+          'feishu',
+          'feishuBindings',
+          'feishuBindingMeta',
+          emptyBindingText('feishu')
+        );
+        renderChannelBindings(
+          'weixin',
+          'weixinBindings',
+          'weixinBindingMeta',
+          emptyBindingText('weixin')
+        );
       }
 
       function renderChannelBindings(channelType, listId, metaId, emptyText) {
@@ -7289,7 +8222,7 @@ function renderHtml() {
         const list = document.getElementById(listId);
         const meta = document.getElementById(metaId);
         meta.textContent = bindings.length > 0
-          ? '\u5F53\u524D\u5DF2\u53D1\u73B0 ' + bindings.length + ' \u4E2A\u804A\u5929\u7ED1\u5B9A\uFF0C\u53EF\u4EE5\u76F4\u63A5\u5728\u7F51\u9875\u5207\u6362\u76EE\u6807\u4F1A\u8BDD\u3002'
+          ? '\u5F53\u524D\u5DF2\u53D1\u73B0 ' + bindings.length + ' \u4E2A\u804A\u5929\u7ED1\u5B9A\u3002\u8FD9\u91CC\u53EA\u663E\u793A\u548C\u4F1A\u8BDD\u9875\u4E00\u81F4\u7684\u547D\u540D\u684C\u9762\u7EBF\u7A0B\u3002'
           : emptyText;
 
         if (bindings.length === 0) {
@@ -7298,11 +8231,6 @@ function renderHtml() {
         }
 
         list.innerHTML = bindings.map((binding) => {
-          const options = state.bindingOptions.map((option) => {
-            const selected = option.key === binding.currentTargetKey ? ' selected' : '';
-            return '<option value="' + escapeHtml(option.key) + '"' + selected + '>' + escapeHtml(optionLabel(option)) + '</option>';
-          }).join('');
-
           return ''
             + '<article class="binding-item" data-binding-id="' + escapeHtml(binding.id) + '">'
             +   '<div class="binding-head">'
@@ -7310,16 +8238,40 @@ function renderHtml() {
             +     '<div class="small">' + escapeHtml(binding.mode) + '</div>'
             +   '</div>'
             +   '<div class="binding-detail">\u5F53\u524D\u4F1A\u8BDD\uFF1A<code>' + escapeHtml(binding.currentSessionId.slice(0, 8)) + '...</code> \xB7 ' + escapeHtml(binding.currentSessionName) + '</div>'
+            +   '<div class="binding-detail">\u5F53\u524D\u76EE\u6807\uFF1A' + escapeHtml(binding.currentTargetLabel || '\u672A\u7ED1\u5B9A') + '</div>'
             +   '<div class="binding-detail">\u5F53\u524D thread\uFF1A<code>' + escapeHtml(binding.currentThreadId || 'not-shared') + '</code></div>'
             +   '<div class="binding-detail">\u76EE\u5F55\uFF1A' + escapeHtml(binding.workingDirectory || '~') + '</div>'
-            +   '<div class="binding-controls">'
-            +     '<select data-role="target">' + options + '</select>'
-            +     '<button type="button" data-action="save-binding">\u5207\u6362\u7ED1\u5B9A</button>'
-            +   '</div>'
+            +   renderBindingTable(binding)
             + '</article>';
         }).join('');
       }
 
+      function renderWeixinAccounts() {
+        const meta = document.getElementById('weixinAccountMeta');
+        const list = document.getElementById('weixinAccounts');
+        const accounts = state.weixinAccounts || [];
+
+        if (accounts.length === 0) {
+          meta.textContent = '\u5F53\u524D\u8FD8\u6CA1\u6709\u5DF2\u4FDD\u5B58\u7684\u5FAE\u4FE1\u8D26\u53F7\u3002\u5148\u70B9\u51FB\u201C\u5F00\u59CB\u5FAE\u4FE1\u626B\u7801\u201D\uFF0C\u7136\u540E\u5728\u624B\u673A\u4E0A\u786E\u8BA4\u3002';
+          list.innerHTML = '<div class="binding-empty">\u626B\u7801\u6210\u529F\u540E\uFF0C\u8FD9\u91CC\u4F1A\u663E\u793A\u5F53\u524D\u5DF2\u4FDD\u5B58\u7684\u5FAE\u4FE1\u8D26\u53F7\u3002</div>';
+          return;
+        }
+
+        meta.textContent = '\u5F53\u524D\u5DF2\u4FDD\u5B58 ' + accounts.length + ' \u4E2A\u5FAE\u4FE1\u8D26\u53F7\u3002\u5FAE\u4FE1\u6865\u63A5\u662F\u5355\u8D26\u53F7\u6A21\u5F0F\uFF0C\u6700\u65B0\u542F\u7528\u7684\u8D26\u53F7\u4F1A\u751F\u6548\u3002';
+        list.innerHTML = accounts.map((account) => ''
+          + '<article class="binding-item">'
+          +   '<div class="binding-head">'
+          +     '<div class="binding-title">' + escapeHtml(account.name || account.accountId) + '</div>'
+          +     '<div class="small">' + (account.enabled ? '\u5DF2\u542F\u7528' : '\u5DF2\u505C\u7528') + '</div>'
+          +   '</div>'
+          +   '<div class="binding-detail">\u8D26\u53F7 ID\uFF1A<code>' + escapeHtml(account.accountId) + '</code></div>'
+          +   '<div class="binding-detail">\u7528\u6237 ID\uFF1A<code>' + escapeHtml(account.userId || '-') + '</code></div>'
+          +   '<div class="binding-detail">Base URL\uFF1A' + escapeHtml(account.baseUrl || '-') + '</div>'
+          +   '<div class="binding-detail">\u6700\u8FD1\u767B\u5F55\uFF1A' + escapeHtml(formatTime(account.lastLoginAt || account.updatedAt)) + '</div>'
+          + '</article>'
+        ).join('');
+      }
+
       function renderBindings(result) {
         state.bindings = result.bindings || [];
         state.bindingOptions = result.options || [];
@@ -7328,14 +8280,15 @@ function renderHtml() {
           'feishu',
           'feishuBindings',
           'feishuBindingMeta',
-          '\u5F53\u524D\u8FD8\u6CA1\u6709\u98DE\u4E66\u804A\u5929\u63A5\u5165\u3002\u5148\u5728\u98DE\u4E66\u673A\u5668\u4EBA\u91CC\u53D1\u4E00\u6761\u6D88\u606F\uFF0Cbridge \u624D\u4F1A\u521B\u5EFA\u7ED1\u5B9A\u3002'
+          emptyBindingText('feishu')
         );
         renderChannelBindings(
           'weixin',
           'weixinBindings',
           'weixinBindingMeta',
-          '\u5F53\u524D\u8FD8\u6CA1\u6709\u5FAE\u4FE1\u804A\u5929\u63A5\u5165\u3002\u5148\u8BA9\u5FAE\u4FE1\u8D26\u53F7\u53D1\u4E00\u6761\u6D88\u606F\uFF0Cbridge \u624D\u4F1A\u521B\u5EFA\u7ED1\u5B9A\u3002'
+          emptyBindingText('weixin')
         );
+        rerenderDesktopSessions();
       }
 
       function fillForm(config) {
@@ -7355,6 +8308,7 @@ function renderHtml() {
         document.getElementById('feishuAllowedUsers').value = config.feishuAllowedUsers || '';
         document.getElementById('feishuStreamingEnabled').checked = config.feishuStreamingEnabled !== false;
         document.getElementById('weixinMediaEnabled').checked = config.weixinMediaEnabled === true;
+        rerenderDesktopSessions();
       }
 
       async function api(path, options) {
@@ -7372,12 +8326,23 @@ function renderHtml() {
       async function loadStatus() {
         const status = await api('/api/status');
         const config = await api('/api/config');
+        state.bridgeStatus = status.bridge || null;
+        state.weixinAccounts = status.weixin && Array.isArray(status.weixin.linkedAccounts) ? status.weixin.linkedAccounts : [];
         fillForm(config);
-        document.getElementById('bridgeStatus').textContent = status.bridge.running ? 'Running' : 'Stopped';
+        const runningChannelText = runningChannels().length ? ' \xB7 ' + runningChannels().join(', ') : '';
+        document.getElementById('bridgeStatus').textContent = status.bridge.running ? 'Running' + runningChannelText : 'Stopped';
         document.getElementById('integrationStatus').textContent = status.codexIntegrationInstalled ? '\u5DF2\u5B89\u88C5' : '\u672A\u5B89\u88C5';
         document.getElementById('runtimeStatus').textContent = config.runtime || 'codex';
         document.getElementById('homeStatus').textContent = status.home;
+        document.getElementById('overviewHomeStatus').textContent = status.home;
         document.getElementById('packageRoot').textContent = status.packageRoot;
+        document.getElementById('feishuRuntimeMeta').textContent = channelRuntimeText('feishu');
+        document.getElementById('weixinRuntimeMeta').textContent = channelRuntimeText('weixin');
+        renderWeixinAccounts();
+        renderBindings({
+          bindings: state.bindings,
+          options: state.bindingOptions,
+        });
       }
 
       async function loadLogs() {
@@ -7386,7 +8351,7 @@ function renderHtml() {
       }
 
       async function loadDesktopSessions() {
-        const result = await api('/api/desktop-sessions?limit=10');
+        const result = await api('/api/desktop-sessions?limit=36');
         renderDesktopSessions(result);
       }
 
@@ -7401,14 +8366,53 @@ function renderHtml() {
           body: JSON.stringify(formPayload()),
         });
         fillForm(saved.config);
-        showMessage('feishuMessage', 'success', '\u914D\u7F6E\u5DF2\u4FDD\u5B58\u3002');
+        showMessage(
+          'configMessage',
+          'success',
+          bridgeNeedsRestart()
+            ? '\u914D\u7F6E\u5DF2\u4FDD\u5B58\u3002\u5F53\u524D Bridge \u8FD8\u5728\u4F7F\u7528\u65E7\u901A\u9053\u914D\u7F6E\uFF0C\u70B9\u51FB\u201C\u91CD\u542F Bridge\u201D\u540E\u751F\u6548\u3002'
+            : '\u914D\u7F6E\u5DF2\u4FDD\u5B58\u3002'
+        );
         return saved;
       }
 
+      document.querySelectorAll('.nav-link').forEach((element) => {
+        element.addEventListener('click', () => {
+          setActivePage(element.dataset.page || 'overview', true);
+        });
+      });
+
+      document.querySelectorAll('.channel-tab').forEach((element) => {
+        element.addEventListener('click', () => {
+          setActivePage('channels', false);
+          setActiveChannel(element.dataset.channel || 'feishu', true);
+        });
+      });
+
+      window.addEventListener('hashchange', syncPageFromHash);
+
       document.getElementById('saveConfigBtn').addEventListener('click', async () => {
         try {
           await saveConfig();
           await loadStatus();
+          await loadBindings();
+        } catch (error) {
+          showMessage('configMessage', 'error', error.message);
+        }
+      });
+
+      document.getElementById('saveFeishuChannelBtn').addEventListener('click', async () => {
+        try {
+          await saveConfig();
+          await loadStatus();
+          await loadBindings();
+          showMessage(
+            'feishuMessage',
+            'success',
+            bridgeNeedsRestart()
+              ? '\u98DE\u4E66\u914D\u7F6E\u5DF2\u4FDD\u5B58\u3002\u5F53\u524D Bridge \u8FD8\u5728\u4F7F\u7528\u65E7\u901A\u9053\u914D\u7F6E\uFF0C\u70B9\u51FB\u201C\u91CD\u542F Bridge\u201D\u540E\u751F\u6548\u3002'
+              : '\u98DE\u4E66\u914D\u7F6E\u5DF2\u4FDD\u5B58\u3002'
+          );
         } catch (error) {
           showMessage('feishuMessage', 'error', error.message);
         }
@@ -7417,6 +8421,8 @@ function renderHtml() {
       document.getElementById('testFeishuBtn').addEventListener('click', async () => {
         try {
           await saveConfig();
+          await loadStatus();
+          await loadBindings();
           const result = await api('/api/test/feishu', { method: 'POST' });
           showMessage('feishuMessage', result.ok ? 'success' : 'error', result.message);
         } catch (error) {
@@ -7424,12 +8430,34 @@ function renderHtml() {
         }
       });
 
+      document.getElementById('saveWeixinChannelBtn').addEventListener('click', async () => {
+        try {
+          await saveConfig();
+          await loadStatus();
+          await loadBindings();
+          showMessage(
+            'weixinMessage',
+            'success',
+            bridgeNeedsRestart()
+              ? '\u5FAE\u4FE1\u914D\u7F6E\u5DF2\u4FDD\u5B58\u3002\u5F53\u524D Bridge \u8FD8\u5728\u4F7F\u7528\u65E7\u901A\u9053\u914D\u7F6E\uFF0C\u70B9\u51FB\u201C\u91CD\u542F Bridge\u201D\u540E\u751F\u6548\u3002'
+              : '\u5FAE\u4FE1\u914D\u7F6E\u5DF2\u4FDD\u5B58\u3002'
+          );
+        } catch (error) {
+          showMessage('weixinMessage', 'error', error.message);
+        }
+      });
+
       document.getElementById('weixinLoginBtn').addEventListener('click', async () => {
         try {
           await saveConfig();
           showMessage('weixinMessage', 'success', '\u5FAE\u4FE1\u626B\u7801\u6D41\u7A0B\u5DF2\u542F\u52A8\uFF0C\u6D4F\u89C8\u5668\u4F1A\u6253\u5F00\u4E8C\u7EF4\u7801\u9875\u9762\u3002');
           const result = await api('/api/test/weixin', { method: 'POST' });
-          showMessage('weixinMessage', result.ok ? 'success' : 'error', result.message);
+          await loadStatus();
+          await loadBindings();
+          const followup = isChannelRunning('weixin')
+            ? '\u5FAE\u4FE1\u8D26\u53F7\u5DF2\u4FDD\u5B58\u3002\u5F53\u524D Bridge \u5DF2\u52A0\u8F7D\u5FAE\u4FE1\u901A\u9053\uFF0C\u51E0\u79D2\u540E\u4F1A\u81EA\u52A8\u63A5\u5165\u65B0\u8D26\u53F7\u3002'
+            : '\u5FAE\u4FE1\u8D26\u53F7\u5DF2\u4FDD\u5B58\u3002\u5F53\u524D\u8FD0\u884C\u4E2D\u7684 Bridge \u8FD8\u6CA1\u52A0\u8F7D\u5FAE\u4FE1\u901A\u9053\uFF0C\u70B9\u51FB\u201C\u91CD\u542F Bridge\u201D\u540E\u751F\u6548\u3002';
+          showMessage('weixinMessage', result.ok ? 'success' : 'error', followup);
         } catch (error) {
           showMessage('weixinMessage', 'error', error.message);
         }
@@ -7460,6 +8488,20 @@ function renderHtml() {
         }
       });
 
+      document.getElementById('restartBridgeBtn').addEventListener('click', async () => {
+        try {
+          await saveConfig();
+          const result = await api('/api/bridge/restart', { method: 'POST' });
+          showMessage('opsMessage', 'success', 'Bridge \u5DF2\u91CD\u542F\u3002PID: ' + (result.status.pid || '-'));
+          await loadStatus();
+          await loadBindings();
+          await loadLogs();
+        } catch (error) {
+          showMessage('opsMessage', 'error', error.message);
+          await loadLogs();
+        }
+      });
+
       document.getElementById('installIntegrationBtn').addEventListener('click', async () => {
         try {
           const result = await api('/api/install-codex-integration', { method: 'POST' });
@@ -7492,12 +8534,20 @@ function renderHtml() {
         }
       });
 
+      document.getElementById('refreshLogsBtn').addEventListener('click', async () => {
+        try {
+          await loadLogs();
+        } catch (error) {
+          showMessage('opsMessage', 'error', error.message);
+        }
+      });
+
       document.getElementById('refreshDesktopBtn').addEventListener('click', async () => {
         try {
           await loadDesktopSessions();
           showMessage('desktopMessage', 'success', '\u684C\u9762\u4F1A\u8BDD\u5217\u8868\u5DF2\u5237\u65B0\u3002');
         } catch (error) {
-          showMessage('desktopMessage', 'error', error.message);
+          showGlobalMessage('error', error.message);
         }
       });
 
@@ -7507,6 +8557,28 @@ function renderHtml() {
         if (!target) return;
 
         try {
+          if (target.dataset.action === 'bind-channel') {
+            const bindingId = target.dataset.bindingId || '';
+            const targetKey = target.dataset.targetKey || '';
+            const channelType = target.dataset.channel || '';
+            if (!bindingId || !targetKey) {
+              throw new Error('\u5F53\u524D\u901A\u9053\u6CA1\u6709\u53EF\u5207\u6362\u7684\u7ED1\u5B9A\uFF0C\u8BF7\u5148\u5728\u901A\u9053\u9875\u5B8C\u6210\u63A5\u5165\u3002');
+            }
+            const result = await api('/api/bindings/update', {
+              method: 'POST',
+              body: JSON.stringify({
+                bindingId,
+                targetKey,
+              }),
+            });
+            renderBindings(result);
+            showMessage(
+              'desktopMessage',
+              'success',
+              (channelType === 'weixin' ? '\u5FAE\u4FE1' : '\u98DE\u4E66') + '\u5DF2\u5207\u6362\u5230\u5F53\u524D\u4F1A\u8BDD\u3002'
+            );
+            return;
+          }
           if (target.dataset.action === 'copy-thread') {
             await copyText(target.dataset.threadId || '', 'Thread ID \u5DF2\u590D\u5236\u3002');
             return;
@@ -7525,20 +8597,15 @@ function renderHtml() {
 
       async function handleBindingAction(event, channelType, messageId) {
         const source = event.target instanceof Element ? event.target : null;
-        const target = source ? source.closest('button[data-action="save-binding"]') : null;
+        const target = source ? source.closest('button[data-action="switch-binding-target"]') : null;
         if (!target) return;
 
-        const item = target.closest('[data-binding-id]');
-        if (!item) return;
-        const select = item.querySelector('select[data-role="target"]');
-        if (!select) return;
-
         try {
           const result = await api('/api/bindings/update', {
             method: 'POST',
             body: JSON.stringify({
-              bindingId: item.dataset.bindingId,
-              targetKey: select.value,
+              bindingId: target.dataset.bindingId,
+              targetKey: target.dataset.targetKey,
             }),
           });
           renderBindings(result);
@@ -7556,6 +8623,8 @@ function renderHtml() {
         handleBindingAction(event, 'weixin', 'weixinMessage');
       });
 
+      syncPageFromHash();
+
       Promise.all([loadStatus(), loadBindings(), loadDesktopSessions(), loadLogs()]).catch((error) => {
         showMessage('opsMessage', 'error', error.message);
       });
@@ -7581,6 +8650,9 @@ var server = http.createServer(async (request, response) => {
         home: CTI_HOME,
         packageRoot: getPackageRoot(),
         codexIntegrationInstalled: isCodexIntegrationInstalled(),
+        weixin: {
+          linkedAccounts: getWeixinAccountsPayload()
+        },
         startedAt: serverStartTime
       });
       return;
@@ -7645,6 +8717,11 @@ var server = http.createServer(async (request, response) => {
       json(response, 200, { ok: true, status });
       return;
     }
+    if (request.method === "POST" && url.pathname === "/api/bridge/restart") {
+      const status = await restartBridge();
+      json(response, 200, { ok: true, status });
+      return;
+    }
     if (request.method === "POST" && url.pathname === "/api/bindings/update") {
       const payload = await readJsonBody(request);
       const bindingId = asString(payload.bindingId);