chattercatcher 0.2.4 → 0.2.6

package/dist/index.js

@@ -995,6 +995,7 @@ function migrateDatabase(database) {
       answer TEXT NOT NULL,
       citations_json TEXT NOT NULL,
       retrieval_debug_json TEXT NOT NULL,
+      trace_json TEXT NOT NULL DEFAULT '{}',
       status TEXT NOT NULL CHECK(status IN ('answered','failed')),
       error TEXT,
       created_at TEXT NOT NULL
@@ -1089,6 +1090,10 @@ function migrateDatabase(database) {
   ensureCronJobColumn("mention_target_name", "mention_target_name TEXT");
   ensureCronJobColumn("mention_open_id", "mention_open_id TEXT");
   ensureCronJobColumn("mention_user_id", "mention_user_id TEXT");
+  const qaLogColumns = database.prepare("PRAGMA table_info(qa_logs)").all();
+  if (!qaLogColumns.some((column) => column.name === "trace_json")) {
+    database.prepare("ALTER TABLE qa_logs ADD COLUMN trace_json TEXT NOT NULL DEFAULT '{}'").run();
+  }
 }
 
 // src/doctor/checks.ts
@@ -3893,10 +3898,22 @@ function createFeishuChatMembersClient(client) {
 
 // src/rag/qa-logs.ts
 import crypto6 from "crypto";
+
+// src/rag/qa-trace.ts
+function hasQaTrace(trace) {
+  return Object.keys(trace).length > 0;
+}
+
+// src/rag/qa-logs.ts
 function clampLimit(limit) {
   return Math.max(1, Math.min(200, Math.trunc(limit)));
 }
+function parseTrace(value) {
+  const parsed = JSON.parse(value);
+  return parsed && typeof parsed === "object" ? parsed : {};
+}
 function mapQaLogRow(row) {
+  const trace = parseTrace(row.trace_json);
   return {
     id: row.id,
     chatId: row.chat_id,
@@ -3905,6 +3922,8 @@ function mapQaLogRow(row) {
     answer: row.answer,
     citations: JSON.parse(row.citations_json),
     retrievalDebug: JSON.parse(row.retrieval_debug_json),
+    trace,
+    hasTrace: hasQaTrace(trace),
     status: row.status,
     error: row.error,
     createdAt: row.created_at
@@ -3916,6 +3935,7 @@ var QaLogRepository = class {
   }
   database;
   create(input) {
+    const trace = input.trace ?? {};
     const record = {
       id: `qa_${crypto6.randomUUID()}`,
       chatId: input.chatId ?? null,
@@ -3924,6 +3944,8 @@ var QaLogRepository = class {
       answer: input.answer,
       citations: input.citations,
       retrievalDebug: input.retrievalDebug,
+      trace,
+      hasTrace: hasQaTrace(trace),
       status: input.status,
       error: input.error ?? null,
       createdAt: input.createdAt
@@ -3938,6 +3960,7 @@ var QaLogRepository = class {
             answer,
             citations_json,
             retrieval_debug_json,
+            trace_json,
             status,
             error,
             created_at
@@ -3950,6 +3973,7 @@ var QaLogRepository = class {
             @answer,
             @citationsJson,
             @retrievalDebugJson,
+            @traceJson,
             @status,
             @error,
             @createdAt
@@ -3963,6 +3987,7 @@ var QaLogRepository = class {
       answer: record.answer,
       citationsJson: JSON.stringify(record.citations),
       retrievalDebugJson: JSON.stringify(record.retrievalDebug),
+      traceJson: JSON.stringify(record.trace),
       status: record.status,
       error: record.error,
       createdAt: record.createdAt
@@ -3980,6 +4005,7 @@ var QaLogRepository = class {
             answer,
             citations_json,
             retrieval_debug_json,
+            trace_json,
             status,
             error,
             created_at
@@ -4001,6 +4027,7 @@ var QaLogRepository = class {
             answer,
             citations_json,
             retrieval_debug_json,
+            trace_json,
             status,
             error,
             created_at
@@ -4012,6 +4039,27 @@ var QaLogRepository = class {
     ).all(chatId, clampLimit(limit));
     return rows.map(mapQaLogRow);
   }
+  getById(id) {
+    const row = this.database.prepare(
+      `
+          SELECT
+            id,
+            chat_id,
+            question_message_id,
+            question,
+            answer,
+            citations_json,
+            retrieval_debug_json,
+            trace_json,
+            status,
+            error,
+            created_at
+          FROM qa_logs
+          WHERE id = ?
+        `
+    ).get(id);
+    return row ? mapQaLogRow(row) : null;
+  }
   getCount() {
     const row = this.database.prepare("SELECT COUNT(*) AS count FROM qa_logs").get();
     return row.count;
@@ -4069,6 +4117,18 @@ ${block.text}`;
 function toToolErrorContent(message) {
   return JSON.stringify({ ok: false, error: message });
 }
+function nowIso5() {
+  return (/* @__PURE__ */ new Date()).toISOString();
+}
+function finalizeTrace(trace, status, finalAnswer, startedAtMs) {
+  return {
+    ...trace,
+    completedAt: nowIso5(),
+    durationMs: Date.now() - startedAtMs,
+    status,
+    finalAnswer
+  };
+}
 async function executeFeishuTool(tool, input) {
   const result = await tool.execute(input);
   if (isEvidenceBlockArray(result)) {
@@ -4080,6 +4140,13 @@ async function runFeishuToolLoop(input) {
   if (!input.model.completeWithTools) {
     throw new Error("\u5F53\u524D LLM \u5BA2\u6237\u7AEF\u4E0D\u652F\u6301\u5DE5\u5177\u8C03\u7528\u3002");
   }
+  const startedAtMs = Date.now();
+  const trace = {
+    startedAt: new Date(startedAtMs).toISOString(),
+    modelTurns: [],
+    toolResults: [],
+    fallbacks: []
+  };
   const maxModelTurns = input.maxModelTurns ?? DEFAULT_MAX_MODEL_TURNS;
   const maxToolCalls = input.maxToolCalls ?? DEFAULT_MAX_TOOL_CALLS;
   const systemPromptParts = [FEISHU_TOOL_SYSTEM_PROMPT];
@@ -4108,19 +4175,36 @@ async function runFeishuToolLoop(input) {
       toolCalls: assistantResult.toolCalls,
       reasoningContent: assistantResult.reasoningContent
     });
+    trace.modelTurns?.push({
+      index: turn,
+      content: assistantResult.content,
+      reasoningContent: assistantResult.reasoningContent,
+      toolCalls: assistantResult.toolCalls,
+      createdAt: nowIso5()
+    });
     if (assistantResult.toolCalls.length === 0) {
       if (hasRawToolCallMarkup) {
+        trace.fallbacks?.push({ type: "raw_tool_markup", message: "\u6A21\u578B\u8F93\u51FA\u4E86\u539F\u59CB\u5DE5\u5177\u8C03\u7528\u6807\u8BB0\uFF0C\u8F6C\u5165\u6700\u7EC8\u8865\u6551\u56DE\u7B54\u3002", createdAt: nowIso5() });
         break;
       }
-      return assistantResult.content || FEISHU_TOOL_LOOP_FALLBACK;
+      const answer = assistantResult.content || FEISHU_TOOL_LOOP_FALLBACK;
+      return { answer, trace: finalizeTrace(trace, "answered", answer, startedAtMs) };
     }
     for (const toolCall of assistantResult.toolCalls) {
       if (toolCallsUsed >= maxToolCalls) {
-        return FEISHU_TOOL_LOOP_LIMIT_REACHED;
+        trace.fallbacks?.push({ type: "tool_limit", message: FEISHU_TOOL_LOOP_LIMIT_REACHED, createdAt: nowIso5() });
+        return { answer: FEISHU_TOOL_LOOP_LIMIT_REACHED, trace: finalizeTrace(trace, "failed", FEISHU_TOOL_LOOP_LIMIT_REACHED, startedAtMs) };
       }
       toolCallsUsed += 1;
       const tool = toolsByName.get(toolCall.name);
       if (!tool) {
+        trace.toolResults?.push({
+          toolCallId: toolCall.id,
+          name: toolCall.name,
+          input: toolCall.input,
+          error: `\u672A\u77E5\u5DE5\u5177\uFF1A${toolCall.name}`,
+          createdAt: nowIso5()
+        });
         messages.push({
           role: "tool",
           toolCallId: toolCall.id,
@@ -4130,6 +4214,13 @@ async function runFeishuToolLoop(input) {
       }
       try {
         const result = await executeFeishuTool(tool, toolCall.input);
+        trace.toolResults?.push({
+          toolCallId: toolCall.id,
+          name: toolCall.name,
+          input: toolCall.input,
+          content: result,
+          createdAt: nowIso5()
+        });
         messages.push({
           role: "tool",
           toolCallId: toolCall.id,
@@ -4137,6 +4228,13 @@ async function runFeishuToolLoop(input) {
         });
       } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
+        trace.toolResults?.push({
+          toolCallId: toolCall.id,
+          name: toolCall.name,
+          input: toolCall.input,
+          error: message,
+          createdAt: nowIso5()
+        });
         messages.push({
           role: "tool",
           toolCallId: toolCall.id,
@@ -4150,9 +4248,13 @@ async function runFeishuToolLoop(input) {
       ...messages,
       { role: "system", content: "\u8BF7\u57FA\u4E8E\u4EE5\u4E0A\u6240\u6709\u5DE5\u5177\u8FD4\u56DE\u7684\u4FE1\u606F\uFF0C\u76F4\u63A5\u7ED9\u51FA\u6700\u7EC8\u7B54\u6848\u3002\u4E0D\u8981\u518D\u8C03\u7528\u5DE5\u5177\u3002" }
     ]);
-    return salvageAnswer || "\u62B1\u6B49\uFF0C\u56DE\u7B54\u751F\u6210\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002";
+    const answer = salvageAnswer || "\u62B1\u6B49\uFF0C\u56DE\u7B54\u751F\u6210\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002";
+    trace.fallbacks?.push({ type: "salvage_completion", message: "\u5DE5\u5177\u5FAA\u73AF\u7ED3\u675F\u540E\u4F7F\u7528\u65E0\u5DE5\u5177\u8865\u6551\u56DE\u7B54\u3002", createdAt: nowIso5() });
+    return { answer, trace: finalizeTrace(trace, "answered", answer, startedAtMs) };
   } catch {
-    return "\u62B1\u6B49\uFF0C\u56DE\u7B54\u751F\u6210\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002";
+    const answer = "\u62B1\u6B49\uFF0C\u56DE\u7B54\u751F\u6210\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002";
+    trace.fallbacks?.push({ type: "answer_generation_failed", message: answer, createdAt: nowIso5() });
+    return { answer, trace: finalizeTrace(trace, "failed", answer, startedAtMs) };
   }
 }
 function formatConversationContext(records) {
@@ -4272,7 +4374,7 @@ var FeishuQuestionHandler = class {
         const memberRepository = this.options.memberRepository ?? new FeishuMemberRepository(this.options.database);
         const memberPrompt = formatFeishuMemberPrompt(memberRepository.listByChat(decision.chatId));
         const conversationContext = formatConversationContext(qaLogs.listRecentByChat(decision.chatId, 6));
-        const answer = await runFeishuToolLoop({
+        const result = await runFeishuToolLoop({
           question: decision.question,
           now,
           tools: allTools,
@@ -4284,27 +4386,38 @@ var FeishuQuestionHandler = class {
           chatId: decision.chatId,
           questionMessageId,
           question: decision.question,
-          answer,
+          answer: result.answer,
           citations: [],
           retrievalDebug: {},
+          trace: result.trace,
           status: "answered",
           createdAt: (/* @__PURE__ */ new Date()).toISOString()
         });
-        await this.sendResponse(decision.chatId, questionMessageId, answer);
+        await this.sendResponse(decision.chatId, questionMessageId, result.answer);
       } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
+        const failedAt = (/* @__PURE__ */ new Date()).toISOString();
+        const failedAnswer = `\u6682\u65F6\u65E0\u6CD5\u56DE\u7B54\uFF1A${message}`;
         qaLogs.create({
           chatId: decision.chatId,
           questionMessageId,
           question: decision.question,
-          answer: `\u6682\u65F6\u65E0\u6CD5\u56DE\u7B54\uFF1A${message}`,
+          answer: failedAnswer,
           citations: [],
           retrievalDebug: {},
+          trace: {
+            startedAt: now.toISOString(),
+            completedAt: failedAt,
+            durationMs: Math.max(0, Date.parse(failedAt) - now.getTime()),
+            status: "failed",
+            finalAnswer: failedAnswer,
+            fallbacks: [{ type: "answer_generation_failed", message, createdAt: failedAt }]
+          },
           status: "failed",
           error: message,
-          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+          createdAt: failedAt
         });
-        await this.sendResponse(decision.chatId, questionMessageId, `\u6682\u65F6\u65E0\u6CD5\u56DE\u7B54\uFF1A${message}`);
+        await this.sendResponse(decision.chatId, questionMessageId, failedAnswer);
       }
       return decision;
     } finally {
@@ -4327,146 +4440,13 @@ function formatTextWithMentions(text, options) {
   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 stripInlineMarkdown(text) {
-  let output = "";
-  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) {
-      output += text.slice(index);
-      break;
-    }
-    output += 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)) {
-          output += `${text.slice(next + 1, labelEnd)} ${href}`;
-          index = hrefEnd + 1;
-          continue;
-        }
-      }
-      output += text[next];
-      index = next + 1;
-      continue;
-    }
-    const marker = next === boldStarStart ? "**" : "__";
-    const close = text.indexOf(marker, next + marker.length);
-    if (close > next + marker.length) {
-      output += text.slice(next + marker.length, close);
-      index = close + marker.length;
-      continue;
-    }
-    output += marker;
-    index = next + marker.length;
-  }
-  return output;
-}
-function parseInline(text) {
-  return [{ tag: "text", text: stripInlineMarkdown(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: stripInlineMarkdown(heading[1]) || " " }]);
-      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 buildMarkdownText(markdown, options) {
+  return formatTextWithMentions(markdown.trim() || " ", options);
 }
 function buildFeishuPostContent(markdown, options) {
-  const content = parseMarkdownBlocks(markdown);
-  const mentions = options?.mentions ?? [];
-  if (mentions.length) {
-    const firstLine = content[0] ?? [];
-    const firstText = firstLine[0];
-    const prefix = mentions.map((mention) => `@${mention.name}`).join(" ");
-    if (firstText?.tag === "text") {
-      content[0] = [{ tag: "text", text: `${prefix} ${firstText.text}` }, ...firstLine.slice(1)];
-    } else {
-      content[0] = [{ tag: "text", text: `${prefix} ` }, ...firstLine];
-    }
-  }
   return {
-    post: {
-      zh_cn: {
-        title: "",
-        content
-      }
+    zh_cn: {
+      content: [[{ tag: "md", text: buildMarkdownText(markdown, options) }]]
     }
   };
 }
@@ -6050,12 +6030,15 @@ function buildHtml() {
     let allFileJobs = [];
     let allCronJobs = [];
     let allQaLogs = [];
+    let selectedQaLogId = null;
     let statusData = null;
 
     function fmt(value) { return value == null || value === "" ? "-" : String(value); }
     function escapeHtml(value) {
       return fmt(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
     }
+    function renderJson(value) { return '<pre style="white-space:pre-wrap;overflow:auto;max-height:320px;">' + escapeHtml(JSON.stringify(value, null, 2)) + '</pre>'; }
+    function renderTextBlock(value) { return '<pre style="white-space:pre-wrap;overflow:auto;max-height:320px;">' + escapeHtml(value || "") + '</pre>'; }
     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);
@@ -6328,17 +6311,72 @@ function buildHtml() {
       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';
+        var statusClass = item.status === 'answered' ? '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>' +
+          '<span>' + citationCount + ' \u6761\u5F15\u7528</span>' +
+          '<span class="tag ' + (item.hasTrace ? 'tag-info' : 'tag-warning') + '">' + (item.hasTrace ? '\u6709 trace' : '\u65E0 trace') + '</span></div>' +
           '<div class="qa-question">' + escapeHtml(item.question) + '</div>' +
-          '<div class="qa-answer">' + escapeHtml(item.answer) + '</div></div>';
+          '<div class="qa-answer">' + escapeHtml(item.answer) + '</div>' +
+          '<button class="btn btn-sm" style="margin-top:var(--space-sm);" data-view-qa-log="' + escapeHtml(item.id) + '">\u67E5\u770B\u8BE6\u60C5</button>' +
+          '<div id="qa-detail-' + escapeHtml(item.id) + '" style="margin-top:var(--space-md);"></div></div>';
       }
       el.innerHTML = html;
     }
 
+    async function showQaLogDetail(id) {
+      selectedQaLogId = id;
+      var container = document.getElementById("qa-detail-" + id);
+      if (!container) return;
+      container.innerHTML = '<div class="empty-state">\u6B63\u5728\u52A0\u8F7D\u95EE\u7B54\u8BE6\u60C5...</div>';
+      try {
+        var item = await fetchJson("/api/qa-logs/" + encodeURIComponent(id));
+        renderQaLogDetail(item);
+      } catch (error) {
+        container.innerHTML = '<div class="empty-state">\u8BE6\u60C5\u52A0\u8F7D\u5931\u8D25\uFF1A' + escapeHtml(error instanceof Error ? error.message : String(error)) + '</div>';
+      }
+    }
+
+    function renderQaLogDetail(item) {
+      var container = document.getElementById("qa-detail-" + item.id);
+      if (!container) return;
+      var trace = item.trace || {};
+      var html = '<div class="content-panel" style="margin-top:var(--space-sm);background:rgba(255,255,255,0.03);">';
+      html += '<h3 style="font-size:15px;margin-bottom:var(--space-sm);">\u95EE\u7B54\u8BE6\u60C5</h3>';
+      html += '<div class="message-meta" style="margin-bottom:var(--space-sm);"><span>\u72B6\u6001\uFF1A' + escapeHtml(item.status) + '</span><span>\u521B\u5EFA\uFF1A' + escapeHtml(formatDateTime(item.createdAt)) + '</span><span>\u8017\u65F6\uFF1A' + escapeHtml(trace.durationMs == null ? '-' : trace.durationMs + 'ms') + '</span></div>';
+      if (item.error) html += '<div style="color:var(--danger);margin-bottom:var(--space-sm);">\u9519\u8BEF\uFF1A' + escapeHtml(item.error) + '</div>';
+      html += '<div class="qa-question">' + escapeHtml(item.question) + '</div>';
+      html += '<div class="qa-answer" style="margin-bottom:var(--space-md);">' + escapeHtml(item.answer) + '</div>';
+      if (!item.hasTrace) {
+        html += '<div class="empty-state">\u8FD9\u6761\u95EE\u7B54\u6CA1\u6709 trace\uFF0C\u53EF\u80FD\u6765\u81EA\u65E7\u7248\u672C\u8BB0\u5F55\u3002</div></div>';
+        container.innerHTML = html;
+        return;
+      }
+      var turns = trace.modelTurns || [];
+      html += '<h4 style="margin:var(--space-md) 0 var(--space-sm);">Reasoning</h4>';
+      if (turns.length === 0) html += '<div class="empty-state">\u65E0 reasoningContent</div>';
+      for (var i = 0; i < turns.length; i++) {
+        html += '<div style="margin-bottom:var(--space-sm);"><div class="message-meta"><span>\u6A21\u578B\u8F6E\u6B21 ' + escapeHtml(turns[i].index) + '</span><span>' + escapeHtml(formatDateTime(turns[i].createdAt)) + '</span></div>' + renderTextBlock(turns[i].reasoningContent || '\u65E0 reasoningContent') + '</div>';
+      }
+      html += '<h4 style="margin:var(--space-md) 0 var(--space-sm);">\u6A21\u578B\u8F6E\u6B21\u4E0E\u5DE5\u5177\u8C03\u7528</h4>';
+      for (var j = 0; j < turns.length; j++) {
+        html += '<div style="margin-bottom:var(--space-sm);"><div class="message-meta"><span>\u8F6E\u6B21 ' + escapeHtml(turns[j].index) + '</span></div>' + renderTextBlock(turns[j].content || '') + renderJson(turns[j].toolCalls || []) + '</div>';
+      }
+      html += '<h4 style="margin:var(--space-md) 0 var(--space-sm);">\u5DE5\u5177\u7ED3\u679C</h4>';
+      var toolResults = trace.toolResults || [];
+      if (toolResults.length === 0) html += '<div class="empty-state">\u6CA1\u6709\u5DE5\u5177\u7ED3\u679C\u3002</div>';
+      for (var k = 0; k < toolResults.length; k++) {
+        html += '<div style="margin-bottom:var(--space-sm);"><div class="message-meta"><span>' + escapeHtml(toolResults[k].name) + '</span><span>' + escapeHtml(toolResults[k].toolCallId) + '</span><span>' + escapeHtml(formatDateTime(toolResults[k].createdAt)) + '</span></div>' + renderJson(toolResults[k].input) + (toolResults[k].error ? '<div style="color:var(--danger);">' + escapeHtml(toolResults[k].error) + '</div>' : renderTextBlock(toolResults[k].content || '')) + '</div>';
+      }
+      html += '<h4 style="margin:var(--space-md) 0 var(--space-sm);">\u5F15\u7528\u4E0E\u68C0\u7D22</h4>' + renderJson({ citations: item.citations || [], retrievalDebug: item.retrievalDebug || {} });
+      html += '<h4 style="margin:var(--space-md) 0 var(--space-sm);">Fallback</h4>';
+      var fallbacks = trace.fallbacks || [];
+      html += fallbacks.length === 0 ? '<div class="empty-state">\u6CA1\u6709 fallback\u3002</div>' : renderJson(fallbacks);
+      html += '</div>';
+      container.innerHTML = html;
+    }
+
     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>';
@@ -6373,7 +6411,10 @@ function buildHtml() {
       if (currentView === "episodes") renderEpisodesView();
       if (currentView === "files") renderFilesView();
       if (currentView === "tasks") renderTasksView();
-      if (currentView === "qa-logs") renderQaLogsView();
+      if (currentView === "qa-logs") {
+        renderQaLogsView();
+        if (selectedQaLogId) void showQaLogDetail(selectedQaLogId);
+      }
     }
 
     async function processNow() {
@@ -6395,6 +6436,11 @@ function buildHtml() {
     document.addEventListener("click", async function(event) {
       var target = event.target;
       if (!(target instanceof HTMLElement)) return;
+      var qaLogId = target.dataset.viewQaLog;
+      if (qaLogId) {
+        void showQaLogDetail(qaLogId);
+        return;
+      }
       var id = target.dataset.deleteCronJob;
       if (!id) return;
       target.disabled = true;
@@ -6438,6 +6484,10 @@ function parseCookies(header) {
 function isAuthorizedWebAction(request, token) {
   return parseCookies(request.headers.cookie).chattercatcher_web_token === token;
 }
+function toQaLogListItem(log) {
+  const { trace: _trace, ...item } = log;
+  return item;
+}
 function createWebApp(config, options = {}) {
   const app = Fastify({ logger: false });
   const database = openDatabase(config);
@@ -6516,9 +6566,18 @@ function createWebApp(config, options = {}) {
   app.get("/api/qa-logs", async (request) => {
     const limit = parseLimit(request.query.limit, 20, 100);
     return {
-      items: qaLogs.listRecent(limit)
+      items: qaLogs.listRecent(limit).map(toQaLogListItem)
     };
   });
+  app.get("/api/qa-logs/:id", async (request, reply) => {
+    const id = request.params.id;
+    const log = qaLogs.getById(id);
+    if (!log) {
+      reply.code(404);
+      return { ok: false, message: "\u6CA1\u6709\u627E\u5230\u95EE\u7B54\u65E5\u5FD7\u3002" };
+    }
+    return log;
+  });
   app.get("/api/cron-jobs", async (request) => {
     const limit = parseLimit(request.query.limit, 50, 200);
     return {