chattercatcher 0.1.30 → 0.2.1

package/dist/index.js

@@ -4294,6 +4294,166 @@ var FeishuQuestionHandler = class {
 // src/feishu/sender.ts
 import * as lark from "@larksuiteoapi/node-sdk";
 import fs9 from "fs/promises";
+
+// src/feishu/markdown-post.ts
+function escapeAtText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function formatTextWithMentions(text, options) {
+  const mentions = options?.mentions ?? [];
+  if (mentions.length === 0) return text;
+  const prefix = mentions.map((mention) => `<at user_id="${escapeAtText(mention.openId)}">${escapeAtText(mention.name)}</at>`).join(" ");
+  return `${prefix} ${text}`.trim();
+}
+function findMarkdownLinkEnd(text, start) {
+  let depth = 0;
+  for (let index = start; index < text.length; index += 1) {
+    const char = text[index];
+    if (char === "(") {
+      depth += 1;
+    } else if (char === ")") {
+      if (depth === 0) return index;
+      depth -= 1;
+    }
+  }
+  return -1;
+}
+function parseInline(text) {
+  const elements = [];
+  let index = 0;
+  while (index < text.length) {
+    const linkStart = text.indexOf("[", index);
+    const boldStarStart = text.indexOf("**", index);
+    const boldUnderscoreStart = text.indexOf("__", index);
+    const candidates = [linkStart, boldStarStart, boldUnderscoreStart].filter((value) => value >= 0);
+    const next = candidates.length ? Math.min(...candidates) : -1;
+    if (next < 0) {
+      elements.push({ tag: "text", text: text.slice(index) });
+      break;
+    }
+    if (next > index) {
+      elements.push({ tag: "text", text: text.slice(index, next) });
+    }
+    if (next === linkStart) {
+      const labelEnd = text.indexOf("](", next);
+      if (labelEnd > next) {
+        const hrefStart = labelEnd + 2;
+        const hrefEnd = findMarkdownLinkEnd(text, hrefStart);
+        const href = hrefEnd >= 0 ? text.slice(hrefStart, hrefEnd) : "";
+        if (hrefEnd >= 0 && /^https?:\/\/\S+$/.test(href)) {
+          elements.push({ tag: "a", text: text.slice(next + 1, labelEnd), href });
+          index = hrefEnd + 1;
+          continue;
+        }
+      }
+      elements.push({ tag: "text", text: text[next] });
+      index = next + 1;
+      continue;
+    }
+    const marker = next === boldStarStart ? "**" : "__";
+    const close = text.indexOf(marker, next + marker.length);
+    if (close > next + marker.length) {
+      elements.push({ tag: "text", text: text.slice(next + marker.length, close), style: ["bold"] });
+      index = close + marker.length;
+      continue;
+    }
+    elements.push({ tag: "text", text: marker });
+    index = next + marker.length;
+  }
+  const compacted = elements.filter((element) => element.tag !== "text" || element.text.length > 0);
+  return compacted.length ? compacted : [{ tag: "text", text: " " }];
+}
+function pushParagraph(content, lines) {
+  if (lines.length === 0) return;
+  content.push(parseInline(lines.join("\n")));
+  lines.length = 0;
+}
+function parseMarkdownBlocks(markdown) {
+  if (!markdown.trim()) {
+    return [[{ tag: "text", text: " " }]];
+  }
+  const content = [];
+  const paragraph = [];
+  const code = [];
+  let inCodeBlock = false;
+  for (const rawLine of markdown.replace(/\r\n/g, "\n").split("\n")) {
+    const line = rawLine.trimEnd();
+    if (line.startsWith("```")) {
+      if (inCodeBlock) {
+        content.push([{ tag: "text", text: `\`\`\`
+${code.join("\n")}
+\`\`\`` }]);
+        code.length = 0;
+        inCodeBlock = false;
+      } else {
+        pushParagraph(content, paragraph);
+        inCodeBlock = true;
+      }
+      continue;
+    }
+    if (inCodeBlock) {
+      code.push(rawLine);
+      continue;
+    }
+    if (!line.trim()) {
+      pushParagraph(content, paragraph);
+      continue;
+    }
+    const heading = line.match(/^#{1,6}\s+(.+)$/);
+    if (heading) {
+      pushParagraph(content, paragraph);
+      content.push([{ tag: "text", text: heading[1], style: ["bold"] }]);
+      continue;
+    }
+    const unordered = line.match(/^[-*]\s+(.+)$/);
+    if (unordered) {
+      pushParagraph(content, paragraph);
+      content.push(parseInline(`\u2022 ${unordered[1]}`));
+      continue;
+    }
+    const ordered = line.match(/^(\d+)\.\s+(.+)$/);
+    if (ordered) {
+      pushParagraph(content, paragraph);
+      content.push(parseInline(`${ordered[1]}. ${ordered[2]}`));
+      continue;
+    }
+    paragraph.push(line);
+  }
+  if (inCodeBlock) {
+    content.push([{ tag: "text", text: `\`\`\`
+${code.join("\n")}` }]);
+  }
+  pushParagraph(content, paragraph);
+  return content.length ? content : [[{ tag: "text", text: markdown }]];
+}
+function buildFeishuPostContent(markdown, options) {
+  const content = parseMarkdownBlocks(markdown);
+  const mentions = options?.mentions ?? [];
+  if (mentions.length) {
+    const mentionElements = mentions.map((mention) => ({
+      tag: "at",
+      user_id: mention.openId,
+      user_name: mention.name
+    }));
+    const firstLine = content[0] ?? [];
+    const firstText = firstLine[0];
+    if (firstText?.tag === "text") {
+      content[0] = [...mentionElements, { ...firstText, text: ` ${firstText.text}` }, ...firstLine.slice(1)];
+    } else {
+      content[0] = [...mentionElements, { tag: "text", text: " " }, ...firstLine];
+    }
+  }
+  return {
+    post: {
+      zh_cn: {
+        title: "",
+        content
+      }
+    }
+  };
+}
+
+// src/feishu/sender.ts
 function mapDomain(domain) {
   return domain === "lark" ? lark.Domain.Lark : lark.Domain.Feishu;
 }
@@ -4309,14 +4469,33 @@ function extractImageKey(response) {
   }
   throw new Error("\u98DE\u4E66\u56FE\u7247\u4E0A\u4F20\u54CD\u5E94\u7F3A\u5C11 image_key\u3002");
 }
-function escapeAtText(value) {
-  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function collectErrorFields(error) {
+  const fields = [error];
+  const value = error && typeof error === "object" ? error : {};
+  fields.push(value.code, value.errorCode, value.msg, value.message);
+  const response = value.response && typeof value.response === "object" ? value.response : {};
+  const data = response.data && typeof response.data === "object" ? response.data : {};
+  fields.push(data.code, data.errorCode, data.msg, data.message);
+  return fields;
+}
+function isRichTextCompatibilityError(error) {
+  return collectErrorFields(error).some((field) => {
+    if (field === 230001) return true;
+    if (typeof field === "string") {
+      return /post|msg_type|content|unsupported|invalid/i.test(field);
+    }
+    return false;
+  });
 }
-function formatTextWithMentions(text, options) {
-  const mentions = options?.mentions ?? [];
-  if (mentions.length === 0) return text;
-  const prefix = mentions.map((mention) => `<at user_id="${escapeAtText(mention.openId)}">${escapeAtText(mention.name)}</at>`).join(" ");
-  return `${prefix} ${text}`.trim();
+async function sendWithTextFallback(input) {
+  try {
+    await input.sendPost();
+  } catch (error) {
+    if (!isRichTextCompatibilityError(error)) {
+      throw error;
+    }
+    await input.sendText();
+  }
 }
 var FeishuMessageSender = class _FeishuMessageSender {
   constructor(client) {
@@ -4332,7 +4511,17 @@ var FeishuMessageSender = class _FeishuMessageSender {
     return new _FeishuMessageSender(client);
   }
   async sendTextToChat(chatId, text, options) {
-    const payload = {
+    const postPayload = {
+      data: {
+        receive_id: chatId,
+        msg_type: "post",
+        content: JSON.stringify(buildFeishuPostContent(text, options))
+      },
+      params: {
+        receive_id_type: "chat_id"
+      }
+    };
+    const textPayload = {
       data: {
         receive_id: chatId,
         msg_type: "text",
@@ -4343,16 +4532,20 @@ var FeishuMessageSender = class _FeishuMessageSender {
       }
     };
     if (this.client.im.v1?.message.create) {
-      await this.client.im.v1.message.create(payload);
+      await sendWithTextFallback({
+        sendPost: () => this.client.im.v1.message.create(postPayload),
+        sendText: () => this.client.im.v1.message.create(textPayload)
+      });
       return;
     }
     if (this.client.im.message?.create) {
-      await this.client.im.message.create(payload);
+      await sendWithTextFallback({
+        sendPost: () => this.client.im.message.create(postPayload),
+        sendText: () => this.client.im.message.create(textPayload)
+      });
       return;
     }
-    {
-      throw new Error("\u5F53\u524D\u98DE\u4E66 SDK \u4E0D\u652F\u6301\u6D88\u606F\u53D1\u9001\u63A5\u53E3\u3002");
-    }
+    throw new Error("\u5F53\u524D\u98DE\u4E66 SDK \u4E0D\u652F\u6301\u6D88\u606F\u53D1\u9001\u63A5\u53E3\u3002");
   }
   async sendImageToChat(chatId, imagePath) {
     const imageCreate = this.client.im.v1?.image?.create;
@@ -4388,7 +4581,16 @@ var FeishuMessageSender = class _FeishuMessageSender {
     throw new Error("\u5F53\u524D\u98DE\u4E66 SDK \u4E0D\u652F\u6301\u6D88\u606F\u53D1\u9001\u63A5\u53E3\u3002");
   }
   async replyTextToMessage(messageId, text) {
-    const payload = {
+    const postPayload = {
+      path: {
+        message_id: messageId
+      },
+      data: {
+        msg_type: "post",
+        content: JSON.stringify(buildFeishuPostContent(text))
+      }
+    };
+    const textPayload = {
       path: {
         message_id: messageId
       },
@@ -4398,11 +4600,17 @@ var FeishuMessageSender = class _FeishuMessageSender {
       }
     };
     if (this.client.im.v1?.message.reply) {
-      await this.client.im.v1.message.reply(payload);
+      await sendWithTextFallback({
+        sendPost: () => this.client.im.v1.message.reply(postPayload),
+        sendText: () => this.client.im.v1.message.reply(textPayload)
+      });
       return;
     }
     if (this.client.im.message?.reply) {
-      await this.client.im.message.reply(payload);
+      await sendWithTextFallback({
+        sendPost: () => this.client.im.message.reply(postPayload),
+        sendText: () => this.client.im.message.reply(textPayload)
+      });
       return;
     }
     throw new Error("\u5F53\u524D\u98DE\u4E66 SDK \u4E0D\u652F\u6301\u6D88\u606F\u56DE\u590D\u63A5\u53E3\u3002");
@@ -5304,516 +5512,867 @@ import Fastify from "fastify";
 function buildHtml() {
   return `<!doctype html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>ChatterCatcher</title>
-    <style>
-      :root {
-        color-scheme: light;
-        --bg: #f6f5f0;
-        --panel: #ffffff;
-        --text: #1f2933;
-        --muted: #667085;
-        --line: #d9d7cf;
-        --accent: #1f7a5a;
-        --warn: #9a5b13;
-      }
-      * { box-sizing: border-box; }
-      body {
-        margin: 0;
-        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        background: var(--bg);
-        color: var(--text);
-      }
-      main { max-width: 1120px; margin: 0 auto; padding: 32px 24px 48px; overflow-x: hidden; }
-      header {
-        display: flex;
-        justify-content: space-between;
-        gap: 20px;
-        align-items: flex-start;
-        padding-bottom: 24px;
-        border-bottom: 1px solid var(--line);
-      }
-      h1 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: 0; }
-      h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: 0; }
-      p { margin: 8px 0 0; color: var(--muted); }
-      code { background: #eceae2; border-radius: 4px; padding: 2px 6px; }
-      button {
-        appearance: none;
-        border: 1px solid var(--line);
-        background: var(--panel);
-        color: var(--text);
-        border-radius: 6px;
-        padding: 8px 12px;
-        cursor: pointer;
-      }
-      button:hover { border-color: var(--accent); }
-      .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-        gap: 12px;
-        margin: 24px 0;
-      }
-      .metric {
-        background: var(--panel);
-        border: 1px solid var(--line);
-        border-radius: 8px;
-        padding: 16px;
-        min-height: 112px;
-      }
-      .label { color: var(--muted); font-size: 13px; }
-      .value { margin-top: 10px; font-size: 22px; font-weight: 650; overflow-wrap: anywhere; line-height: 1.18; }
-      .note { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
-      .layout {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
-        gap: 24px;
-      }
-      .layout > * { min-width: 0; }
-      section { padding: 20px 0; border-top: 1px solid var(--line); }
-      section:first-child { border-top: 0; }
-      .message-list { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
-      .message-item { padding: 14px 16px; border-bottom: 1px solid var(--line); }
-      .message-item:last-child { border-bottom: 0; }
-      .message-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 13px; line-height: 1.4; }
-      .message-body { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
-      table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
-      th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
-      th { color: var(--muted); font-size: 13px; font-weight: 600; }
-      tr:last-child td { border-bottom: 0; }
-      .message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-      .id-text, .path { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 13px; }
-      .compact-table th:first-child, .compact-table td:first-child { width: 120px; }
-      .compact-table th:nth-child(2), .compact-table td:nth-child(2) { width: 180px; }
-      .status-ok { color: var(--accent); }
-      .status-warn { color: var(--warn); }
-      .empty { color: var(--muted); padding: 18px; background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; }
-      .status-line { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: right; }
-      @media (max-width: 900px) {
-        header, .layout { display: block; }
-        .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-        header button { margin-top: 16px; }
-      }
-      @media (max-width: 560px) {
-        main { padding: 24px 16px 36px; }
-        .grid { grid-template-columns: 1fr; }
-      }
-    </style>
-  </head>
-  <body>
-    <main>
-      <header>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="color-scheme" content="dark" />
+  <title>ChatterCatcher</title>
+  <style>
+    :root {
+      --bg-primary: #0a0a0f;
+      --bg-secondary: #12121a;
+      --bg-tertiary: #1a1a28;
+      --glass-bg: rgba(255,255,255,0.05);
+      --glass-border: rgba(255,255,255,0.1);
+      --glass-border-hover: rgba(255,255,255,0.2);
+      --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
+      --text-primary: #f0f0f5;
+      --text-secondary: #a0a0b0;
+      --text-muted: #6e6e80;
+      --accent: #64d2ff;
+      --accent-hover: #7dd8ff;
+      --success: #30d158;
+      --warning: #ff9f0a;
+      --danger: #ff453a;
+      --radius-sm: 8px;
+      --radius-md: 12px;
+      --radius-lg: 16px;
+      --radius-xl: 24px;
+      --space-xs: 4px;
+      --space-sm: 8px;
+      --space-md: 16px;
+      --space-lg: 24px;
+      --space-xl: 32px;
+      --space-2xl: 48px;
+      --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
+      --font-mono: "SF Mono","Menlo","Consolas",monospace;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: var(--font-sans);
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
+      min-height: 100vh;
+    }
+    .glass {
+      background: var(--glass-bg);
+      backdrop-filter: blur(20px) saturate(180%);
+      -webkit-backdrop-filter: blur(20px) saturate(180%);
+      border: 1px solid var(--glass-border);
+      border-radius: var(--radius-lg);
+      box-shadow: var(--glass-shadow);
+      transition: all 0.3s ease;
+    }
+    .glass:hover { border-color: var(--glass-border-hover); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
+    .gradient-bg {
+      background: linear-gradient(135deg,#0a0a0f 0%,#12121a 50%,#1a1a28 100%);
+      min-height: 100vh;
+    }
+    .sidebar {
+      position: fixed; left: 0; top: 0; width: 260px; height: 100vh;
+      padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); z-index: 100;
+      background: linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 100%);
+      backdrop-filter: blur(40px) saturate(200%);
+      -webkit-backdrop-filter: blur(40px) saturate(200%);
+      border-right: 1px solid var(--glass-border);
+    }
+    .sidebar-logo {
+      display: flex; align-items: center; gap: var(--space-sm);
+      padding: var(--space-md); font-size: 20px; font-weight: 700;
+      color: var(--text-primary); margin-bottom: var(--space-md);
+    }
+    .logo-icon {
+      width: 36px; height: 36px;
+      background: linear-gradient(135deg,var(--accent),#5e60ce);
+      border-radius: var(--radius-md);
+      display: flex; align-items: center; justify-content: center;
+      box-shadow: 0 4px 16px rgba(100,210,255,0.3);
+    }
+    .sidebar-nav { display: flex; flex-direction: column; gap: var(--space-xs); }
+    .nav-item {
+      display: flex; align-items: center; gap: var(--space-sm);
+      padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
+      color: var(--text-secondary); text-decoration: none; cursor: pointer;
+      transition: all 0.2s ease; border: none; background: none;
+      font-size: 14px; font-family: inherit; width: 100%; text-align: left;
+    }
+    .nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
+    .nav-item.active {
+      background: rgba(100,210,255,0.15); color: var(--accent);
+      box-shadow: 0 0 20px rgba(100,210,255,0.1);
+    }
+    .nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
+    .main-content { margin-left: 260px; min-height: 100vh; padding: var(--space-xl); }
+    .page-header { margin-bottom: var(--space-xl); }
+    .page-title {
+      font-size: 36px; font-weight: 700; letter-spacing: -0.03em;
+      margin-bottom: var(--space-sm);
+      background: linear-gradient(135deg,var(--text-primary),var(--accent));
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    }
+    .page-subtitle { color: var(--text-secondary); font-size: 15px; }
+    .metrics-grid {
+      display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
+      gap: var(--space-md); margin-bottom: var(--space-xl);
+    }
+    .metric-card {
+      padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm);
+      position: relative; overflow: hidden;
+    }
+    .metric-card::before {
+      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
+      background: linear-gradient(90deg,var(--accent),transparent); opacity: 0.5;
+    }
+    .metric-value { font-size: 40px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
+    .metric-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
+    .metric-note { font-size: 13px; color: var(--text-secondary); margin-top: var(--space-xs); }
+    .content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); }
+    .content-panel { padding: var(--space-lg); }
+    .panel-header {
+      display: flex; justify-content: space-between; align-items: center;
+      margin-bottom: var(--space-lg); padding-bottom: var(--space-md);
+      border-bottom: 1px solid var(--glass-border);
+    }
+    .panel-title { font-size: 18px; font-weight: 600; }
+    .message-list { display: flex; flex-direction: column; gap: var(--space-sm); }
+    .message-card {
+      padding: var(--space-md); border-radius: var(--radius-md);
+      background: rgba(255,255,255,0.03); border: 1px solid transparent;
+      transition: all 0.25s ease; cursor: pointer;
+    }
+    .message-card:hover { background: rgba(255,255,255,0.06); border-color: var(--glass-border); transform: translateX(4px); }
+    .message-meta {
+      display: flex; align-items: center; gap: var(--space-md);
+      color: var(--text-muted); font-size: 12px; margin-bottom: var(--space-xs); flex-wrap: wrap;
+    }
+    .message-text { color: var(--text-secondary); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+    .status-dot.online { background: var(--success); box-shadow: 0 0 8px var(--success); }
+    .status-dot.offline { background: var(--danger); }
+    .status-dot.warning { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
+    .status-dot.pending { background: var(--text-muted); }
+    .btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
+      padding: 10px var(--space-md); border-radius: var(--radius-md);
+      border: 1px solid var(--glass-border); background: var(--glass-bg);
+      color: var(--text-primary); font-family: inherit; font-size: 14px;
+      cursor: pointer; transition: all 0.2s ease; text-decoration: none;
+    }
+    .btn:hover { background: rgba(255,255,255,0.1); border-color: var(--glass-border-hover); transform: translateY(-1px); }
+    .btn-primary {
+      background: linear-gradient(135deg,var(--accent),#5e60ce); color: white; border: none;
+      font-weight: 600; box-shadow: 0 4px 16px rgba(100,210,255,0.3);
+    }
+    .btn-primary:hover {
+      background: linear-gradient(135deg,var(--accent-hover),#6b6dd8);
+      box-shadow: 0 6px 20px rgba(100,210,255,0.4); transform: translateY(-1px);
+    }
+    .btn-danger { background: rgba(255,69,58,0.15); color: var(--danger); border-color: rgba(255,69,58,0.3); }
+    .btn-danger:hover { background: rgba(255,69,58,0.25); }
+    .btn-sm { padding: 6px var(--space-sm); font-size: 13px; }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .tag {
+      display: inline-flex; align-items: center; padding: 2px 10px;
+      border-radius: 20px; font-size: 12px; font-weight: 500;
+      background: rgba(255,255,255,0.06); color: var(--text-secondary);
+    }
+    .tag-success { background: rgba(48,209,88,0.15); color: var(--success); }
+    .tag-warning { background: rgba(255,159,10,0.15); color: var(--warning); }
+    .tag-error { background: rgba(255,69,58,0.15); color: var(--danger); }
+    .tag-info { background: rgba(100,210,255,0.15); color: var(--accent); }
+    .empty-state { text-align: center; padding: var(--space-2xl); color: var(--text-muted); }
+    .empty-state svg { width: 48px; height: 48px; margin: 0 auto var(--space-md); opacity: 0.3; }
+    .skeleton {
+      background: linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.03) 75%);
+      background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);
+    }
+    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+    .view { display: none; animation: fadeIn 0.35s ease; }
+    .view.active { display: block; }
+    .search-box { position: relative; width: 100%; max-width: 400px; }
+    .search-box input {
+      width: 100%; padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
+      border-radius: var(--radius-md); border: 1px solid var(--glass-border);
+      background: var(--glass-bg); color: var(--text-primary); font-family: inherit;
+      font-size: 14px; outline: none; transition: all 0.2s ease;
+    }
+    .search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(100,210,255,0.1); }
+    .search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
+    .data-table { width: 100%; border-collapse: collapse; }
+    .data-table th {
+      text-align: left; padding: var(--space-sm) var(--space-md); color: var(--text-muted);
+      font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
+      border-bottom: 1px solid var(--glass-border);
+    }
+    .data-table td { padding: var(--space-sm) var(--space-md); color: var(--text-secondary); font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: top; }
+    .data-table tr:hover td { background: rgba(255,255,255,0.02); }
+    .data-table tr:last-child td { border-bottom: none; }
+    .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+    .truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+    .flex { display: flex; } .flex-col { flex-direction: column; }
+    .items-center { align-items: center; } .justify-between { justify-content: space-between; }
+    .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); }
+    .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); }
+    .mb-md { margin-bottom: var(--space-md); }
+    .toast {
+      padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md);
+      background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4); color: var(--text-primary); font-size: 14px;
+      max-width: 400px; animation: slideIn 0.3s ease;
+      display: flex; align-items: center; gap: var(--space-sm);
+    }
+    .toast-success { border-color: rgba(48,209,88,0.3); background: rgba(48,209,88,0.1); }
+    .toast-error { border-color: rgba(255,69,58,0.3); background: rgba(255,69,58,0.1); }
+    .toast-warning { border-color: rgba(255,159,10,0.3); background: rgba(255,159,10,0.1); }
+    .episode-card {
+      padding: var(--space-md); border-radius: var(--radius-md);
+      background: rgba(255,255,255,0.03); border: 1px solid transparent; transition: all 0.25s ease;
+    }
+    .episode-card:hover { background: rgba(255,255,255,0.06); border-color: var(--glass-border); }
+    .qa-card {
+      padding: var(--space-md); border-radius: var(--radius-md);
+      background: rgba(255,255,255,0.03); border-left: 3px solid var(--accent); margin-bottom: var(--space-sm);
+    }
+    .qa-question { font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); font-size: 14px; }
+    .qa-answer { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
+    .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); }
+    .section-title { font-size: 24px; font-weight: 700; }
+    .tabs {
+      display: flex; gap: var(--space-xs); padding: 4px;
+      background: rgba(255,255,255,0.03); border-radius: var(--radius-md); border: 1px solid var(--glass-border);
+    }
+    .tab { padding: 8px 16px; border-radius: var(--radius-sm); border: none; background: none; color: var(--text-secondary); font-family: inherit; font-size: 14px; cursor: pointer; transition: all 0.2s ease; }
+    .tab:hover { color: var(--text-primary); }
+    .tab.active { background: rgba(255,255,255,0.08); color: var(--text-primary); font-weight: 500; }
+    .file-card {
+      padding: var(--space-md); border-radius: var(--radius-md);
+      background: rgba(255,255,255,0.03); border: 1px solid transparent; transition: all 0.25s ease; cursor: pointer;
+    }
+    .file-card:hover { background: rgba(255,255,255,0.06); border-color: var(--glass-border); }
+    .file-icon {
+      width: 40px; height: 40px; border-radius: var(--radius-sm);
+      background: linear-gradient(135deg,var(--accent),#5e60ce);
+      display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-sm);
+    }
+    .timeline { position: relative; padding-left: 28px; }
+    .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg,var(--accent),transparent); opacity: 0.3; }
+    .timeline-item { position: relative; padding-bottom: var(--space-lg); }
+    .timeline-item::before { content: ''; position: absolute; left: -24px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-primary); box-shadow: 0 0 0 2px var(--accent); }
+    .timeline-date { font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-xs); }
+    .timeline-content { color: var(--text-secondary); font-size: 14px; }
+    .status-bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); margin-bottom: var(--space-lg); }
+    .status-item { display: flex; align-items: center; gap: var(--space-sm); }
+    .status-label { font-size: 13px; color: var(--text-muted); }
+    .status-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }
+    .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-md); }
+    .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }
+    .settings-group { padding: var(--space-lg); margin-bottom: var(--space-lg); }
+    .settings-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--glass-border); }
+    .settings-item:last-child { border-bottom: none; }
+    .settings-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
+    .settings-value { font-size: 14px; color: var(--text-secondary); font-family: var(--font-mono); }
+    .settings-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+    .mobile-nav {
+      display: none; position: fixed; bottom: 0; left: 0; right: 0;
+      padding: var(--space-sm); z-index: 100; flex-direction: row; justify-content: space-around;
+      border-top: 1px solid var(--glass-border);
+      background: linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 100%);
+      backdrop-filter: blur(40px) saturate(200%);
+    }
+    .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-xs); color: var(--text-secondary); text-decoration: none; cursor: pointer; border: none; background: none; font-size: 10px; font-family: inherit; }
+    .mobile-nav-item.active { color: var(--accent); }
+    .pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
+    @media (max-width: 1024px) {
+      .sidebar { width: 72px; padding: var(--space-sm); }
+      .sidebar-logo span, .nav-item span { display: none; }
+      .nav-item { justify-content: center; padding: var(--space-sm); }
+      .main-content { margin-left: 72px; padding: var(--space-lg); }
+      .content-grid { grid-template-columns: 1fr; }
+      .metrics-grid { grid-template-columns: repeat(2,1fr); }
+    }
+    @media (max-width: 768px) {
+      .sidebar { display: none; }
+      .mobile-nav { display: flex; }
+      .main-content { margin-left: 0; margin-bottom: 80px; padding: var(--space-md); }
+      .page-title { font-size: 28px; }
+      .metrics-grid { grid-template-columns: repeat(2,1fr); }
+      .grid-2, .grid-3 { grid-template-columns: 1fr; }
+      .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
+    }
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
+    .highlight-text { background: rgba(100,210,255,0.15); padding: 0 4px; border-radius: 3px; color: var(--accent); }
+  </style>
+</head>
+<body class="gradient-bg">
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <div class="logo-icon">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+      </div>
+      <span>ChatterCatcher</span>
+    </div>
+    <nav class="sidebar-nav">
+      <button class="nav-item active" data-view="overview">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+        <span>\u6982\u89C8</span>
+      </button>
+      <button class="nav-item" data-view="messages">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+        <span>\u6D88\u606F</span>
+      </button>
+      <button class="nav-item" data-view="episodes">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+        <span>\u4F1A\u8BDD\u8BB0\u5FC6</span>
+      </button>
+      <button class="nav-item" data-view="files">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+        <span>\u6587\u4EF6\u5E93</span>
+      </button>
+      <button class="nav-item" data-view="tasks">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+        <span>\u4EFB\u52A1</span>
+      </button>
+      <button class="nav-item" data-view="qa-logs">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        <span>\u95EE\u7B54\u65E5\u5FD7</span>
+      </button>
+      <button class="nav-item" data-view="settings">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        <span>\u8BBE\u7F6E</span>
+      </button>
+    </nav>
+    <div style="margin-top: auto; padding: var(--space-md);">
+      <div style="display: flex; align-items: center; gap: var(--space-sm); font-size: 12px; color: var(--text-muted);">
+        <span class="status-dot online" id="gateway-indicator"></span>
+        <span id="gateway-status-text">Gateway \u8FD0\u884C\u4E2D</span>
+      </div>
+      <div style="font-size: 11px; color: var(--text-muted); margin-top: var(--space-xs); opacity: 0.7;" id="version-text">v0.0.0</div>
+    </div>
+  </aside>
+
+  <nav class="mobile-nav glass">
+    <button class="mobile-nav-item active" data-view="overview">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+      <span>\u6982\u89C8</span>
+    </button>
+    <button class="mobile-nav-item" data-view="messages">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+      <span>\u6D88\u606F</span>
+    </button>
+    <button class="mobile-nav-item" data-view="files">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+      <span>\u6587\u4EF6</span>
+    </button>
+    <button class="mobile-nav-item" data-view="tasks">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+      <span>\u4EFB\u52A1</span>
+    </button>
+    <button class="mobile-nav-item" data-view="settings">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+      <span>\u8BBE\u7F6E</span>
+    </button>
+  </nav>
+
+  <main class="main-content">
+    <div class="view active" id="view-overview">
+      <div class="page-header">
+        <h1 class="page-title">Dashboard</h1>
+        <p class="page-subtitle">\u672C\u5730\u4F18\u5148\u7684\u5BB6\u5EAD\u7FA4\u77E5\u8BC6\u5E93 \xB7 \u95EE\u7B54\u5FC5\u987B\u5148\u68C0\u7D22 RAG \u8BC1\u636E\uFF0C\u4E0D\u5806\u53E0\u5168\u91CF\u4E0A\u4E0B\u6587</p>
+      </div>
+      <div class="metrics-grid" id="metrics"></div>
+      <div class="content-grid">
         <div>
-          <h1>ChatterCatcher</h1>
-          <p>\u672C\u5730\u4F18\u5148\u7684\u5BB6\u5EAD\u7FA4\u77E5\u8BC6\u5E93\u3002\u95EE\u7B54\u5FC5\u987B\u5148\u68C0\u7D22 RAG \u8BC1\u636E\uFF0C\u4E0D\u5806\u53E0\u5168\u91CF\u4E0A\u4E0B\u6587\u3002</p>
+          <div class="content-panel glass">
+            <div class="panel-header">
+              <h2 class="panel-title">\u6700\u8FD1\u6D88\u606F</h2>
+              <button class="btn btn-sm" onclick="navigateTo('messages')">\u67E5\u770B\u5168\u90E8</button>
+            </div>
+            <div id="recent-messages"></div>
+          </div>
+          <div class="content-panel glass mt-lg">
+            <div class="panel-header">
+              <h2 class="panel-title">\u4F1A\u8BDD\u8BB0\u5FC6</h2>
+              <button class="btn btn-sm" onclick="navigateTo('episodes')">\u67E5\u770B\u5168\u90E8</button>
+            </div>
+            <div id="recent-episodes"></div>
+          </div>
         </div>
         <div>
-          <div class="actions">
-            <button id="process-messages" type="button">\u7ACB\u5373\u5904\u7406</button>
+          <div class="content-panel glass">
+            <div class="panel-header"><h2 class="panel-title">\u7CFB\u7EDF\u72B6\u6001</h2></div>
+            <div id="system-status"></div>
+          </div>
+          <div class="content-panel glass mt-lg">
+            <div class="panel-header"><h2 class="panel-title">\u5FEB\u6377\u64CD\u4F5C</h2></div>
+            <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
+              <button class="btn btn-primary" id="btn-process-messages" onclick="processNow()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                \u7ACB\u5373\u5904\u7406\u6D88\u606F
+              </button>
+              <button class="btn" onclick="navigateTo('settings')">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+                \u7CFB\u7EDF\u8BBE\u7F6E
+              </button>
+            </div>
+          </div>
+          <div class="content-panel glass mt-lg">
+            <div class="panel-header"><h2 class="panel-title">RAG \u68C0\u7D22</h2></div>
+            <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.8;">
+              <div style="display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm);"><span class="tag tag-success">FTS5</span><span>\u5173\u952E\u8BCD\u68C0\u7D22</span></div>
+              <div style="display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm);"><span class="tag tag-info">\u5411\u91CF</span><span>\u8BED\u4E49\u68C0\u7D22</span></div>
+              <div style="display: flex; align-items: center; gap: var(--space-sm);"><span class="tag tag-success">\u6DF7\u5408</span><span>Hybrid RAG</span></div>
+            </div>
           </div>
-          <div id="action-status" class="status-line"></div>
         </div>
-      </header>
+      </div>
+    </div>
 
-      <div class="grid" id="metrics"></div>
+    <div class="view" id="view-messages">
+      <div class="section-header">
+        <div><h1 class="section-title">\u6D88\u606F</h1><p class="page-subtitle">\u7FA4\u804A\u6D88\u606F\u5386\u53F2</p></div>
+        <div class="search-box">
+          <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <input type="text" id="message-search" placeholder="\u641C\u7D22\u6D88\u606F..." oninput="filterMessages()" />
+        </div>
+      </div>
+      <div class="content-panel glass"><div id="messages-list"></div></div>
+    </div>
 
-      <div class="layout">
-        <div>
-          <section>
-            <h2>\u6700\u8FD1\u6D88\u606F</h2>
-            <div id="messages" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
-          </section>
-          <section>
-            <h2>\u4F1A\u8BDD\u8BB0\u5FC6</h2>
-            <div id="episodes" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
-          </section>
-          <section>
-            <h2>\u95EE\u7B54\u65E5\u5FD7</h2>
-            <div id="qa-logs" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
-          </section>
+    <div class="view" id="view-episodes">
+      <div class="section-header"><div><h1 class="section-title">\u4F1A\u8BDD\u8BB0\u5FC6</h1><p class="page-subtitle">\u81EA\u52A8\u805A\u5408\u7684\u804A\u5929\u7247\u6BB5</p></div></div>
+      <div class="content-panel glass"><div id="episodes-list"></div></div>
+    </div>
+
+    <div class="view" id="view-files">
+      <div class="section-header"><div><h1 class="section-title">\u6587\u4EF6\u5E93</h1><p class="page-subtitle">\u5DF2\u5BFC\u5165\u7684\u6587\u4EF6\u77E5\u8BC6\u6E90</p></div></div>
+      <div id="files-list"></div>
+    </div>
+
+    <div class="view" id="view-tasks">
+      <div class="section-header"><div><h1 class="section-title">\u4EFB\u52A1</h1><p class="page-subtitle">\u6587\u4EF6\u89E3\u6790\u4E0E\u5B9A\u65F6\u4EFB\u52A1</p></div></div>
+      <div class="tabs" style="margin-bottom: var(--space-lg);">
+        <button class="tab active" data-tab="file-jobs" onclick="switchTab('file-jobs')">\u6587\u4EF6\u89E3\u6790</button>
+        <button class="tab" data-tab="cron-jobs" onclick="switchTab('cron-jobs')">\u5B9A\u65F6\u4EFB\u52A1</button>
+      </div>
+      <div class="content-panel glass" id="tab-file-jobs"><div id="file-jobs-list"></div></div>
+      <div class="content-panel glass" id="tab-cron-jobs" style="display: none;"><div id="cron-jobs-list"></div></div>
+    </div>
+
+    <div class="view" id="view-qa-logs">
+      <div class="section-header"><div><h1 class="section-title">\u95EE\u7B54\u65E5\u5FD7</h1><p class="page-subtitle">\u95EE\u7B54\u5386\u53F2\u8BB0\u5F55</p></div></div>
+      <div class="content-panel glass"><div id="qa-logs-list"></div></div>
+    </div>
+
+    <div class="view" id="view-settings">
+      <div class="section-header"><div><h1 class="section-title">\u8BBE\u7F6E</h1><p class="page-subtitle">\u7CFB\u7EDF\u914D\u7F6E\u4E0E\u64CD\u4F5C</p></div></div>
+      <div class="settings-group glass" id="settings-config"></div>
+      <div class="settings-group glass">
+        <h3 style="font-size: 16px; font-weight: 600; margin-bottom: var(--space-md);">\u64CD\u4F5C</h3>
+        <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
+          <button class="btn btn-primary" onclick="processNow()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+            \u7ACB\u5373\u5904\u7406\u6D88\u606F\u7D22\u5F15
+          </button>
+          <div style="font-size: 12px; color: var(--text-muted); padding: var(--space-sm); background: rgba(255,255,255,0.03); border-radius: var(--radius-sm);">
+            \u8FD0\u884C CLI \u547D\u4EE4\u8FDB\u884C\u66F4\u591A\u64CD\u4F5C\uFF1A
+            <div style="font-family: var(--font-mono); margin-top: var(--space-xs); line-height: 1.8;">
+              chattercatcher settings<br/>
+              chattercatcher doctor<br/>
+              chattercatcher index rebuild<br/>
+              chattercatcher files add &lt;path...&gt;<br/>
+              chattercatcher export
+            </div>
+          </div>
         </div>
-        <aside>
-          <section>
-            <h2>\u7FA4\u804A</h2>
-            <div id="chats" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
-          </section>
-          <section>
-            <h2>\u6587\u4EF6\u5E93</h2>
-            <div id="files" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
-          </section>
-          <section>
-            <h2>\u89E3\u6790\u4EFB\u52A1</h2>
-            <div id="file-jobs" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
-          </section>
-          <section>
-            <h2>\u5B9A\u65F6\u4EFB\u52A1</h2>
-            <div id="cron-jobs" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
-          </section>
-          <section>
-            <h2>\u672C\u5730\u64CD\u4F5C</h2>
-            <p><code>chattercatcher settings</code> \u4FEE\u6539\u914D\u7F6E\u3002</p>
-            <p><code>chattercatcher files add &lt;path...&gt;</code> \u5BFC\u5165\u6587\u672C\u3001DOCX \u6216 PDF \u6587\u4EF6\u3002</p>
-            <p><code>chattercatcher doctor</code> \u68C0\u67E5\u98DE\u4E66\u3001\u6A21\u578B\u3001RAG \u548C\u672C\u5730\u5B58\u50A8\u3002</p>
-          </section>
-        </aside>
       </div>
-    </main>
-    <script>
-      const metrics = document.querySelector("#metrics");
-      const messages = document.querySelector("#messages");
-      const episodes = document.querySelector("#episodes");
-      const chats = document.querySelector("#chats");
-      const files = document.querySelector("#files");
-      const fileJobs = document.querySelector("#file-jobs");
-      const cronJobs = document.querySelector("#cron-jobs");
-      const qaLogs = document.querySelector("#qa-logs");
-      const processMessages = document.querySelector("#process-messages");
-      const actionStatus = document.querySelector("#action-status");
+    </div>
+  </main>
 
-      let webActionToken = "__WEB_ACTION_TOKEN__";
+  <div id="toast-container" style="position: fixed; top: 24px; right: 24px; z-index: 1001; display: flex; flex-direction: column; gap: 12px;"></div>
 
-      function fmt(value) {
-        return value == null || value === "" ? "-" : String(value);
-      }
+  <script>
+    let currentView = "overview";
+    let allMessages = [];
+    let allEpisodes = [];
+    let allFiles = [];
+    let allFileJobs = [];
+    let allCronJobs = [];
+    let allQaLogs = [];
+    let statusData = null;
 
-      function escapeHtml(value) {
-        return fmt(value)
-          .replaceAll("&", "&amp;")
-          .replaceAll("<", "&lt;")
-          .replaceAll(">", "&gt;")
-          .replaceAll('"', "&quot;");
-      }
+    function fmt(value) { return value == null || value === "" ? "-" : String(value); }
+    function escapeHtml(value) {
+      return fmt(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+    }
+    function isOpaqueId(value) { return /^(ou|oc|om|cli|on|un|uid)_?[a-z0-9]+/i.test(fmt(value)); }
+    function formatDateTime(value) {
+      var date = new Date(value);
+      if (Number.isNaN(date.getTime())) return fmt(value);
+      var pad = function(n) { return String(n).padStart(2, "0"); };
+      return date.getFullYear() + "/" + pad(date.getMonth()+1) + "/" + pad(date.getDate()) + " " + pad(date.getHours()) + ":" + pad(date.getMinutes());
+    }
+    function displaySender(value) { return isOpaqueId(value) ? "\u7FA4\u6210\u5458" : fmt(value); }
+    function displayChatName(value, platform) { return !isOpaqueId(value) ? fmt(value) : (platform === "feishu" ? "\u98DE\u4E66\u7FA4\u804A" : "\u7FA4\u804A"); }
 
-      function isOpaqueId(value) {
-        return /^(ou|oc|om|cli|on|un|uid)_?[a-z0-9]+/i.test(fmt(value));
-      }
+    function showToast(message, type) {
+      type = type || "info";
+      var container = document.getElementById("toast-container");
+      var toast = document.createElement("div");
+      toast.className = "toast toast-" + type;
+      toast.textContent = message;
+      container.appendChild(toast);
+      setTimeout(function() {
+        toast.style.opacity = "0"; toast.style.transform = "translateX(10px)";
+        setTimeout(function() { toast.remove(); }, 300);
+      }, 3000);
+    }
 
-      function formatDateTime(value) {
-        const date = new Date(value);
-        if (Number.isNaN(date.getTime())) return fmt(value);
-        const pad = (input) => String(input).padStart(2, "0");
-        return [
-          date.getFullYear(),
-          pad(date.getMonth() + 1),
-          pad(date.getDate()),
-        ].join("/") + " " + [
-          pad(date.getHours()),
-          pad(date.getMinutes()),
-          pad(date.getSeconds()),
-        ].join(":");
-      }
+    function navigateTo(view) {
+      document.querySelectorAll(".view").forEach(function(el) { el.classList.remove("active"); });
+      document.querySelectorAll(".nav-item, .mobile-nav-item").forEach(function(el) { el.classList.remove("active"); });
+      document.getElementById("view-" + view).classList.add("active");
+      document.querySelectorAll('[data-view="' + view + '"]').forEach(function(el) { el.classList.add("active"); });
+      currentView = view;
+      window.scrollTo(0, 0);
+      if (view === "messages") renderMessagesView();
+      if (view === "episodes") renderEpisodesView();
+      if (view === "files") renderFilesView();
+      if (view === "tasks") renderTasksView();
+      if (view === "qa-logs") renderQaLogsView();
+    }
 
-      function displaySender(value) {
-        return isOpaqueId(value) ? "\u7FA4\u6210\u5458" : fmt(value);
-      }
+    document.querySelectorAll(".nav-item, .mobile-nav-item").forEach(function(el) {
+      el.addEventListener("click", function() { navigateTo(el.dataset.view); });
+    });
 
-      function displayChatName(value, platform) {
-        if (!isOpaqueId(value)) return fmt(value);
-        return platform === "feishu" ? "\u98DE\u4E66\u7FA4\u804A" : "\u7FA4\u804A";
-      }
+    function switchTab(tab) {
+      document.querySelectorAll(".tab").forEach(function(el) { el.classList.remove("active"); });
+      document.querySelector('[data-tab="' + tab + '"]').classList.add("active");
+      document.getElementById("tab-file-jobs").style.display = tab === "file-jobs" ? "block" : "none";
+      document.getElementById("tab-cron-jobs").style.display = tab === "cron-jobs" ? "block" : "none";
+      if (tab === "file-jobs") renderFileJobs();
+      if (tab === "cron-jobs") renderCronJobs();
+    }
 
-      function formatGatewayValue(gateway) {
-        if (gateway.connection === "running") return "\u8FD0\u884C\u4E2D";
-        if (!gateway.configured) return "\u672A\u914D\u7F6E";
-        return "\u5F85\u542F\u52A8";
+    async function fetchJson(path) {
+      var response = await fetch(path);
+      if (!response.ok) {
+        var body = await response.text();
+        throw new Error(path + " " + response.status + " " + body);
       }
+      return response.json();
+    }
 
-      function formatGatewayNote(gateway) {
-        if (gateway.connection === "running" && gateway.pid) return "PID " + gateway.pid;
-        return "\u98DE\u4E66\u957F\u8FDE\u63A5";
+    async function postJson(path, options) {
+      var response = await fetch(path, Object.assign({ method: "POST" }, options || {}));
+      var result = await response.json();
+      if (!response.ok) {
+        throw new Error(result.message || result.reason || "\u8BF7\u6C42\u5931\u8D25");
       }
+      return result;
+    }
 
-      function renderMetrics(status) {
-        const gatewayClass = status.gateway.configured ? "status-ok" : "status-warn";
-        metrics.innerHTML = [
-          ["Gateway", formatGatewayValue(status.gateway), formatGatewayNote(status.gateway), gatewayClass],
-          ["\u7248\u672C", status.version || "unknown", "\u5F53\u524D\u8FD0\u884C\u7248\u672C", ""],
-          ["\u7FA4\u804A", status.data.chats, "\u672C\u5730\u7FA4\u804A\u6570", ""],
-          ["\u6D88\u606F", status.data.messages, "\u5DF2\u5165\u5E93\u6D88\u606F", ""],
-          ["\u4F1A\u8BDD\u8BB0\u5FC6", status.data.episodes, "\u5DF2\u751F\u6210\u6458\u8981", ""],
-          ["\u6587\u4EF6", status.data.files, "\u6587\u4EF6\u77E5\u8BC6\u6E90", ""],
-        ].map(([label, value, note, extra]) => \`
-          <div class="metric">
-            <div class="label">\${escapeHtml(label)}</div>
-            <div class="value \${extra}">\${escapeHtml(value)}</div>
-            <div class="note">\${escapeHtml(note)}</div>
-          </div>
-        \`).join("");
+    async function deleteJson(path) {
+      var response = await fetch(path, { method: "DELETE" });
+      var result = await response.json();
+      if (!response.ok) {
+        throw new Error(result.message || result.reason || "\u8BF7\u6C42\u5931\u8D25");
       }
+      return result;
+    }
 
-      function renderMessages(items) {
-        if (items.length === 0) {
-          messages.className = "empty";
-          messages.textContent = "\u8FD8\u6CA1\u6709\u6D88\u606F\u3002\u542F\u52A8 Gateway \u540E\uFF0C\u7FA4\u804A\u6587\u672C\u4F1A\u8FDB\u5165\u672C\u5730 RAG \u7D22\u5F15\u3002";
-          return;
-        }
-        messages.className = "";
-        messages.innerHTML = \`
-          <div class="message-list">
-              \${items.map((item) => \`
-                <article class="message-item">
-                  <div class="message-meta">
-                    <span>\${escapeHtml(formatDateTime(item.sentAt))}</span>
-                    <span>\${escapeHtml(displaySender(item.senderName))}</span>
-                    <span>\${escapeHtml(displayChatName(item.chatName, item.platform))}</span>
-                  </div>
-                  <div class="message-body">\${escapeHtml(item.text)}</div>
-                </article>
-              \`).join("")}
-          </div>
-        \`;
-      }
+    function renderMetrics(status) {
+      var gatewayClass = status.gateway.configured ? "status-dot online" : "status-dot offline";
+      var gatewayText = status.gateway.connection === "running" ? "\u8FD0\u884C\u4E2D" : (!status.gateway.configured ? "\u672A\u914D\u7F6E" : "\u5F85\u542F\u52A8");
+      var metricsHtml = [
+        ["Gateway", gatewayText, "\u98DE\u4E66\u957F\u8FDE\u63A5", gatewayClass],
+        ["\u7248\u672C", status.version || "unknown", "\u5F53\u524D\u8FD0\u884C\u7248\u672C", ""],
+        ["\u7FA4\u804A", status.data.chats, "\u672C\u5730\u7FA4\u804A\u6570", ""],
+        ["\u6D88\u606F", status.data.messages, "\u5DF2\u5165\u5E93\u6D88\u606F", ""],
+        ["\u4F1A\u8BDD\u8BB0\u5FC6", status.data.episodes, "\u5DF2\u751F\u6210\u6458\u8981", ""],
+        ["\u6587\u4EF6", status.data.files, "\u6587\u4EF6\u77E5\u8BC6\u6E90", ""],
+        ["\u95EE\u7B54", status.data.qaLogs, "\u95EE\u7B54\u8BB0\u5F55", ""],
+        ["\u4EFB\u52A1", status.data.cronJobs, "\u5B9A\u65F6\u4EFB\u52A1", ""]
+      ].map(function(item) {
+        var label = item[0], value = item[1], note = item[2], dotClass = item[3];
+        return '<div class="metric-card glass"><div class="metric-label">' + escapeHtml(label) + '</div>' +
+          '<div class="metric-value">' + (dotClass ? '<span class="' + dotClass + '" style="margin-right:8px;"></span>' : '') + escapeHtml(value) + '</div>' +
+          '<div class="metric-note">' + escapeHtml(note) + '</div></div>';
+      }).join("");
+      document.getElementById("metrics").innerHTML = metricsHtml;
+      document.getElementById("gateway-indicator").className = gatewayClass;
+      document.getElementById("gateway-status-text").textContent = "Gateway " + gatewayText;
+      document.getElementById("version-text").textContent = "v" + (status.version || "unknown");
+    }
 
-      function renderEpisodes(items) {
-        if (items.length === 0) {
-          episodes.className = "empty";
-          episodes.textContent = "\u8FD8\u6CA1\u6709\u4F1A\u8BDD\u8BB0\u5FC6\u3002\u9ED8\u8BA4\u5728 10 \u5206\u949F\u7A97\u53E3\u9759\u9ED8 2 \u5206\u949F\u540E\u751F\u6210\uFF0C\u4E5F\u53EF\u4EE5\u8FD0\u884C chattercatcher process episodes \u624B\u52A8\u89E6\u53D1\u3002";
-          return;
-        }
-        episodes.className = "";
-        episodes.innerHTML = \`
-          <div class="message-list">
-              \${items.map((item) => \`
-                <article class="message-item">
-                  <div class="message-meta">
-                    <span>\${escapeHtml(formatDateTime(item.startedAt))} - \${escapeHtml(formatDateTime(item.endedAt))}</span>
-                    <span>\${escapeHtml(displayChatName(item.chatName, "feishu"))}</span>
-                    <span>\${escapeHtml(item.messageCount)} \u6761\u6D88\u606F</span>
-                  </div>
-                  <div class="message-body">\${escapeHtml(item.summary)}</div>
-                </article>
-              \`).join("")}
-          </div>
-        \`;
-      }
+    function renderSystemStatus(status) {
+      var gateway = status.gateway;
+      var html = '<div style="display:flex;flex-direction:column;gap:var(--space-md);">';
+      html += '<div class="settings-item"><div><div class="settings-label">Gateway</div></div><div class="settings-value">' + (gateway.connection === "running" ? '<span class="tag tag-success">\u8FD0\u884C\u4E2D</span>' : '<span class="tag tag-warning">\u672A\u8FD0\u884C</span>') + '</div></div>';
+      html += '<div class="settings-item"><div><div class="settings-label">Web UI</div></div><div class="settings-value">' + escapeHtml((status.web && status.web.host ? status.web.host : "127.0.0.1") + ":" + (status.web && status.web.port ? status.web.port : "3878")) + '</div></div>';
+      html += '<div class="settings-item"><div><div class="settings-label">RAG \u6A21\u5F0F</div></div><div class="settings-value"><span class="tag tag-success">\u5F3A\u5236\u68C0\u7D22</span></div></div>';
+      html += '<div class="settings-item"><div><div class="settings-label">\u5173\u952E\u8BCD\u68C0\u7D22</div></div><div class="settings-value">SQLite FTS5</div></div>';
+      html += '<div class="settings-item"><div><div class="settings-label">\u5411\u91CF\u68C0\u7D22</div></div><div class="settings-value">SQLite embedding</div></div>';
+      html += '</div>';
+      document.getElementById("system-status").innerHTML = html;
+    }
 
-      function renderChats(items) {
-        if (items.length === 0) {
-          chats.className = "empty";
-          chats.textContent = "\u8FD8\u6CA1\u6709\u7FA4\u804A\u8BB0\u5F55\u3002";
-          return;
-        }
-        chats.className = "";
-        chats.innerHTML = \`
-          <table>
-            <thead><tr><th>\u540D\u79F0</th><th>\u5E73\u53F0</th></tr></thead>
-            <tbody>
-              \${items.map((item) => \`
-                <tr>
-                  <td><span class="id-text" title="\${escapeHtml(item.name)}">\${escapeHtml(displayChatName(item.name, item.platform))}</span></td>
-                  <td>\${escapeHtml(item.platform)}</td>
-                </tr>
-              \`).join("")}
-            </tbody>
-          </table>
-        \`;
+    function renderRecentMessages(items) {
+      var el = document.getElementById("recent-messages");
+      if (!items || items.length === 0) {
+        el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u6D88\u606F\u3002\u542F\u52A8 Gateway \u540E\uFF0C\u7FA4\u804A\u6587\u672C\u4F1A\u8FDB\u5165\u672C\u5730 RAG \u7D22\u5F15\u3002</div>';
+        return;
       }
-
-      function renderFiles(items) {
-        if (items.length === 0) {
-          files.className = "empty";
-          files.textContent = "\u8FD8\u6CA1\u6709\u6587\u4EF6\u3002\u53EF\u5148\u8FD0\u884C chattercatcher files add <path...> \u5BFC\u5165\u6587\u672C\u3001DOCX \u6216 PDF \u6587\u4EF6\u3002";
-          return;
-        }
-        files.className = "";
-        files.innerHTML = \`
-          <table>
-            <thead><tr><th>\u6587\u4EF6</th><th>\u89E3\u6790\u5668</th><th>\u5B57\u7B26</th></tr></thead>
-            <tbody>
-              \${items.map((item) => \`
-                <tr>
-                  <td>
-                    <div>\${escapeHtml(item.fileName)}</div>
-                    <div class="path" title="\${escapeHtml(item.storedPath)}">\${escapeHtml(item.storedPath)}</div>
-                  </td>
-                  <td>\${escapeHtml(item.parser || "unknown")}</td>
-                  <td>\${escapeHtml(item.characters)}</td>
-                </tr>
-              \`).join("")}
-            </tbody>
-          </table>
-        \`;
+      var html = '<div class="message-list">';
+      for (var i = 0; i < Math.min(items.length, 5); i++) {
+        var item = items[i];
+        html += '<div class="message-card"><div class="message-meta">' +
+          '<span>' + escapeHtml(formatDateTime(item.sentAt)) + '</span>' +
+          '<span>' + escapeHtml(displaySender(item.senderName)) + '</span>' +
+          '<span>' + escapeHtml(displayChatName(item.chatName, item.platform)) + '</span>' +
+          '</div><div class="message-text">' + escapeHtml(item.text) + '</div></div>';
       }
+      html += '</div>';
+      el.innerHTML = html;
+    }
 
-      function renderFileJobs(items) {
-        if (items.length === 0) {
-          fileJobs.className = "empty";
-          fileJobs.textContent = "\u8FD8\u6CA1\u6709\u6587\u4EF6\u89E3\u6790\u4EFB\u52A1\u3002";
-          return;
-        }
-        fileJobs.className = "";
-        fileJobs.innerHTML = \`
-          <table>
-            <thead><tr><th>\u4EFB\u52A1</th><th>\u72B6\u6001</th></tr></thead>
-            <tbody>
-              \${items.map((item) => \`
-                <tr>
-                  <td>
-                    <div>\${escapeHtml(item.fileName)}</div>
-                    <div class="path" title="\${escapeHtml(item.id)}">ID: \${escapeHtml(item.id)}</div>
-                    <div class="path" title="\${escapeHtml(item.error || item.storedPath)}">\${escapeHtml(item.error || item.storedPath)}</div>
-                  </td>
-                  <td>\${escapeHtml(item.status)}</td>
-                </tr>
-              \`).join("")}
-            </tbody>
-          </table>
-        \`;
+    function renderRecentEpisodes(items) {
+      var el = document.getElementById("recent-episodes");
+      if (!items || items.length === 0) {
+        el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u4F1A\u8BDD\u8BB0\u5FC6\u3002</div>';
+        return;
+      }
+      var html = '<div class="message-list">';
+      for (var i = 0; i < Math.min(items.length, 3); i++) {
+        var item = items[i];
+        html += '<div class="episode-card"><div class="message-meta">' +
+          '<span>' + escapeHtml(formatDateTime(item.startedAt)) + " - " + escapeHtml(formatDateTime(item.endedAt)) + '</span>' +
+          '<span>' + escapeHtml(item.messageCount) + ' \u6761\u6D88\u606F</span>' +
+          '</div><div class="message-text">' + escapeHtml(item.summary) + '</div></div>';
       }
+      html += '</div>';
+      el.innerHTML = html;
+    }
 
-      function renderCronJobs(items) {
-        if (items.length === 0) {
-          cronJobs.className = "empty";
-          cronJobs.textContent = "\u8FD8\u6CA1\u6709\u5B9A\u65F6\u4EFB\u52A1\u3002\u53EF\u5728\u98DE\u4E66\u7FA4\u91CC @ \u673A\u5668\u4EBA\u521B\u5EFA\u3002";
-          return;
-        }
-        cronJobs.className = "";
-        cronJobs.innerHTML = \`
-          <table>
-            <thead><tr><th>\u4EFB\u52A1</th><th>\u72B6\u6001</th></tr></thead>
-            <tbody>
-              \${items.map((item) => \`
-                <tr>
-                  <td>
-                    <div>\${escapeHtml(item.schedule)}</div>
-                    <div class="message" title="\${escapeHtml(item.prompt)}">\${escapeHtml(item.prompt)}</div>
-                    <div class="path" title="\${escapeHtml(item.id)}">ID: \${escapeHtml(item.id)}</div>
-                    <div class="path" title="\${escapeHtml(item.chatId)}">\u7FA4: \${escapeHtml(item.chatId)}</div>
-                    <div class="path">\u4E0B\u6B21: \${escapeHtml(formatDateTime(item.nextRunAt))}</div>
-                    <div class="path" title="\${escapeHtml(item.lastError || "")}">\${escapeHtml(item.lastError || "")}</div>
-                    \${item.status === "active" ? \`<button type="button" data-delete-cron-job="\${escapeHtml(item.id)}">\u5220\u9664</button>\` : ""}
-                  </td>
-                  <td>\${escapeHtml(item.status)}</td>
-                </tr>
-              \`).join("")}
-            </tbody>
-          </table>
-        \`;
+    function renderMessagesView() {
+      var el = document.getElementById("messages-list");
+      if (!allMessages || allMessages.length === 0) {
+        el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u6D88\u606F\u3002</div>';
+        return;
       }
+      var searchInput = document.getElementById("message-search");
+      var searchTerm = searchInput ? searchInput.value.toLowerCase() : "";
+      var filtered = searchTerm ? allMessages.filter(function(m) { return (m.text || "").toLowerCase().indexOf(searchTerm) !== -1; }) : allMessages;
+      if (filtered.length === 0) {
+        el.innerHTML = '<div class="empty-state">\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u6D88\u606F\u3002</div>';
+        return;
+      }
+      var html = '<div class="message-list">';
+      for (var i = 0; i < Math.min(filtered.length, 50); i++) {
+        var item = filtered[i];
+        html += '<div class="message-card"><div class="message-meta">' +
+          '<span>' + escapeHtml(formatDateTime(item.sentAt)) + '</span>' +
+          '<span>' + escapeHtml(displaySender(item.senderName)) + '</span>' +
+          '<span>' + escapeHtml(displayChatName(item.chatName, item.platform)) + '</span>' +
+          '</div><div class="message-text" style="-webkit-line-clamp:4;">' + escapeHtml(item.text) + '</div></div>';
+      }
+      html += '</div>';
+      if (filtered.length > 50) {
+        html += '<div style="text-align:center;padding:var(--space-md);color:var(--text-muted);font-size:13px;">\u8FD8\u6709 ' + (filtered.length - 50) + ' \u6761\u6D88\u606F...</div>';
+      }
+      el.innerHTML = html;
+    }
 
-      function renderQaLogs(items) {
-        if (items.length === 0) {
-          qaLogs.className = "empty";
-          qaLogs.textContent = "\u8FD8\u6CA1\u6709\u95EE\u7B54\u65E5\u5FD7\u3002";
-          return;
-        }
-        qaLogs.className = "";
-        const rows = items.map((item) => {
-          const citationCount = Array.isArray(item.citations) ? item.citations.length : 0;
-          return [
-            '<article class="message-item">',
-            '  <div class="message-meta">',
-            "    <span>" + escapeHtml(formatDateTime(item.createdAt)) + "</span>",
-            "    <span>" + escapeHtml(item.status) + "</span>",
-            "    <span>" + escapeHtml(citationCount) + " \u6761\u5F15\u7528</span>",
-            "  </div>",
-            "  <div class=\\"message-body\\"><strong>\u95EE\uFF1A</strong>" + escapeHtml(item.question) + "</div>",
-            "  <div class=\\"message-body\\"><strong>\u7B54\uFF1A</strong>" + escapeHtml(item.answer) + "</div>",
-            "</article>",
-          ].join("\\n");
-        });
-        qaLogs.innerHTML = [
-          '<div class="message-list">',
-          rows.join(""),
-          "</div>",
-        ].join("\\n");
+    function filterMessages() { renderMessagesView(); }
+
+    function renderEpisodesView() {
+      var el = document.getElementById("episodes-list");
+      if (!allEpisodes || allEpisodes.length === 0) {
+        el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u4F1A\u8BDD\u8BB0\u5FC6\u3002</div>';
+        return;
+      }
+      var html = '<div class="timeline">';
+      for (var i = 0; i < allEpisodes.length; i++) {
+        var item = allEpisodes[i];
+        html += '<div class="timeline-item"><div class="timeline-date">' + escapeHtml(formatDateTime(item.startedAt)) + " - " + escapeHtml(formatDateTime(item.endedAt)) + " \xB7 " + escapeHtml(item.messageCount) + ' \u6761\u6D88\u606F</div><div class="timeline-content">' + escapeHtml(item.summary) + '</div></div>';
       }
+      html += '</div>';
+      el.innerHTML = html;
+    }
 
-      async function fetchJson(path) {
-        const response = await fetch(path);
-        if (!response.ok) {
-          const body = await response.text();
-          throw new Error(path + " " + response.status + " " + body);
-        }
-        return response.json();
+    function renderFilesView() {
+      var el = document.getElementById("files-list");
+      if (!allFiles || allFiles.length === 0) {
+        el.innerHTML = '<div class="content-panel glass"><div class="empty-state">\u8FD8\u6CA1\u6709\u6587\u4EF6\u3002\u8FD0\u884C <code>chattercatcher files add &lt;path...&gt;</code> \u5BFC\u5165\u6587\u4EF6\u3002</div></div>';
+        return;
       }
+      var html = '<div class="grid-2">';
+      for (var i = 0; i < allFiles.length; i++) {
+        var item = allFiles[i];
+        html += '<div class="file-card glass"><div class="file-icon">' +
+          '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>' +
+          '</div><div style="font-weight:600;margin-bottom:4px;">' + escapeHtml(item.fileName) + '</div>' +
+          '<div style="font-size:13px;color:var(--text-muted);margin-bottom:4px;" class="truncate">' + escapeHtml(item.storedPath) + '</div>' +
+          '<div style="display:flex;gap:var(--space-sm);"><span class="tag">' + escapeHtml(item.parser || "unknown") + '</span><span class="tag">' + escapeHtml(item.characters) + ' \u5B57\u7B26</span></div></div>';
+      }
+      html += '</div>';
+      el.innerHTML = html;
+    }
+
+    function renderTasksView() {
+      var activeTab = document.querySelector(".tab.active");
+      var tab = activeTab ? activeTab.dataset.tab : "file-jobs";
+      if (tab === "file-jobs") renderFileJobs();
+      else renderCronJobs();
+    }
 
-      function renderLoadError(element, error) {
-        element.className = "empty";
-        element.textContent = "\u52A0\u8F7D\u5931\u8D25\uFF1A" + (error instanceof Error ? error.message : String(error));
+    function renderFileJobs() {
+      var el = document.getElementById("file-jobs-list");
+      if (!allFileJobs || allFileJobs.length === 0) {
+        el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u6587\u4EF6\u89E3\u6790\u4EFB\u52A1\u3002</div>';
+        return;
+      }
+      var html = '<table class="data-table"><thead><tr><th>\u6587\u4EF6</th><th>\u72B6\u6001</th><th>\u4FE1\u606F</th></tr></thead><tbody>';
+      for (var i = 0; i < allFileJobs.length; i++) {
+        var item = allFileJobs[i];
+        var tagClass = item.status === 'indexed' ? 'tag-success' : item.status === 'failed' ? 'tag-error' : 'tag-warning';
+        html += '<tr><td><div style="font-weight:500;">' + escapeHtml(item.fileName) + '</div><div style="font-size:12px;color:var(--text-muted);" class="truncate">' + escapeHtml(item.storedPath || item.id) + '</div></td>' +
+          '<td><span class="tag ' + tagClass + '">' + escapeHtml(item.status) + '</span></td>' +
+          '<td style="font-size:13px;color:var(--text-muted);">' + escapeHtml(item.error || "") + '</td></tr>';
       }
+      html += '</tbody></table>';
+      el.innerHTML = html;
+    }
 
-      async function loadSection(path, element, render) {
-        try {
-          render(await fetchJson(path));
-        } catch (error) {
-          renderLoadError(element, error);
-        }
+    function renderCronJobs() {
+      var el = document.getElementById("cron-jobs-list");
+      if (!allCronJobs || allCronJobs.length === 0) {
+        el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u5B9A\u65F6\u4EFB\u52A1\u3002</div>';
+        return;
       }
+      var html = '<table class="data-table"><thead><tr><th>\u4EFB\u52A1</th><th>\u72B6\u6001</th><th>\u64CD\u4F5C</th></tr></thead><tbody>';
+      for (var i = 0; i < allCronJobs.length; i++) {
+        var item = allCronJobs[i];
+        var tagClass = item.status === 'active' ? 'tag-success' : 'tag-warning';
+        html += '<tr><td><div style="font-weight:500;">' + escapeHtml(item.schedule) + '</div>' +
+          '<div style="font-size:13px;color:var(--text-muted);" class="truncate-2">' + escapeHtml(item.prompt) + '</div>' +
+          '<div style="font-size:12px;color:var(--text-muted);">\u4E0B\u6B21: ' + escapeHtml(formatDateTime(item.nextRunAt)) + '</div>' +
+          (item.lastError ? '<div style="font-size:12px;color:var(--danger);margin-top:4px;">' + escapeHtml(item.lastError) + '</div>' : '') +
+          '</td><td><span class="tag ' + tagClass + '">' + escapeHtml(item.status) + '</span></td><td>' +
+          (item.status === "active" ? '<button class="btn btn-sm btn-danger" data-delete-cron-job="' + escapeHtml(item.id) + '">\u5220\u9664</button>' : '-') +
+          '</td></tr>';
+      }
+      html += '</tbody></table>';
+      el.innerHTML = html;
+    }
 
-      async function load() {
-        await Promise.all([
-          loadSection("/api/status", metrics, renderMetrics),
-          loadSection("/api/messages/recent?limit=20", messages, (data) => renderMessages(data.items)),
-          loadSection("/api/episodes?limit=10", episodes, (data) => renderEpisodes(data.items)),
-          loadSection("/api/chats", chats, (data) => renderChats(data.items)),
-          loadSection("/api/files", files, (data) => renderFiles(data.items)),
-          loadSection("/api/file-jobs", fileJobs, (data) => renderFileJobs(data.items)),
-          loadSection("/api/qa-logs?limit=10", qaLogs, (data) => renderQaLogs(data.items)),
-          loadSection("/api/cron-jobs", cronJobs, (data) => renderCronJobs(data.items)),
-        ]);
+    function renderQaLogsView() {
+      var el = document.getElementById("qa-logs-list");
+      if (!allQaLogs || allQaLogs.length === 0) {
+        el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u95EE\u7B54\u65E5\u5FD7\u3002</div>';
+        return;
+      }
+      var html = '';
+      for (var i = 0; i < allQaLogs.length; i++) {
+        var item = allQaLogs[i];
+        var citationCount = Array.isArray(item.citations) ? item.citations.length : 0;
+        var statusClass = item.status === 'success' ? 'tag-success' : 'tag-warning';
+        html += '<div class="qa-card"><div class="message-meta" style="margin-bottom:var(--space-sm);">' +
+          '<span>' + escapeHtml(formatDateTime(item.createdAt)) + '</span>' +
+          '<span class="tag ' + statusClass + '">' + escapeHtml(item.status) + '</span>' +
+          '<span>' + citationCount + ' \u6761\u5F15\u7528</span></div>' +
+          '<div class="qa-question">' + escapeHtml(item.question) + '</div>' +
+          '<div class="qa-answer">' + escapeHtml(item.answer) + '</div></div>';
       }
+      el.innerHTML = html;
+    }
 
-      async function processNow() {
-        processMessages.disabled = true;
-        actionStatus.textContent = "\u6B63\u5728\u5904\u7406\u6D88\u606F\u7D22\u5F15...";
-        try {
-          const response = await fetch("/api/process/messages", {
-            method: "POST",
-            headers: { "x-chattercatcher-web-token": webActionToken },
-          });
-          const result = await response.json();
-          if (!response.ok) {
-            actionStatus.textContent = result.message || "\u5904\u7406\u5931\u8D25\u3002";
-            return;
-          }
+    function renderSettings(status) {
+      var el = document.getElementById("settings-config");
+      var html = '<h3 style="font-size:16px;font-weight:600;margin-bottom:var(--space-md);">\u7CFB\u7EDF\u914D\u7F6E</h3>';
+      html += '<div style="display:flex;flex-direction:column;">';
+      html += '<div class="settings-item"><div><div class="settings-label">Web UI</div><div class="settings-desc">' + escapeHtml((status.web && status.web.host ? status.web.host : "127.0.0.1") + ":" + (status.web && status.web.port ? status.web.port : "3878")) + '</div></div></div>';
+      html += '<div class="settings-item"><div><div class="settings-label">Gateway</div><div class="settings-desc">' + (status.gateway.configured ? "\u5DF2\u914D\u7F6E" : "\u672A\u914D\u7F6E") + '</div></div></div>';
+      html += '<div class="settings-item"><div><div class="settings-label">RAG \u6A21\u5F0F</div><div class="settings-desc">\u5F3A\u5236\u5148\u68C0\u7D22\u8BC1\u636E\uFF0C\u7981\u6B62\u5168\u91CF\u4E0A\u4E0B\u6587\u5806\u53E0</div></div></div>';
+      html += '<div class="settings-item"><div><div class="settings-label">\u6570\u636E\u76EE\u5F55</div><div class="settings-desc">SQLite + \u672C\u5730\u6587\u4EF6</div></div></div>';
+      html += '</div>';
+      el.innerHTML = html;
+    }
 
-          if (result.status === "skipped") {
-            actionStatus.textContent = result.reason;
-          } else {
-            actionStatus.textContent = \`\u5904\u7406\u5B8C\u6210\uFF1Achunks=\${result.chunks}, vectors=\${result.vectors}\`;
-          }
-          await load();
-        } catch (error) {
-          actionStatus.textContent = error instanceof Error ? error.message : String(error);
-        } finally {
-          processMessages.disabled = false;
-        }
-      }
+    async function loadSection(path, setter) {
+      try { setter(await fetchJson(path)); }
+      catch (error) { console.error("\u52A0\u8F7D\u5931\u8D25:", path, error); }
+    }
 
-      document.addEventListener("click", async (event) => {
-        const target = event.target;
-        if (!(target instanceof HTMLElement)) return;
-        const id = target.dataset.deleteCronJob;
-        if (!id) return;
-        target.setAttribute("disabled", "disabled");
-        actionStatus.textContent = "\u6B63\u5728\u5220\u9664\u5B9A\u65F6\u4EFB\u52A1...";
-        try {
-          const response = await fetch(\`/api/cron-jobs/\${encodeURIComponent(id)}\`, {
-            method: "DELETE",
-            headers: { "x-chattercatcher-web-token": webActionToken },
-          });
-          const result = await response.json();
-          actionStatus.textContent = result.ok ? "\u5B9A\u65F6\u4EFB\u52A1\u5DF2\u5220\u9664\u3002" : result.message || "\u5220\u9664\u5931\u8D25\u3002";
-          await load();
-        } catch (error) {
-          actionStatus.textContent = error instanceof Error ? error.message : String(error);
-        } finally {
-          target.removeAttribute("disabled");
-        }
+    async function load() {
+      await loadSection("/api/status", function(data) {
+        statusData = data;
+        renderMetrics(data);
+        renderSystemStatus(data);
+        renderSettings(data);
       });
+      await loadSection("/api/messages/recent?limit=50", function(data) { allMessages = data.items || []; renderRecentMessages(allMessages); });
+      await loadSection("/api/episodes?limit=20", function(data) { allEpisodes = data.items || []; renderRecentEpisodes(allEpisodes); });
+      await loadSection("/api/files", function(data) { allFiles = data.items || []; });
+      await loadSection("/api/file-jobs", function(data) { allFileJobs = data.items || []; });
+      await loadSection("/api/qa-logs?limit=20", function(data) { allQaLogs = data.items || []; });
+      await loadSection("/api/cron-jobs", function(data) { allCronJobs = data.items || []; });
+      if (currentView === "messages") renderMessagesView();
+      if (currentView === "episodes") renderEpisodesView();
+      if (currentView === "files") renderFilesView();
+      if (currentView === "tasks") renderTasksView();
+      if (currentView === "qa-logs") renderQaLogsView();
+    }
 
-      processMessages.addEventListener("click", () => void processNow());
-      void load();
-      setInterval(() => {
-        if (document.visibilityState === "visible") {
-          void load();
-        }
-      }, 5000);
-    </script>
-  </body>
+    async function processNow() {
+      var btn = document.getElementById("btn-process-messages");
+      if (btn) { btn.disabled = true; }
+      showToast("\u6B63\u5728\u5904\u7406\u6D88\u606F\u7D22\u5F15...", "info");
+      try {
+        var result = await postJson("/api/process/messages");
+        if (result.status === "skipped") { showToast(result.reason, "warning"); }
+        else { showToast("\u5904\u7406\u5B8C\u6210\uFF1Achunks=" + result.chunks + ", vectors=" + result.vectors, "success"); }
+        await load();
+      } catch (error) {
+        showToast(error instanceof Error ? error.message : String(error), "error");
+      } finally {
+        if (btn) { btn.disabled = false; }
+      }
+    }
+
+    document.addEventListener("click", async function(event) {
+      var target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      var id = target.dataset.deleteCronJob;
+      if (!id) return;
+      target.disabled = true;
+      showToast("\u6B63\u5728\u5220\u9664\u5B9A\u65F6\u4EFB\u52A1...", "info");
+      try {
+        var result = await deleteJson("/api/cron-jobs/" + encodeURIComponent(id));
+        showToast(result.ok ? "\u5B9A\u65F6\u4EFB\u52A1\u5DF2\u5220\u9664" : (result.message || "\u5220\u9664\u5931\u8D25"), result.ok ? "success" : "error");
+        await load();
+      } catch (error) {
+        showToast(error instanceof Error ? error.message : String(error), "error");
+      }
+    });
+
+    void load();
+    setInterval(function() { if (document.visibilityState === "visible") void load(); }, 5000);
+  </script>
+</body>
 </html>`;
 }
 function parseLimit(value, fallback, max) {
@@ -5823,12 +6382,22 @@ function parseLimit(value, fallback, max) {
 function getWebActionToken(secrets) {
   return secrets.web.actionToken;
 }
-function readHeader(value) {
-  return Array.isArray(value) ? value[0] : value;
+function getWebActionCookie(token) {
+  return `chattercatcher_web_token=${encodeURIComponent(token)}; Path=/; HttpOnly; SameSite=Strict`;
+}
+function parseCookies(header) {
+  const value = Array.isArray(header) ? header.join("; ") : header;
+  if (!value) return {};
+  const cookies = {};
+  for (const part of value.split(";")) {
+    const [rawName, ...rawValue] = part.trim().split("=");
+    if (!rawName || rawValue.length === 0) continue;
+    cookies[rawName] = decodeURIComponent(rawValue.join("="));
+  }
+  return cookies;
 }
 function isAuthorizedWebAction(request, token) {
-  const provided = readHeader(request.headers["x-chattercatcher-web-token"]);
-  return provided === token;
+  return parseCookies(request.headers.cookie).chattercatcher_web_token === token;
 }
 function createWebApp(config, options = {}) {
   const app = Fastify({ logger: false });
@@ -5956,7 +6525,8 @@ function createWebApp(config, options = {}) {
   app.get("/", async (_request, reply) => {
     await tokenReady;
     reply.type("text/html; charset=utf-8");
-    return buildHtml().replaceAll("__WEB_ACTION_TOKEN__", webActionToken);
+    reply.header("set-cookie", getWebActionCookie(webActionToken));
+    return buildHtml();
   });
   return app;
 }