@hirohsu/user-web-feedback 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +953 -0
  3. package/dist/cli.cjs +95778 -0
  4. package/dist/index.cjs +92818 -0
  5. package/dist/static/app.js +385 -0
  6. package/dist/static/components/navbar.css +406 -0
  7. package/dist/static/components/navbar.html +49 -0
  8. package/dist/static/components/navbar.js +211 -0
  9. package/dist/static/dashboard.css +495 -0
  10. package/dist/static/dashboard.html +95 -0
  11. package/dist/static/dashboard.js +540 -0
  12. package/dist/static/favicon.svg +27 -0
  13. package/dist/static/index.html +541 -0
  14. package/dist/static/logs.html +376 -0
  15. package/dist/static/logs.js +442 -0
  16. package/dist/static/mcp-settings.html +797 -0
  17. package/dist/static/mcp-settings.js +884 -0
  18. package/dist/static/modules/app-core.js +124 -0
  19. package/dist/static/modules/conversation-panel.js +247 -0
  20. package/dist/static/modules/feedback-handler.js +1420 -0
  21. package/dist/static/modules/image-handler.js +155 -0
  22. package/dist/static/modules/log-viewer.js +296 -0
  23. package/dist/static/modules/mcp-manager.js +474 -0
  24. package/dist/static/modules/prompt-manager.js +364 -0
  25. package/dist/static/modules/settings-manager.js +299 -0
  26. package/dist/static/modules/socket-manager.js +170 -0
  27. package/dist/static/modules/state-manager.js +352 -0
  28. package/dist/static/modules/timer-controller.js +243 -0
  29. package/dist/static/modules/ui-helpers.js +246 -0
  30. package/dist/static/settings.html +355 -0
  31. package/dist/static/settings.js +425 -0
  32. package/dist/static/socket.io.min.js +7 -0
  33. package/dist/static/style.css +2157 -0
  34. package/dist/static/terminals.html +357 -0
  35. package/dist/static/terminals.js +321 -0
  36. package/package.json +91 -0
package/dist/static/index.html ADDED
@@ -0,0 +1,541 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-TW">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>🎯 user-feedback MCP Tools - Enhanced</title>
7
+ <!-- Favicon -->
8
+ <link rel="icon" type="image/svg+xml" href="favicon.svg">
9
+ <link rel="alternate icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA2xJREFUWEfFl11oXFUUhb99bjKTSZqYtE1sNUqLFkSQolQEH/xBK4ggCj4oQsEHfRAR8UH0QfBBEAQfBEERRPBBRBB88EEQQYqIqFgVW6xarTY/TZO0zUwyk5k795zr3jOTSWYmmbmTFhI4D/fes/faa6+99rrC/3yJ/zn/iwF+3PoMm9ufp6XxGZqcY0YZZmQPE2qI78f38N3oXv4VAFW20i/e5oH2VwFoVJIG5WhQjriCuHKIgo8O3uT9kb0kVJL2xDBbW16kI9ZLs3I0KMuMsvwxu4fPJj7mx8yP1HLnqgA6xOu83bmNu5ubERStStOqNB3K0KEcMWXwFCTVEP+M7+PT8Y+YUgO0RXvZ3PIinbFe2pWjRVkaVYIx1c+X6U/5ZuojTqmjVAJUCVAtg33tzxGPdNBWCtyB1CqAjmVPgSkssyrBnErwS/p7vpj8lJNqgJgYYVPzi9zd3EWXcpW1UYlsuwU8u/VdNrW8SFdTP0oJAAqhtQIXS8kThkk1wC/p7/ly8lPOqAEalcNXwpQa4IvJT/kz80PlRKgG0NP0BPe0PElH02NIpQsAWqsqgAXggAk1yLepz/k682tgQ3FPR+Q2ehqfpb+pm6U2lEuAXrGVB9peoKv5UaRWaNMKYEr1U1pEqx4y6iiJWB8nmCQ5f4Tfs7/hy2FalKVFGWLKl9ZMqiG+Tvd5BQsgd4pd/m7aEu20KYtWimklaFCAUlAL4L9juz+rz9AdH6bJ/hP89uzj59lvcZSrNlXlAWjQV2/zo9y78T3aEh0F4wEUBWilmHUSgPnz43qQ/qaTdDaeoiXeRkTHmFVR0irCtIow4RQp+CX9Hd+kv2ZGD1VdBZUAGg1v3vY+d3VvJx65hQZbWAu+sow5SdKWJrfS4Ssg7QyJSB8Tk738NfMTV/x+Js0Es85U3FwVgNV39/k72bjtI1rjG9BOAhZaVAJP+/hOBRJBAvxAhAtniKUG+XP6OGnvShDsZWe0CkBvsJu7PviQ9niXB+AtCQDWAEirccbMIMfOH+aSfyGoqqoCxP7tbh596yfaWjuYzY0zZM9z3AxxYuY4Y3a0ahlWA1i7YRO9uz+gvaOXhWySMTPEkBkqa7kWQOfWbbTt/ISO7oeCsVP/HWDVLVipYqsC/AvW2I8wIl3IxQAAAABJRU5ErkJggg==">
10
+ <!-- Marked.js for Markdown rendering -->
11
+ <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
12
+ <!-- Socket.IO Client (served from static folder) -->
13
+ <script src="/socket.io.min.js"></script>
14
+ <!-- Navbar Component -->
15
+ <link rel="stylesheet" href="/components/navbar.css">
16
+ <link rel="stylesheet" href="style.css">
17
+ </head>
18
+ <body>
19
+ <!-- Unified Navigation Bar (injected by navbar.js) -->
20
+ <!-- 連接狀態指示器 + 版本號 + 自動回覆計時器 (!不准刪除)-->
21
+ <div class="connection-status" id="connectionStatus">
22
+ <span class="status-dot"></span>
23
+ <span class="status-text">連接中...</span>
24
+ <!-- 版本顯示 -->
25
+ <span id="version-display" class="version-display" title="當前版本">v--</span>
26
+ <!-- 自動回覆計時器（與連接指示器一起） -->
27
+ <div id="auto-reply-timer" class="auto-reply-timer" title="點擊暫停 / 再次點擊繼續自動回覆倒數" aria-label="自動回覆倒數，點擊可暫停或繼續">
28
+ / ⏱️自動回覆倒數: <span id="auto-reply-seconds">--</span>s
29
+ </div>
30
+ </div>
31
+
32
+ <!-- 主容器（三欄式佈局） -->
33
+ <div class="feedback-container">
34
+ <!-- 左側：AI 訊息顯示區 (30%) -->
35
+ <div class="panel ai-panel">
36
+ <div class="panel-header">
37
+ <h3 class="panel-title">
38
+ <span class="icon">🤖</span>
39
+ AI 工作匯報
40
+ </h3>
41
+ <span id="projectInfo" class="project-info"></span>
42
+ </div>
43
+ <div class="panel-content">
44
+ <div id="aiMessageDisplay" class="ai-message-display">
45
+ <div class="placeholder">
46
+ <span class="icon">⏳</span>
47
+ <p>等待 AI 工作匯報...</p>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- 中間：使用者互動區 (40%) -->
54
+ <div class="panel user-panel">
55
+ <!-- 上方：文字回應輸入區 (60%) -->
56
+ <div class="input-section">
57
+ <div class="panel-header">
58
+ <h3 class="panel-title">
59
+ <span class="icon">💬</span>
60
+ 您的回應
61
+ </h3>
62
+ <!-- 關閉頁面倒數計時器（從 MCP_DIALOG_TIMEOUT 讀取秒數，倒數到 0 自動關閉） -->
63
+ <div id="close-cd" class="close-cd" style="display: none; margin-right:8px; align-self:center;">60</div>
64
+ <button id="aiReplyBtn" class="btn btn-secondary" title="使用 AI 生成回應">
65
+ <span class="icon">✨</span>
66
+ AI 回覆
67
+ </button>
68
+ <button id="submitBtn" class="btn btn-primary" title="提交您的回應" style="margin-left:8px;">
69
+ <span class="icon">📤</span>
70
+ 提交回應
71
+ </button>
72
+ </div>
73
+ <div class="panel-content">
74
+ <textarea
75
+ id="feedbackText"
76
+ class="feedback-input"
77
+ placeholder="在此輸入您的回應...&#10;&#10;提示：&#10;- 按 Ctrl+Enter 快速提交&#10;- 可以留空直接提交（跳過）&#10;- 點擊「AI 回覆」按鈕生成建議回應"
78
+ ></textarea>
79
+ <div class="input-footer">
80
+ <div class="char-count" id="charCount">0 字元</div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- 下方：圖片上傳/貼上區 (40%) -->
86
+ <div class="image-section">
87
+ <div class="panel-header">
88
+ <h3 class="panel-title">
89
+ <span class="icon">🖼️</span>
90
+ 圖片 <span id="imageCount" class="badge">0</span>
91
+ </h3>
92
+ <button id="clearImagesBtn" class="btn btn-ghost" title="清除所有圖片">
93
+ <span class="icon">🗑️</span>
94
+ </button>
95
+ </div>
96
+ <div class="panel-content">
97
+ <div id="imageDropZone" class="image-drop-zone">
98
+ <div class="drop-zone-content">
99
+ <span class="icon">📁</span>
100
+ <p>拖放圖片至此，或點擊選擇文件</p>
101
+ <p class="hint">支援貼上圖片 (Ctrl+V)</p>
102
+ </div>
103
+ <input type="file" id="fileInput" accept="image/*" multiple style="display: none;">
104
+ </div>
105
+ <div id="imagePreviewContainer" class="image-preview-container"></div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- 右側：提示詞管理區 (30%) -->
111
+ <div class="panel prompt-panel">
112
+ <div class="panel-header">
113
+ <h3 class="panel-title">
114
+ <span class="icon">📝</span>
115
+ 提示詞
116
+ </h3>
117
+
118
+ </div>
119
+ <div class="panel-content">
120
+ <!-- 搜尋框 -->
121
+ <div class="search-box">
122
+ <input type="text" id="promptSearch" class="search-input" placeholder="搜尋提示詞...">
123
+ </div>
124
+
125
+ <!-- 提示詞列表 -->
126
+ <div id="promptList" class="prompt-list">
127
+ <div class="placeholder">
128
+ <span class="icon">📋</span>
129
+ <p>尚無提示詞</p>
130
+ <button id="addPromptBtn" class="btn btn-secondary btn-sm">新增提示詞</button>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- 新增提示詞按鈕 -->
135
+ <div class="panel-footer">
136
+ <button id="addPromptBtnFooter" class="btn btn-primary btn-block">
137
+ <span class="icon">➕</span>
138
+ 新增提示詞
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ <!-- 自動回覆警告提示 -->
145
+ <div id="autoReplyWarning" class="auto-reply-warning" style="display: none;">
146
+ <div class="warning-content">
147
+ <span class="icon">⏰</span>
148
+ <span id="warningText">系統將在 60 秒後自動生成回應</span>
149
+ <button id="cancelAutoReply" class="btn btn-ghost btn-sm">取消</button>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- AI 設定彈窗 -->
154
+ <div id="aiSettingsModal" class="modal">
155
+ <div class="modal-overlay"></div>
156
+ <div class="modal-content">
157
+ <div class="modal-header">
158
+ <h2 class="modal-title">
159
+ <span class="icon">⚙️</span>
160
+ AI 設定
161
+ </h2>
162
+ <button class="modal-close" id="closeAiSettings">
163
+ <span class="icon">✖️</span>
164
+ </button>
165
+ </div>
166
+ <div class="modal-body">
167
+ <form id="aiSettingsForm">
168
+ <div class="form-group">
169
+ <label for="apiUrl">API URL</label>
170
+ <input type="text" id="apiUrl" class="form-control" placeholder="https://generativelanguage.googleapis.com/v1beta">
171
+ </div>
172
+
173
+ <div class="form-group">
174
+ <label for="model">模型名稱</label>
175
+ <input type="text" id="model" class="form-control" placeholder="gemini-2.0-flash-exp">
176
+ </div>
177
+
178
+ <div class="form-group">
179
+ <label for="apiKey">API Key</label>
180
+ <div class="input-group">
181
+ <input type="password" id="apiKey" class="form-control" placeholder="輸入您的 API Key">
182
+ <button type="button" id="toggleApiKey" class="btn btn-ghost">
183
+ <span class="icon">👁️</span>
184
+ </button>
185
+ </div>
186
+ <small class="form-hint">API Key 將被加密儲存</small>
187
+ </div>
188
+
189
+ <div class="form-group">
190
+ <label for="systemPrompt">系統提示詞</label>
191
+ <textarea id="systemPrompt" class="form-control" rows="6" placeholder="設定 AI 的行為和回應風格..."></textarea>
192
+ </div>
193
+
194
+ <div class="form-group">
195
+ <label for="mcpToolsPrompt">MCP 工具提示詞</label>
196
+ <textarea id="mcpToolsPrompt" class="form-control" rows="8" placeholder="設定 MCP 工具的使用說明，會在 AI 回覆時附加到提示詞中..."></textarea>
197
+ <small class="form-hint">定義 AI 如何使用 MCP 工具收集專案資訊。{project_name} 和 {project_path} 會被替換為實際值。</small>
198
+ </div>
199
+
200
+ <div class="form-row">
201
+ <div class="form-group">
202
+ <label for="temperature">Temperature</label>
203
+ <input type="number" id="temperature" class="form-control" min="0" max="2" step="0.1" value="0.7">
204
+ </div>
205
+
206
+ <div class="form-group">
207
+ <label for="maxTokens">Max Tokens</label>
208
+ <input type="number" id="maxTokens" class="form-control" min="100" max="4000" step="100" value="1000">
209
+ </div>
210
+ </div>
211
+
212
+ <div class="form-group">
213
+ <label for="autoReplyTimerSeconds">自動 AI 回覆時間（秒）</label>
214
+ <input type="number" id="autoReplyTimerSeconds" class="form-control" min="30" max="600" step="10" value="300" placeholder="300">
215
+ <small class="form-hint">頁面載入後經過此秒數將自動生成 AI 回覆（30-600 秒，預設 300 秒）</small>
216
+ </div>
217
+
218
+ <div class="form-group">
219
+ <label for="maxToolRounds">AI 交談次數上限</label>
220
+ <input type="number" id="maxToolRounds" class="form-control" min="1" max="20" step="1" value="5" placeholder="5">
221
+ <small class="form-hint">AI 使用 MCP 工具的最大回合數（1-20 次，預設 5 次）</small>
222
+ </div>
223
+
224
+ <div class="form-group">
225
+ <label class="checkbox-label">
226
+ <input type="checkbox" id="debugMode">
227
+ <span class="checkbox-text">🔧 Debug 模式</span>
228
+ </label>
229
+ <small class="form-hint">開啟後 Streaming Panel 不會自動關閉，需手動點擊關閉</small>
230
+ </div>
231
+ </form>
232
+ </div>
233
+ <div class="modal-footer">
234
+ <button type="button" id="testApiKey" class="btn btn-secondary">
235
+ <span class="icon">🔍</span>
236
+ 測試連接
237
+ </button>
238
+ <button type="button" id="editPromptsFromSettings" class="btn btn-secondary">
239
+ <span class="icon">📝</span>
240
+ 編輯提示詞
241
+ </button>
242
+ <button type="button" id="saveAiSettings" class="btn btn-primary">
243
+ <span class="icon">💾</span>
244
+ 儲存設定
245
+ </button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- MCP Servers 彈窗 -->
251
+ <div id="mcpServersModal" class="modal">
252
+ <div class="modal-overlay"></div>
253
+ <div class="modal-content modal-lg">
254
+ <div class="modal-header">
255
+ <h2 class="modal-title">
256
+ <span class="icon">🔌</span>
257
+ MCP Servers
258
+ </h2>
259
+ <button class="modal-close" id="closeMcpServers">
260
+ <span class="icon">✖️</span>
261
+ </button>
262
+ </div>
263
+ <div class="modal-body">
264
+ <!-- MCP Server 列表 -->
265
+ <div id="mcpServerList" class="mcp-server-list">
266
+ <div class="placeholder">
267
+ <span class="icon">🔌</span>
268
+ <p>尚無 MCP Server</p>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ <div class="modal-footer">
273
+ <button type="button" id="connectAllMcpServers" class="btn btn-secondary">
274
+ <span class="icon">🔗</span>
275
+ 全部連接
276
+ </button>
277
+ <button type="button" id="disconnectAllMcpServers" class="btn btn-secondary">
278
+ <span class="icon">🔌</span>
279
+ 全部斷開
280
+ </button>
281
+ <button type="button" id="addMcpServer" class="btn btn-primary">
282
+ <span class="icon">➕</span>
283
+ 新增 Server
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- 新增/編輯 MCP Server 彈窗 -->
290
+ <div id="mcpServerEditModal" class="modal">
291
+ <div class="modal-overlay"></div>
292
+ <div class="modal-content modal-sm">
293
+ <div class="modal-header">
294
+ <h2 class="modal-title">
295
+ <span class="icon">🔌</span>
296
+ <span id="mcpServerEditTitle">新增 MCP Server</span>
297
+ </h2>
298
+ <button class="modal-close" id="closeMcpServerEdit">
299
+ <span class="icon">✖️</span>
300
+ </button>
301
+ </div>
302
+ <div class="modal-body">
303
+ <form id="mcpServerForm">
304
+ <input type="hidden" id="mcpServerId">
305
+ <div class="form-group">
306
+ <label for="mcpServerName">名稱</label>
307
+ <input type="text" id="mcpServerName" class="form-control" placeholder="MCP Server 名稱" required>
308
+ </div>
309
+
310
+ <div class="form-group">
311
+ <label for="mcpServerTransport">傳輸方式</label>
312
+ <select id="mcpServerTransport" class="form-control">
313
+ <option value="stdio">stdio (本地程序)</option>
314
+ <option value="sse">SSE (Server-Sent Events)</option>
315
+ <option value="streamable-http">Streamable HTTP</option>
316
+ </select>
317
+ </div>
318
+
319
+ <!-- stdio 設定 -->
320
+ <div id="stdioSettings" class="transport-settings">
321
+ <div class="form-group">
322
+ <label for="mcpServerCommand">命令</label>
323
+ <input type="text" id="mcpServerCommand" class="form-control" placeholder="例如: npx 或 node">
324
+ </div>
325
+ <div class="form-group">
326
+ <label for="mcpServerArgs">參數 (每行一個)</label>
327
+ <textarea id="mcpServerArgs" class="form-control" rows="3" placeholder="例如:\n-y\n@anthropic/mcp-server-time"></textarea>
328
+ </div>
329
+ <div class="form-group">
330
+ <label for="mcpServerEnv">環境變數 (KEY=VALUE，每行一個)</label>
331
+ <textarea id="mcpServerEnv" class="form-control" rows="2" placeholder="例如:\nAPI_KEY=xxx"></textarea>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- SSE/HTTP 設定 -->
336
+ <div id="httpSettings" class="transport-settings" style="display: none;">
337
+ <div class="form-group">
338
+ <label for="mcpServerUrl">伺服器 URL</label>
339
+ <input type="url" id="mcpServerUrl" class="form-control" placeholder="http://localhost:3000/mcp">
340
+ </div>
341
+ </div>
342
+
343
+ <div class="form-check">
344
+ <input type="checkbox" id="mcpServerEnabled" class="form-check-input" checked>
345
+ <label for="mcpServerEnabled" class="form-check-label">
346
+ <span class="icon">✅</span>
347
+ 啟用此 Server
348
+ </label>
349
+ </div>
350
+ </form>
351
+ </div>
352
+ <div class="modal-footer">
353
+ <button type="button" id="cancelMcpServer" class="btn btn-secondary">取消</button>
354
+ <button type="button" id="saveMcpServer" class="btn btn-primary">儲存</button>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- 新增/編輯提示詞彈窗 -->
360
+ <div id="promptModal" class="modal">
361
+ <div class="modal-overlay"></div>
362
+ <div class="modal-content modal-sm">
363
+ <div class="modal-header">
364
+ <h2 class="modal-title">
365
+ <span class="icon">📝</span>
366
+ <span id="promptModalTitle">新增提示詞</span>
367
+ </h2>
368
+ <button class="modal-close" id="closePromptModal">
369
+ <span class="icon">✖️</span>
370
+ </button>
371
+ </div>
372
+ <div class="modal-body">
373
+ <form id="promptForm">
374
+ <input type="hidden" id="promptId">
375
+ <div class="form-group">
376
+ <label for="promptTitle">標題</label>
377
+ <input type="text" id="promptTitle" class="form-control" placeholder="提示詞標題" required>
378
+ </div>
379
+
380
+ <div class="form-group">
381
+ <label for="promptContent">內容</label>
382
+ <textarea id="promptContent" class="form-control" rows="6" placeholder="提示詞內容..." required></textarea>
383
+ </div>
384
+
385
+ <div class="form-group">
386
+ <label for="promptCategory">分類（選填）</label>
387
+ <input type="text" id="promptCategory" class="form-control" placeholder="例如：問候、總結、建議">
388
+ </div>
389
+
390
+ <div class="form-check">
391
+ <input type="checkbox" id="promptIsPinned" class="form-check-input">
392
+ <label for="promptIsPinned" class="form-check-label">
393
+ <span class="icon">📌</span>
394
+ 釘選此提示詞（啟動時自動載入）
395
+ </label>
396
+ </div>
397
+ </form>
398
+ </div>
399
+ <div class="modal-footer">
400
+ <button type="button" id="cancelPrompt" class="btn btn-secondary">取消</button>
401
+ <button type="button" id="savePrompt" class="btn btn-primary">儲存</button>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- Toast 通知 -->
407
+ <div id="toastContainer" class="toast-container"></div>
408
+
409
+ <!-- AI 回覆 Streaming 面板 -->
410
+ <div id="aiStreamingPanel" class="ai-streaming-panel" style="display: none;">
411
+ <div class="streaming-content">
412
+ <div class="streaming-header">
413
+ <div class="streaming-title">
414
+ <span class="icon">🤖</span>
415
+ <span id="streamingTitle">AI 回覆中...</span>
416
+ </div>
417
+ <div class="streaming-status">
418
+ <span class="status-indicator" id="streamingStatusIndicator"></span>
419
+ <span id="streamingStatus">準備中</span>
420
+ </div>
421
+ </div>
422
+ <div class="streaming-body">
423
+ <div class="streaming-progress" id="streamingProgress">
424
+ <!-- 進度項目會動態添加 -->
425
+ </div>
426
+ <div class="streaming-output" id="streamingOutput">
427
+ <!-- AI 輸出會在這裡顯示 -->
428
+ </div>
429
+ </div>
430
+ <div class="streaming-footer">
431
+ <button type="button" id="cancelStreaming" class="btn btn-secondary">取消</button>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- 載入中覆蓋層（簡單操作用） -->
437
+ <div id="loadingOverlay" class="loading-overlay" style="display: none;">
438
+ <div class="loading-spinner">
439
+ <div class="spinner"></div>
440
+ <p id="loadingText">處理中...</p>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- 通用彈窗（用於提示/警示） -->
445
+ <div id="alertModal" class="modal">
446
+ <div class="modal-overlay"></div>
447
+ <div class="modal-content modal-sm">
448
+ <div class="modal-header">
449
+ <h2 class="modal-title">
450
+ <span class="icon">⚠️</span>
451
+ <span id="alertModalTitle">提醒</span>
452
+ </h2>
453
+ </div>
454
+ <div class="modal-body">
455
+ <p id="alertModalBody">訊息內容</p>
456
+ </div>
457
+ <div class="modal-footer">
458
+ <button id="alertModalOk" class="btn btn-primary">確定</button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <!-- 日誌檢視器彈窗 -->
464
+ <div id="logViewerModal" class="modal">
465
+ <div class="modal-overlay"></div>
466
+ <div class="modal-content modal-lg">
467
+ <div class="modal-header">
468
+ <h2 class="modal-title">
469
+ <span class="icon">📋</span>
470
+ 系統日誌
471
+ </h2>
472
+ <button class="modal-close" id="closeLogViewer">
473
+ <span class="icon">✖️</span>
474
+ </button>
475
+ </div>
476
+ <div class="modal-body">
477
+ <!-- 搜尋和篩選區（緊湊版） -->
478
+ <div class="log-filter-bar">
479
+ <input type="text" id="logSearch" class="form-control" placeholder="搜尋日誌內容...">
480
+ <select id="logLevelFilter" class="form-control log-select-sm">
481
+ <option value="">全部級別</option>
482
+ <option value="error">Error</option>
483
+ <option value="warn">Warn</option>
484
+ <option value="info">Info</option>
485
+ <option value="debug">Debug</option>
486
+ </select>
487
+ <select id="logSourceFilter" class="form-control log-select-sm">
488
+ <option value="">全部來源</option>
489
+ </select>
490
+ <input type="date" id="logStartDate" class="form-control log-date-sm" title="開始日期">
491
+ <input type="date" id="logEndDate" class="form-control log-date-sm" title="結束日期">
492
+ <button id="logSearchBtn" class="btn btn-secondary btn-sm" title="搜尋">🔍</button>
493
+ <button id="logRefreshBtn" class="btn btn-ghost btn-sm" title="重新整理">🔄</button>
494
+ </div>
495
+
496
+ <!-- 日誌列表 -->
497
+ <div id="logEntriesContainer" class="log-entries-container">
498
+ <div class="placeholder">
499
+ <span class="icon">📭</span>
500
+ <p>尚無日誌記錄</p>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- 分頁控制 -->
505
+ <div class="log-pagination">
506
+ <button id="logPrevPage" class="btn btn-ghost btn-sm" disabled>◀ 上一頁</button>
507
+ <span id="logPageInfo" class="log-page-info">1 / 1</span>
508
+ <button id="logNextPage" class="btn btn-ghost btn-sm" disabled>下一頁 ▶</button>
509
+ <button type="button" id="clearOldLogs" class="btn btn-ghost btn-sm" title="清除7天前日誌">🗑️</button>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- 自動回覆確認模態框 -->
516
+ <div id="autoReplyConfirmModal" class="modal">
517
+ <div class="modal-overlay"></div>
518
+ <div class="modal-content modal-sm">
519
+ <div class="modal-header">
520
+ <h2 class="modal-title">
521
+ <span class="icon">⏱️</span>
522
+ <span>自動回覆確認</span>
523
+ </h2>
524
+ <button class="modal-close" id="closeAutoReplyConfirm"></button>
525
+ </div>
526
+ <div class="modal-body">
527
+ <p>AI 將在 <strong><span id="autoReplyCountdown">10</span> 秒</strong>後自動發送回覆</p>
528
+ <div id="autoReplyPreview" class="reply-preview" style="margin-top: 12px; padding: 8px; background: #f5f5f5; border-radius: 4px; max-height: 150px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;"></div>
529
+ </div>
530
+ <div class="modal-footer">
531
+ <button id="cancelAutoReplyConfirm" class="btn btn-secondary">取消</button>
532
+ <button id="confirmAutoReplySubmit" class="btn btn-primary">確認提交</button>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <!-- Scripts -->
538
+ <script src="/components/navbar.js"></script>
539
+ <script type="module" src="app.js"></script>
540
+ </body>
541
+ </html>