@hirohsu/user-web-feedback 2.8.17 → 2.8.19

package/dist/static/modules/conversation-panel.js

@@ -1,26 +1,21 @@
 /**
  * conversation-panel.js
  * 對話面板元件 - 顯示 AI 對話流程
- * 支援 6 種對話條目類型: prompt, thinking, tool, result, ai, error
+ * 支援 7 種對話條目類型: prompt, thinking, tool, result, ai, error, debug
  */
 
 import { escapeHtml } from './ui-helpers.js';
 
-/**
- * 對話條目類型
- */
 export const ConversationEntryType = {
   PROMPT: 'prompt',
   THINKING: 'thinking',
   TOOL: 'tool',
   RESULT: 'result',
   AI: 'ai',
-  ERROR: 'error'
+  ERROR: 'error',
+  DEBUG: 'debug'
 };
 
-/**
- * 對話條目視覺配置
- */
 const entryConfig = {
   prompt: {
     icon: '📤',
@@ -57,12 +52,15 @@ const entryConfig = {
     title: '錯誤',
     className: 'entry-error',
     borderColor: 'var(--accent-red)'
+  },
+  debug: {
+    icon: '🐛',
+    title: 'Debug',
+    className: 'entry-debug',
+    borderColor: 'var(--accent-orange, #f97316)'
   }
 };
 
-/**
- * 建立對話面板容器
- */
 export function createConversationPanel() {
   const panel = document.createElement('div');
   panel.id = 'conversationPanel';
@@ -73,14 +71,18 @@ export function createConversationPanel() {
         <span class="icon">💬</span>
         <span id="conversationTitle">AI 對話</span>
       </div>
-      <div class="conversation-mode">
-        <span class="mode-indicator" id="conversationModeIndicator"></span>
-        <span id="conversationMode">準備中</span>
+      <div class="conversation-header-right">
+        <div class="conversation-mode">
+          <span class="mode-indicator" id="conversationModeIndicator"></span>
+          <span id="conversationMode">準備中</span>
+        </div>
+        <label class="debug-toggle" title="顯示 Debug 資訊">
+          <input type="checkbox" id="debugToggle">
+          <span>🐛</span>
+        </label>
       </div>
     </div>
-    <div class="conversation-body" id="conversationBody">
-      <!-- 對話條目會動態添加 -->
-    </div>
+    <div class="conversation-body" id="conversationBody"></div>
     <div class="conversation-footer">
       <button type="button" id="closeConversation" class="btn btn-secondary">關閉</button>
     </div>
@@ -88,9 +90,6 @@ export function createConversationPanel() {
   return panel;
 }
 
-/**
- * 建立對話條目元素
- */
 export function createConversationEntry(type, content, options = {}) {
   const config = entryConfig[type] || entryConfig.ai;
   const entry = document.createElement('div');
@@ -98,7 +97,7 @@ export function createConversationEntry(type, content, options = {}) {
   entry.style.borderLeftColor = config.borderColor;
 
   const titleText = options.title || config.title;
-  const collapsed = options.collapsed ?? (type === 'prompt' || type === 'tool');
+  const collapsed = options.collapsed ?? (type === 'prompt' || type === 'tool' || type === 'debug');
   const timestamp = options.timestamp ? formatTimestamp(options.timestamp) : '';
 
   let contentHtml = '';
@@ -126,8 +125,93 @@ export function createConversationEntry(type, content, options = {}) {
 }
 
 /**
- * 新增對話條目到面板
+ * 建立 Debug 資訊條目（結構化表格）
  */
+export function createDebugEntry(debugInfo, options = {}) {
+  const config = entryConfig.debug;
+  const entry = document.createElement('div');
+  entry.className = `conversation-entry ${config.className}`;
+  entry.style.borderLeftColor = config.borderColor;
+
+  const titleText = options.title || config.title;
+  const collapsed = options.collapsed ?? true;
+  const timestamp = options.timestamp ? formatTimestamp(options.timestamp) : '';
+
+  let bodyHtml = '<div class="debug-info-grid">';
+
+  if (debugInfo.elapsedMs !== undefined) {
+    bodyHtml += debugRow('⏱️ 耗時', `${debugInfo.elapsedMs} ms`);
+  }
+  if (debugInfo.model) {
+    bodyHtml += debugRow('🧠 模型', debugInfo.model);
+  }
+  if (debugInfo.temperature !== undefined) {
+    bodyHtml += debugRow('🌡️ Temperature', debugInfo.temperature);
+  }
+  if (debugInfo.maxTokens !== undefined) {
+    bodyHtml += debugRow('📏 Max Tokens', debugInfo.maxTokens);
+  }
+  if (debugInfo.tokenEstimate !== undefined) {
+    bodyHtml += debugRow('🔢 Token 預估', `~${debugInfo.tokenEstimate}`);
+  }
+  if (debugInfo.totalPromptLength !== undefined) {
+    bodyHtml += debugRow('📐 Prompt 長度', `${debugInfo.totalPromptLength} chars`);
+  }
+  if (debugInfo.componentCount !== undefined) {
+    bodyHtml += debugRow('🧩 組件數量', debugInfo.componentCount);
+  }
+  if (debugInfo.mcpToolsCount !== undefined) {
+    bodyHtml += debugRow('🔧 MCP 工具數', debugInfo.mcpToolsCount);
+  }
+
+  bodyHtml += '</div>';
+
+  if (debugInfo.sections && debugInfo.sections.length > 0) {
+    bodyHtml += '<div class="debug-sections">';
+    bodyHtml += '<div class="debug-section-title">📋 提示詞區段順序（實際送出）</div>';
+    bodyHtml += '<table class="debug-table"><thead><tr><th>#</th><th>區段名稱</th><th>順序</th><th>長度</th></tr></thead><tbody>';
+    debugInfo.sections.forEach((s, i) => {
+      bodyHtml += `<tr><td>${i + 1}</td><td>${escapeHtml(s.name)}</td><td>${s.order}</td><td>${s.length} chars</td></tr>`;
+    });
+    bodyHtml += '</tbody></table></div>';
+  }
+
+  if (debugInfo.promptConfigs && debugInfo.promptConfigs.length > 0) {
+    bodyHtml += '<div class="debug-sections">';
+    bodyHtml += '<div class="debug-section-title">⚙️ 提示詞配置（設定值）</div>';
+    bodyHtml += '<table class="debug-table"><thead><tr><th>ID</th><th>啟用</th><th>第一次</th><th>第二次</th></tr></thead><tbody>';
+    debugInfo.promptConfigs.forEach(c => {
+      const enabledIcon = c.enabled ? '✅' : '❌';
+      bodyHtml += `<tr><td>${escapeHtml(c.id)}</td><td>${enabledIcon}</td><td>${c.firstOrder}</td><td>${c.secondOrder}</td></tr>`;
+    });
+    bodyHtml += '</tbody></table></div>';
+  }
+
+  if (debugInfo.error) {
+    bodyHtml += `<div class="debug-error">❌ 錯誤: ${escapeHtml(debugInfo.error)}</div>`;
+  }
+
+  entry.innerHTML = `
+    <details ${collapsed ? '' : 'open'}>
+      <summary class="entry-summary">
+        <span class="entry-icon">${config.icon}</span>
+        <span class="entry-title">${titleText}</span>
+        ${timestamp ? `<span class="entry-timestamp">${timestamp}</span>` : ''}
+        ${options.badge ? `<span class="entry-badge">${options.badge}</span>` : ''}
+      </summary>
+      <div class="entry-body debug-body">
+        ${bodyHtml}
+      </div>
+    </details>
+  `;
+
+  return entry;
+}
+
+function debugRow(label, value) {
+  return `<div class="debug-row"><span class="debug-label">${label}</span><span class="debug-value">${escapeHtml(String(value))}</span></div>`;
+}
+
 export function addConversationEntry(type, content, options = {}) {
   const body = document.getElementById('conversationBody');
   if (!body) return null;
@@ -135,13 +219,25 @@ export function addConversationEntry(type, content, options = {}) {
   const entry = createConversationEntry(type, content, options);
   body.appendChild(entry);
   body.scrollTop = body.scrollHeight;
+  return entry;
+}
+
+export function addDebugEntry(debugInfo, options = {}) {
+  const body = document.getElementById('conversationBody');
+  if (!body) return null;
+
+  const entry = createDebugEntry(debugInfo, options);
+  body.appendChild(entry);
+  body.scrollTop = body.scrollHeight;
+
+  const debugToggle = document.getElementById('debugToggle');
+  if (debugToggle && !debugToggle.checked) {
+    entry.style.display = 'none';
+  }
 
   return entry;
 }
 
-/**
- * 清空對話面板
- */
 export function clearConversationPanel() {
   const body = document.getElementById('conversationBody');
   if (body) {
@@ -149,9 +245,6 @@ export function clearConversationPanel() {
   }
 }
 
-/**
- * 更新對話面板模式顯示
- */
 export function updateConversationMode(mode, cliTool = null) {
   const modeElement = document.getElementById('conversationMode');
   const indicator = document.getElementById('conversationModeIndicator');
@@ -176,9 +269,6 @@ export function updateConversationMode(mode, cliTool = null) {
   }
 }
 
-/**
- * 更新對話面板標題
- */
 export function updateConversationTitle(title) {
   const titleElement = document.getElementById('conversationTitle');
   if (titleElement) {
@@ -186,9 +276,6 @@ export function updateConversationTitle(title) {
   }
 }
 
-/**
- * 顯示對話面板
- */
 export function showConversationPanel() {
   let panel = document.getElementById('aiConversationPanel');
   if (!panel) {
@@ -202,14 +289,21 @@ export function showConversationPanel() {
     if (closeBtn) {
       closeBtn.onclick = hideConversationPanel;
     }
+
+    const debugToggle = panel.querySelector('#debugToggle');
+    if (debugToggle) {
+      debugToggle.addEventListener('change', (e) => {
+        const show = e.target.checked;
+        panel.querySelectorAll('.entry-debug').forEach(el => {
+          el.style.display = show ? '' : 'none';
+        });
+      });
+    }
   }
   panel.style.display = 'flex';
   clearConversationPanel();
 }
 
-/**
- * 隱藏對話面板
- */
 export function hideConversationPanel() {
   const panel = document.getElementById('aiConversationPanel');
   if (panel) {
@@ -217,17 +311,11 @@ export function hideConversationPanel() {
   }
 }
 
-/**
- * 格式化時間戳記
- */
 function formatTimestamp(timestamp) {
   const date = new Date(timestamp);
   return date.toLocaleTimeString('zh-TW', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
 }
 
-/**
- * 新增思考中動畫條目
- */
 export function addThinkingEntry(message = 'AI 思考中...') {
   return addConversationEntry(ConversationEntryType.THINKING, message, {
     collapsed: false,
@@ -235,13 +323,10 @@ export function addThinkingEntry(message = 'AI 思考中...') {
   });
 }
 
-/**
- * 移除思考中條目
- */
 export function removeThinkingEntry() {
   const body = document.getElementById('conversationBody');
   if (!body) return;
-  
+
   const thinkingEntries = body.querySelectorAll('.entry-thinking');
   thinkingEntries.forEach(entry => entry.remove());
 }

package/dist/static/modules/feedback-handler.js

@@ -38,6 +38,7 @@ import {
   showConversationPanel,
   hideConversationPanel,
   addConversationEntry,
+  addDebugEntry,
   clearConversationPanel,
   updateConversationMode,
   updateConversationTitle,
@@ -170,10 +171,18 @@ export async function generateAIReply() {
     const data = await response.json();
     removeThinkingEntry();
 
+    if (data.debug) {
+      addDebugEntry(data.debug, {
+        title: "Debug 資訊",
+        collapsed: true,
+        timestamp: Date.now(),
+        badge: data.debug.elapsedMs ? `${data.debug.elapsedMs}ms` : undefined,
+      });
+    }
+
     if (data.success) {
       updateConversationMode(data.mode, data.cliTool);
 
-      // 如果有 fallback 原因，顯示通知
       if (data.fallbackReason) {
         showToast("warning", "模式切換", data.fallbackReason);
       }
@@ -199,7 +208,6 @@ export async function generateAIReply() {
       document.getElementById("feedbackText").value = finalReply;
       updateCharCount();
 
-      // 如果是 fallback，badge 顯示不同的樣式
       let badge = data.mode === "cli" ? `CLI (${data.cliTool})` : "API";
       if (data.fallbackReason) {
         badge = "API (fallback)";
@@ -905,6 +913,15 @@ export async function generateAIReplyWithTools() {
       const data = await response.json();
       removeThinkingEntry();
 
+      if (data.debug) {
+        addDebugEntry(data.debug, {
+          title: `Debug (第 ${round} 輪)`,
+          collapsed: true,
+          timestamp: Date.now(),
+          badge: data.debug.elapsedMs ? `${data.debug.elapsedMs}ms` : undefined,
+        });
+      }
+
       if (!data.success) {
         addConversationEntry(ConversationEntryType.ERROR, data.error || "AI 回覆失敗", {
           title: "錯誤",
@@ -917,12 +934,10 @@ export async function generateAIReplyWithTools() {
 
       updateConversationMode(data.mode, data.cliTool);
 
-      // 如果有 fallback 原因，顯示通知
       if (data.fallbackReason) {
         showToast("warning", "模式切換", data.fallbackReason);
       }
 
-      // 如果是 fallback，badge 顯示不同的樣式
       let badgeTools1 = data.mode === "cli" ? `CLI (${data.cliTool})` : "API";
       if (data.fallbackReason) {
         badgeTools1 = "API (fallback)";
@@ -1092,10 +1107,18 @@ export async function triggerAutoAIReply() {
       const data = await response.json();
       removeThinkingEntry();
 
+      if (data.debug) {
+        addDebugEntry(data.debug, {
+          title: "Debug 資訊 (自動回覆)",
+          collapsed: true,
+          timestamp: Date.now(),
+          badge: data.debug.elapsedMs ? `${data.debug.elapsedMs}ms` : undefined,
+        });
+      }
+
       if (data.success) {
         updateConversationMode(data.mode, data.cliTool);
 
-        // 如果有 fallback 原因，顯示通知
         if (data.fallbackReason) {
           showToast("warning", "模式切換", data.fallbackReason);
         }
@@ -1108,7 +1131,6 @@ export async function triggerAutoAIReply() {
           finalReply = "以下為我的回覆:\n" + data.reply;
         }
 
-        // 如果是 fallback，badge 顯示不同的樣式
         let badgeAuto1 = data.mode === "cli" ? `CLI (${data.cliTool})` : "API";
         if (data.fallbackReason) {
           badgeAuto1 = "API (fallback)";
@@ -1224,6 +1246,15 @@ export async function triggerAutoAIReply() {
       const data = await response.json();
       removeThinkingEntry();
 
+      if (data.debug) {
+        addDebugEntry(data.debug, {
+          title: `Debug (自動第 ${round} 輪)`,
+          collapsed: true,
+          timestamp: Date.now(),
+          badge: data.debug.elapsedMs ? `${data.debug.elapsedMs}ms` : undefined,
+        });
+      }
+
       if (!data.success) {
         addConversationEntry(ConversationEntryType.ERROR, data.error || "AI 回覆失敗", {
           title: "錯誤",
@@ -1236,12 +1267,10 @@ export async function triggerAutoAIReply() {
 
       updateConversationMode(data.mode, data.cliTool);
 
-      // 如果有 fallback 原因，顯示通知
       if (data.fallbackReason) {
         showToast("warning", "模式切換", data.fallbackReason);
       }
 
-      // 如果是 fallback，badge 顯示不同的樣式
       let badgeAuto2 = data.mode === "cli" ? `CLI (${data.cliTool})` : "API";
       if (data.fallbackReason) {
         badgeAuto2 = "API (fallback)";

package/dist/static/modules/timer-controller.js

@@ -108,6 +108,12 @@ export function startCloseCountdown() {
       setCloseCountdownInterval(null);
       console.log("倒數結束，關閉頁面");
       window.close();
+      setTimeout(() => {
+        document.body.innerHTML = `
+          <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:system-ui;color:#888;">
+            <p style="font-size:1.2rem;">✅ 回應已送出，您可以關閉此分頁。</p>
+          </div>`;
+      }, 300);
     }
   }, 1000);
 

package/dist/static/style.css

@@ -2075,6 +2075,112 @@ textarea.form-control {
     border-left-color: var(--accent-red);
 }
 
+.conversation-entry.entry-debug {
+    border-left-color: var(--accent-orange, #f97316);
+}
+
+.conversation-header-right {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.debug-toggle {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    user-select: none;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.debug-toggle:hover {
+    opacity: 1;
+}
+
+.debug-toggle input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+}
+
+.debug-info-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4px 16px;
+    margin-bottom: 8px;
+}
+
+.debug-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 8px;
+    border-radius: 4px;
+    background: var(--bg-primary);
+    font-size: 12px;
+}
+
+.debug-label {
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.debug-value {
+    color: var(--text-primary);
+    font-family: "Consolas", "Monaco", monospace;
+}
+
+.debug-sections {
+    margin-top: 8px;
+}
+
+.debug-section-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 4px;
+}
+
+.debug-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    font-family: "Consolas", "Monaco", monospace;
+}
+
+.debug-table th,
+.debug-table td {
+    padding: 4px 8px;
+    border: 1px solid var(--border-color);
+    text-align: left;
+}
+
+.debug-table th {
+    background: var(--bg-hover);
+    color: var(--text-secondary);
+    font-weight: 600;
+}
+
+.debug-table td {
+    color: var(--text-primary);
+}
+
+.debug-error {
+    margin-top: 8px;
+    padding: 6px 10px;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: 4px;
+    font-size: 12px;
+    color: var(--accent-red);
+}
+
+.debug-body {
+    font-size: 12px;
+}
+
 .entry-summary {
     padding: var(--spacing-sm) var(--spacing-md);
     cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hirohsu/user-web-feedback",
-  "version": "2.8.17",
+  "version": "2.8.19",
   "description": "基於Node.js的MCP回饋收集器 - 支持AI工作彙報和用戶回饋收集",
   "main": "dist/index.cjs",
   "bin": {