chattercatcher 0.1.31 → 0.2.1

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 (5) hide show
  1. package/dist/cli.js +850 -476
  2. package/dist/cli.js.map +1 -1
  3. package/dist/index.js +847 -473
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4469,11 +4469,23 @@ function extractImageKey(response) {
4469
4469
  }
4470
4470
  throw new Error("\u98DE\u4E66\u56FE\u7247\u4E0A\u4F20\u54CD\u5E94\u7F3A\u5C11 image_key\u3002");
4471
4471
  }
4472
- function isRichTextCompatibilityError(error) {
4472
+ function collectErrorFields(error) {
4473
+ const fields = [error];
4473
4474
  const value = error && typeof error === "object" ? error : {};
4474
- const code = value.code ?? value.errorCode;
4475
- const message = error instanceof Error ? error.message : String(error);
4476
- return code === 230001 || /post|msg_type|content|unsupported|invalid/i.test(message);
4475
+ fields.push(value.code, value.errorCode, value.msg, value.message);
4476
+ const response = value.response && typeof value.response === "object" ? value.response : {};
4477
+ const data = response.data && typeof response.data === "object" ? response.data : {};
4478
+ fields.push(data.code, data.errorCode, data.msg, data.message);
4479
+ return fields;
4480
+ }
4481
+ function isRichTextCompatibilityError(error) {
4482
+ return collectErrorFields(error).some((field) => {
4483
+ if (field === 230001) return true;
4484
+ if (typeof field === "string") {
4485
+ return /post|msg_type|content|unsupported|invalid/i.test(field);
4486
+ }
4487
+ return false;
4488
+ });
4477
4489
  }
4478
4490
  async function sendWithTextFallback(input) {
4479
4491
  try {
@@ -5500,516 +5512,867 @@ import Fastify from "fastify";
5500
5512
  function buildHtml() {
5501
5513
  return `<!doctype html>
5502
5514
  <html lang="zh-CN">
5503
- <head>
5504
- <meta charset="utf-8" />
5505
- <meta name="viewport" content="width=device-width, initial-scale=1" />
5506
- <title>ChatterCatcher</title>
5507
- <style>
5508
- :root {
5509
- color-scheme: light;
5510
- --bg: #f6f5f0;
5511
- --panel: #ffffff;
5512
- --text: #1f2933;
5513
- --muted: #667085;
5514
- --line: #d9d7cf;
5515
- --accent: #1f7a5a;
5516
- --warn: #9a5b13;
5517
- }
5518
- * { box-sizing: border-box; }
5519
- body {
5520
- margin: 0;
5521
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
5522
- background: var(--bg);
5523
- color: var(--text);
5524
- }
5525
- main { max-width: 1120px; margin: 0 auto; padding: 32px 24px 48px; overflow-x: hidden; }
5526
- header {
5527
- display: flex;
5528
- justify-content: space-between;
5529
- gap: 20px;
5530
- align-items: flex-start;
5531
- padding-bottom: 24px;
5532
- border-bottom: 1px solid var(--line);
5533
- }
5534
- h1 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: 0; }
5535
- h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: 0; }
5536
- p { margin: 8px 0 0; color: var(--muted); }
5537
- code { background: #eceae2; border-radius: 4px; padding: 2px 6px; }
5538
- button {
5539
- appearance: none;
5540
- border: 1px solid var(--line);
5541
- background: var(--panel);
5542
- color: var(--text);
5543
- border-radius: 6px;
5544
- padding: 8px 12px;
5545
- cursor: pointer;
5546
- }
5547
- button:hover { border-color: var(--accent); }
5548
- .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
5549
- .grid {
5550
- display: grid;
5551
- grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
5552
- gap: 12px;
5553
- margin: 24px 0;
5554
- }
5555
- .metric {
5556
- background: var(--panel);
5557
- border: 1px solid var(--line);
5558
- border-radius: 8px;
5559
- padding: 16px;
5560
- min-height: 112px;
5561
- }
5562
- .label { color: var(--muted); font-size: 13px; }
5563
- .value { margin-top: 10px; font-size: 22px; font-weight: 650; overflow-wrap: anywhere; line-height: 1.18; }
5564
- .note { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
5565
- .layout {
5566
- display: grid;
5567
- grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
5568
- gap: 24px;
5569
- }
5570
- .layout > * { min-width: 0; }
5571
- section { padding: 20px 0; border-top: 1px solid var(--line); }
5572
- section:first-child { border-top: 0; }
5573
- .message-list { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
5574
- .message-item { padding: 14px 16px; border-bottom: 1px solid var(--line); }
5575
- .message-item:last-child { border-bottom: 0; }
5576
- .message-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 13px; line-height: 1.4; }
5577
- .message-body { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
5578
- table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
5579
- th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
5580
- th { color: var(--muted); font-size: 13px; font-weight: 600; }
5581
- tr:last-child td { border-bottom: 0; }
5582
- .message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
5583
- .id-text, .path { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 13px; }
5584
- .compact-table th:first-child, .compact-table td:first-child { width: 120px; }
5585
- .compact-table th:nth-child(2), .compact-table td:nth-child(2) { width: 180px; }
5586
- .status-ok { color: var(--accent); }
5587
- .status-warn { color: var(--warn); }
5588
- .empty { color: var(--muted); padding: 18px; background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; }
5589
- .status-line { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: right; }
5590
- @media (max-width: 900px) {
5591
- header, .layout { display: block; }
5592
- .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
5593
- header button { margin-top: 16px; }
5594
- }
5595
- @media (max-width: 560px) {
5596
- main { padding: 24px 16px 36px; }
5597
- .grid { grid-template-columns: 1fr; }
5598
- }
5599
- </style>
5600
- </head>
5601
- <body>
5602
- <main>
5603
- <header>
5515
+ <head>
5516
+ <meta charset="utf-8" />
5517
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
5518
+ <meta name="color-scheme" content="dark" />
5519
+ <title>ChatterCatcher</title>
5520
+ <style>
5521
+ :root {
5522
+ --bg-primary: #0a0a0f;
5523
+ --bg-secondary: #12121a;
5524
+ --bg-tertiary: #1a1a28;
5525
+ --glass-bg: rgba(255,255,255,0.05);
5526
+ --glass-border: rgba(255,255,255,0.1);
5527
+ --glass-border-hover: rgba(255,255,255,0.2);
5528
+ --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
5529
+ --text-primary: #f0f0f5;
5530
+ --text-secondary: #a0a0b0;
5531
+ --text-muted: #6e6e80;
5532
+ --accent: #64d2ff;
5533
+ --accent-hover: #7dd8ff;
5534
+ --success: #30d158;
5535
+ --warning: #ff9f0a;
5536
+ --danger: #ff453a;
5537
+ --radius-sm: 8px;
5538
+ --radius-md: 12px;
5539
+ --radius-lg: 16px;
5540
+ --radius-xl: 24px;
5541
+ --space-xs: 4px;
5542
+ --space-sm: 8px;
5543
+ --space-md: 16px;
5544
+ --space-lg: 24px;
5545
+ --space-xl: 32px;
5546
+ --space-2xl: 48px;
5547
+ --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
5548
+ --font-mono: "SF Mono","Menlo","Consolas",monospace;
5549
+ }
5550
+ * { box-sizing: border-box; margin: 0; padding: 0; }
5551
+ body {
5552
+ font-family: var(--font-sans);
5553
+ background: var(--bg-primary);
5554
+ color: var(--text-primary);
5555
+ line-height: 1.6;
5556
+ -webkit-font-smoothing: antialiased;
5557
+ overflow-x: hidden;
5558
+ min-height: 100vh;
5559
+ }
5560
+ .glass {
5561
+ background: var(--glass-bg);
5562
+ backdrop-filter: blur(20px) saturate(180%);
5563
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
5564
+ border: 1px solid var(--glass-border);
5565
+ border-radius: var(--radius-lg);
5566
+ box-shadow: var(--glass-shadow);
5567
+ transition: all 0.3s ease;
5568
+ }
5569
+ .glass:hover { border-color: var(--glass-border-hover); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
5570
+ .gradient-bg {
5571
+ background: linear-gradient(135deg,#0a0a0f 0%,#12121a 50%,#1a1a28 100%);
5572
+ min-height: 100vh;
5573
+ }
5574
+ .sidebar {
5575
+ position: fixed; left: 0; top: 0; width: 260px; height: 100vh;
5576
+ padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); z-index: 100;
5577
+ background: linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 100%);
5578
+ backdrop-filter: blur(40px) saturate(200%);
5579
+ -webkit-backdrop-filter: blur(40px) saturate(200%);
5580
+ border-right: 1px solid var(--glass-border);
5581
+ }
5582
+ .sidebar-logo {
5583
+ display: flex; align-items: center; gap: var(--space-sm);
5584
+ padding: var(--space-md); font-size: 20px; font-weight: 700;
5585
+ color: var(--text-primary); margin-bottom: var(--space-md);
5586
+ }
5587
+ .logo-icon {
5588
+ width: 36px; height: 36px;
5589
+ background: linear-gradient(135deg,var(--accent),#5e60ce);
5590
+ border-radius: var(--radius-md);
5591
+ display: flex; align-items: center; justify-content: center;
5592
+ box-shadow: 0 4px 16px rgba(100,210,255,0.3);
5593
+ }
5594
+ .sidebar-nav { display: flex; flex-direction: column; gap: var(--space-xs); }
5595
+ .nav-item {
5596
+ display: flex; align-items: center; gap: var(--space-sm);
5597
+ padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
5598
+ color: var(--text-secondary); text-decoration: none; cursor: pointer;
5599
+ transition: all 0.2s ease; border: none; background: none;
5600
+ font-size: 14px; font-family: inherit; width: 100%; text-align: left;
5601
+ }
5602
+ .nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
5603
+ .nav-item.active {
5604
+ background: rgba(100,210,255,0.15); color: var(--accent);
5605
+ box-shadow: 0 0 20px rgba(100,210,255,0.1);
5606
+ }
5607
+ .nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
5608
+ .main-content { margin-left: 260px; min-height: 100vh; padding: var(--space-xl); }
5609
+ .page-header { margin-bottom: var(--space-xl); }
5610
+ .page-title {
5611
+ font-size: 36px; font-weight: 700; letter-spacing: -0.03em;
5612
+ margin-bottom: var(--space-sm);
5613
+ background: linear-gradient(135deg,var(--text-primary),var(--accent));
5614
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
5615
+ }
5616
+ .page-subtitle { color: var(--text-secondary); font-size: 15px; }
5617
+ .metrics-grid {
5618
+ display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
5619
+ gap: var(--space-md); margin-bottom: var(--space-xl);
5620
+ }
5621
+ .metric-card {
5622
+ padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm);
5623
+ position: relative; overflow: hidden;
5624
+ }
5625
+ .metric-card::before {
5626
+ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
5627
+ background: linear-gradient(90deg,var(--accent),transparent); opacity: 0.5;
5628
+ }
5629
+ .metric-value { font-size: 40px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
5630
+ .metric-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
5631
+ .metric-note { font-size: 13px; color: var(--text-secondary); margin-top: var(--space-xs); }
5632
+ .content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); }
5633
+ .content-panel { padding: var(--space-lg); }
5634
+ .panel-header {
5635
+ display: flex; justify-content: space-between; align-items: center;
5636
+ margin-bottom: var(--space-lg); padding-bottom: var(--space-md);
5637
+ border-bottom: 1px solid var(--glass-border);
5638
+ }
5639
+ .panel-title { font-size: 18px; font-weight: 600; }
5640
+ .message-list { display: flex; flex-direction: column; gap: var(--space-sm); }
5641
+ .message-card {
5642
+ padding: var(--space-md); border-radius: var(--radius-md);
5643
+ background: rgba(255,255,255,0.03); border: 1px solid transparent;
5644
+ transition: all 0.25s ease; cursor: pointer;
5645
+ }
5646
+ .message-card:hover { background: rgba(255,255,255,0.06); border-color: var(--glass-border); transform: translateX(4px); }
5647
+ .message-meta {
5648
+ display: flex; align-items: center; gap: var(--space-md);
5649
+ color: var(--text-muted); font-size: 12px; margin-bottom: var(--space-xs); flex-wrap: wrap;
5650
+ }
5651
+ .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; }
5652
+ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
5653
+ .status-dot.online { background: var(--success); box-shadow: 0 0 8px var(--success); }
5654
+ .status-dot.offline { background: var(--danger); }
5655
+ .status-dot.warning { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
5656
+ .status-dot.pending { background: var(--text-muted); }
5657
+ .btn {
5658
+ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
5659
+ padding: 10px var(--space-md); border-radius: var(--radius-md);
5660
+ border: 1px solid var(--glass-border); background: var(--glass-bg);
5661
+ color: var(--text-primary); font-family: inherit; font-size: 14px;
5662
+ cursor: pointer; transition: all 0.2s ease; text-decoration: none;
5663
+ }
5664
+ .btn:hover { background: rgba(255,255,255,0.1); border-color: var(--glass-border-hover); transform: translateY(-1px); }
5665
+ .btn-primary {
5666
+ background: linear-gradient(135deg,var(--accent),#5e60ce); color: white; border: none;
5667
+ font-weight: 600; box-shadow: 0 4px 16px rgba(100,210,255,0.3);
5668
+ }
5669
+ .btn-primary:hover {
5670
+ background: linear-gradient(135deg,var(--accent-hover),#6b6dd8);
5671
+ box-shadow: 0 6px 20px rgba(100,210,255,0.4); transform: translateY(-1px);
5672
+ }
5673
+ .btn-danger { background: rgba(255,69,58,0.15); color: var(--danger); border-color: rgba(255,69,58,0.3); }
5674
+ .btn-danger:hover { background: rgba(255,69,58,0.25); }
5675
+ .btn-sm { padding: 6px var(--space-sm); font-size: 13px; }
5676
+ .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
5677
+ .tag {
5678
+ display: inline-flex; align-items: center; padding: 2px 10px;
5679
+ border-radius: 20px; font-size: 12px; font-weight: 500;
5680
+ background: rgba(255,255,255,0.06); color: var(--text-secondary);
5681
+ }
5682
+ .tag-success { background: rgba(48,209,88,0.15); color: var(--success); }
5683
+ .tag-warning { background: rgba(255,159,10,0.15); color: var(--warning); }
5684
+ .tag-error { background: rgba(255,69,58,0.15); color: var(--danger); }
5685
+ .tag-info { background: rgba(100,210,255,0.15); color: var(--accent); }
5686
+ .empty-state { text-align: center; padding: var(--space-2xl); color: var(--text-muted); }
5687
+ .empty-state svg { width: 48px; height: 48px; margin: 0 auto var(--space-md); opacity: 0.3; }
5688
+ .skeleton {
5689
+ 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%);
5690
+ background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);
5691
+ }
5692
+ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
5693
+ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
5694
+ @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
5695
+ @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
5696
+ .view { display: none; animation: fadeIn 0.35s ease; }
5697
+ .view.active { display: block; }
5698
+ .search-box { position: relative; width: 100%; max-width: 400px; }
5699
+ .search-box input {
5700
+ width: 100%; padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
5701
+ border-radius: var(--radius-md); border: 1px solid var(--glass-border);
5702
+ background: var(--glass-bg); color: var(--text-primary); font-family: inherit;
5703
+ font-size: 14px; outline: none; transition: all 0.2s ease;
5704
+ }
5705
+ .search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(100,210,255,0.1); }
5706
+ .search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
5707
+ .data-table { width: 100%; border-collapse: collapse; }
5708
+ .data-table th {
5709
+ text-align: left; padding: var(--space-sm) var(--space-md); color: var(--text-muted);
5710
+ font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
5711
+ border-bottom: 1px solid var(--glass-border);
5712
+ }
5713
+ .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; }
5714
+ .data-table tr:hover td { background: rgba(255,255,255,0.02); }
5715
+ .data-table tr:last-child td { border-bottom: none; }
5716
+ .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
5717
+ .truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
5718
+ .truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
5719
+ .flex { display: flex; } .flex-col { flex-direction: column; }
5720
+ .items-center { align-items: center; } .justify-between { justify-content: space-between; }
5721
+ .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); }
5722
+ .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); }
5723
+ .mb-md { margin-bottom: var(--space-md); }
5724
+ .toast {
5725
+ padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md);
5726
+ background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border);
5727
+ box-shadow: 0 8px 32px rgba(0,0,0,0.4); color: var(--text-primary); font-size: 14px;
5728
+ max-width: 400px; animation: slideIn 0.3s ease;
5729
+ display: flex; align-items: center; gap: var(--space-sm);
5730
+ }
5731
+ .toast-success { border-color: rgba(48,209,88,0.3); background: rgba(48,209,88,0.1); }
5732
+ .toast-error { border-color: rgba(255,69,58,0.3); background: rgba(255,69,58,0.1); }
5733
+ .toast-warning { border-color: rgba(255,159,10,0.3); background: rgba(255,159,10,0.1); }
5734
+ .episode-card {
5735
+ padding: var(--space-md); border-radius: var(--radius-md);
5736
+ background: rgba(255,255,255,0.03); border: 1px solid transparent; transition: all 0.25s ease;
5737
+ }
5738
+ .episode-card:hover { background: rgba(255,255,255,0.06); border-color: var(--glass-border); }
5739
+ .qa-card {
5740
+ padding: var(--space-md); border-radius: var(--radius-md);
5741
+ background: rgba(255,255,255,0.03); border-left: 3px solid var(--accent); margin-bottom: var(--space-sm);
5742
+ }
5743
+ .qa-question { font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); font-size: 14px; }
5744
+ .qa-answer { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
5745
+ .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); }
5746
+ .section-title { font-size: 24px; font-weight: 700; }
5747
+ .tabs {
5748
+ display: flex; gap: var(--space-xs); padding: 4px;
5749
+ background: rgba(255,255,255,0.03); border-radius: var(--radius-md); border: 1px solid var(--glass-border);
5750
+ }
5751
+ .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; }
5752
+ .tab:hover { color: var(--text-primary); }
5753
+ .tab.active { background: rgba(255,255,255,0.08); color: var(--text-primary); font-weight: 500; }
5754
+ .file-card {
5755
+ padding: var(--space-md); border-radius: var(--radius-md);
5756
+ background: rgba(255,255,255,0.03); border: 1px solid transparent; transition: all 0.25s ease; cursor: pointer;
5757
+ }
5758
+ .file-card:hover { background: rgba(255,255,255,0.06); border-color: var(--glass-border); }
5759
+ .file-icon {
5760
+ width: 40px; height: 40px; border-radius: var(--radius-sm);
5761
+ background: linear-gradient(135deg,var(--accent),#5e60ce);
5762
+ display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-sm);
5763
+ }
5764
+ .timeline { position: relative; padding-left: 28px; }
5765
+ .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg,var(--accent),transparent); opacity: 0.3; }
5766
+ .timeline-item { position: relative; padding-bottom: var(--space-lg); }
5767
+ .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); }
5768
+ .timeline-date { font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-xs); }
5769
+ .timeline-content { color: var(--text-secondary); font-size: 14px; }
5770
+ .status-bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); margin-bottom: var(--space-lg); }
5771
+ .status-item { display: flex; align-items: center; gap: var(--space-sm); }
5772
+ .status-label { font-size: 13px; color: var(--text-muted); }
5773
+ .status-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }
5774
+ .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-md); }
5775
+ .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }
5776
+ .settings-group { padding: var(--space-lg); margin-bottom: var(--space-lg); }
5777
+ .settings-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--glass-border); }
5778
+ .settings-item:last-child { border-bottom: none; }
5779
+ .settings-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
5780
+ .settings-value { font-size: 14px; color: var(--text-secondary); font-family: var(--font-mono); }
5781
+ .settings-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
5782
+ .mobile-nav {
5783
+ display: none; position: fixed; bottom: 0; left: 0; right: 0;
5784
+ padding: var(--space-sm); z-index: 100; flex-direction: row; justify-content: space-around;
5785
+ border-top: 1px solid var(--glass-border);
5786
+ background: linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.02) 100%);
5787
+ backdrop-filter: blur(40px) saturate(200%);
5788
+ }
5789
+ .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; }
5790
+ .mobile-nav-item.active { color: var(--accent); }
5791
+ .pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
5792
+ @media (max-width: 1024px) {
5793
+ .sidebar { width: 72px; padding: var(--space-sm); }
5794
+ .sidebar-logo span, .nav-item span { display: none; }
5795
+ .nav-item { justify-content: center; padding: var(--space-sm); }
5796
+ .main-content { margin-left: 72px; padding: var(--space-lg); }
5797
+ .content-grid { grid-template-columns: 1fr; }
5798
+ .metrics-grid { grid-template-columns: repeat(2,1fr); }
5799
+ }
5800
+ @media (max-width: 768px) {
5801
+ .sidebar { display: none; }
5802
+ .mobile-nav { display: flex; }
5803
+ .main-content { margin-left: 0; margin-bottom: 80px; padding: var(--space-md); }
5804
+ .page-title { font-size: 28px; }
5805
+ .metrics-grid { grid-template-columns: repeat(2,1fr); }
5806
+ .grid-2, .grid-3 { grid-template-columns: 1fr; }
5807
+ .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
5808
+ }
5809
+ @media (prefers-reduced-motion: reduce) {
5810
+ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
5811
+ }
5812
+ ::-webkit-scrollbar { width: 8px; height: 8px; }
5813
+ ::-webkit-scrollbar-track { background: transparent; }
5814
+ ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
5815
+ ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
5816
+ .highlight-text { background: rgba(100,210,255,0.15); padding: 0 4px; border-radius: 3px; color: var(--accent); }
5817
+ </style>
5818
+ </head>
5819
+ <body class="gradient-bg">
5820
+ <aside class="sidebar">
5821
+ <div class="sidebar-logo">
5822
+ <div class="logo-icon">
5823
+ <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>
5824
+ </div>
5825
+ <span>ChatterCatcher</span>
5826
+ </div>
5827
+ <nav class="sidebar-nav">
5828
+ <button class="nav-item active" data-view="overview">
5829
+ <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>
5830
+ <span>\u6982\u89C8</span>
5831
+ </button>
5832
+ <button class="nav-item" data-view="messages">
5833
+ <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>
5834
+ <span>\u6D88\u606F</span>
5835
+ </button>
5836
+ <button class="nav-item" data-view="episodes">
5837
+ <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>
5838
+ <span>\u4F1A\u8BDD\u8BB0\u5FC6</span>
5839
+ </button>
5840
+ <button class="nav-item" data-view="files">
5841
+ <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>
5842
+ <span>\u6587\u4EF6\u5E93</span>
5843
+ </button>
5844
+ <button class="nav-item" data-view="tasks">
5845
+ <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>
5846
+ <span>\u4EFB\u52A1</span>
5847
+ </button>
5848
+ <button class="nav-item" data-view="qa-logs">
5849
+ <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>
5850
+ <span>\u95EE\u7B54\u65E5\u5FD7</span>
5851
+ </button>
5852
+ <button class="nav-item" data-view="settings">
5853
+ <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>
5854
+ <span>\u8BBE\u7F6E</span>
5855
+ </button>
5856
+ </nav>
5857
+ <div style="margin-top: auto; padding: var(--space-md);">
5858
+ <div style="display: flex; align-items: center; gap: var(--space-sm); font-size: 12px; color: var(--text-muted);">
5859
+ <span class="status-dot online" id="gateway-indicator"></span>
5860
+ <span id="gateway-status-text">Gateway \u8FD0\u884C\u4E2D</span>
5861
+ </div>
5862
+ <div style="font-size: 11px; color: var(--text-muted); margin-top: var(--space-xs); opacity: 0.7;" id="version-text">v0.0.0</div>
5863
+ </div>
5864
+ </aside>
5865
+
5866
+ <nav class="mobile-nav glass">
5867
+ <button class="mobile-nav-item active" data-view="overview">
5868
+ <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>
5869
+ <span>\u6982\u89C8</span>
5870
+ </button>
5871
+ <button class="mobile-nav-item" data-view="messages">
5872
+ <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>
5873
+ <span>\u6D88\u606F</span>
5874
+ </button>
5875
+ <button class="mobile-nav-item" data-view="files">
5876
+ <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>
5877
+ <span>\u6587\u4EF6</span>
5878
+ </button>
5879
+ <button class="mobile-nav-item" data-view="tasks">
5880
+ <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>
5881
+ <span>\u4EFB\u52A1</span>
5882
+ </button>
5883
+ <button class="mobile-nav-item" data-view="settings">
5884
+ <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>
5885
+ <span>\u8BBE\u7F6E</span>
5886
+ </button>
5887
+ </nav>
5888
+
5889
+ <main class="main-content">
5890
+ <div class="view active" id="view-overview">
5891
+ <div class="page-header">
5892
+ <h1 class="page-title">Dashboard</h1>
5893
+ <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>
5894
+ </div>
5895
+ <div class="metrics-grid" id="metrics"></div>
5896
+ <div class="content-grid">
5604
5897
  <div>
5605
- <h1>ChatterCatcher</h1>
5606
- <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>
5898
+ <div class="content-panel glass">
5899
+ <div class="panel-header">
5900
+ <h2 class="panel-title">\u6700\u8FD1\u6D88\u606F</h2>
5901
+ <button class="btn btn-sm" onclick="navigateTo('messages')">\u67E5\u770B\u5168\u90E8</button>
5902
+ </div>
5903
+ <div id="recent-messages"></div>
5904
+ </div>
5905
+ <div class="content-panel glass mt-lg">
5906
+ <div class="panel-header">
5907
+ <h2 class="panel-title">\u4F1A\u8BDD\u8BB0\u5FC6</h2>
5908
+ <button class="btn btn-sm" onclick="navigateTo('episodes')">\u67E5\u770B\u5168\u90E8</button>
5909
+ </div>
5910
+ <div id="recent-episodes"></div>
5911
+ </div>
5607
5912
  </div>
5608
5913
  <div>
5609
- <div class="actions">
5610
- <button id="process-messages" type="button">\u7ACB\u5373\u5904\u7406</button>
5914
+ <div class="content-panel glass">
5915
+ <div class="panel-header"><h2 class="panel-title">\u7CFB\u7EDF\u72B6\u6001</h2></div>
5916
+ <div id="system-status"></div>
5917
+ </div>
5918
+ <div class="content-panel glass mt-lg">
5919
+ <div class="panel-header"><h2 class="panel-title">\u5FEB\u6377\u64CD\u4F5C</h2></div>
5920
+ <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
5921
+ <button class="btn btn-primary" id="btn-process-messages" onclick="processNow()">
5922
+ <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>
5923
+ \u7ACB\u5373\u5904\u7406\u6D88\u606F
5924
+ </button>
5925
+ <button class="btn" onclick="navigateTo('settings')">
5926
+ <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>
5927
+ \u7CFB\u7EDF\u8BBE\u7F6E
5928
+ </button>
5929
+ </div>
5930
+ </div>
5931
+ <div class="content-panel glass mt-lg">
5932
+ <div class="panel-header"><h2 class="panel-title">RAG \u68C0\u7D22</h2></div>
5933
+ <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.8;">
5934
+ <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>
5935
+ <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>
5936
+ <div style="display: flex; align-items: center; gap: var(--space-sm);"><span class="tag tag-success">\u6DF7\u5408</span><span>Hybrid RAG</span></div>
5937
+ </div>
5611
5938
  </div>
5612
- <div id="action-status" class="status-line"></div>
5613
5939
  </div>
5614
- </header>
5940
+ </div>
5941
+ </div>
5615
5942
 
5616
- <div class="grid" id="metrics"></div>
5943
+ <div class="view" id="view-messages">
5944
+ <div class="section-header">
5945
+ <div><h1 class="section-title">\u6D88\u606F</h1><p class="page-subtitle">\u7FA4\u804A\u6D88\u606F\u5386\u53F2</p></div>
5946
+ <div class="search-box">
5947
+ <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>
5948
+ <input type="text" id="message-search" placeholder="\u641C\u7D22\u6D88\u606F..." oninput="filterMessages()" />
5949
+ </div>
5950
+ </div>
5951
+ <div class="content-panel glass"><div id="messages-list"></div></div>
5952
+ </div>
5617
5953
 
5618
- <div class="layout">
5619
- <div>
5620
- <section>
5621
- <h2>\u6700\u8FD1\u6D88\u606F</h2>
5622
- <div id="messages" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
5623
- </section>
5624
- <section>
5625
- <h2>\u4F1A\u8BDD\u8BB0\u5FC6</h2>
5626
- <div id="episodes" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
5627
- </section>
5628
- <section>
5629
- <h2>\u95EE\u7B54\u65E5\u5FD7</h2>
5630
- <div id="qa-logs" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
5631
- </section>
5954
+ <div class="view" id="view-episodes">
5955
+ <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>
5956
+ <div class="content-panel glass"><div id="episodes-list"></div></div>
5957
+ </div>
5958
+
5959
+ <div class="view" id="view-files">
5960
+ <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>
5961
+ <div id="files-list"></div>
5962
+ </div>
5963
+
5964
+ <div class="view" id="view-tasks">
5965
+ <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>
5966
+ <div class="tabs" style="margin-bottom: var(--space-lg);">
5967
+ <button class="tab active" data-tab="file-jobs" onclick="switchTab('file-jobs')">\u6587\u4EF6\u89E3\u6790</button>
5968
+ <button class="tab" data-tab="cron-jobs" onclick="switchTab('cron-jobs')">\u5B9A\u65F6\u4EFB\u52A1</button>
5969
+ </div>
5970
+ <div class="content-panel glass" id="tab-file-jobs"><div id="file-jobs-list"></div></div>
5971
+ <div class="content-panel glass" id="tab-cron-jobs" style="display: none;"><div id="cron-jobs-list"></div></div>
5972
+ </div>
5973
+
5974
+ <div class="view" id="view-qa-logs">
5975
+ <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>
5976
+ <div class="content-panel glass"><div id="qa-logs-list"></div></div>
5977
+ </div>
5978
+
5979
+ <div class="view" id="view-settings">
5980
+ <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>
5981
+ <div class="settings-group glass" id="settings-config"></div>
5982
+ <div class="settings-group glass">
5983
+ <h3 style="font-size: 16px; font-weight: 600; margin-bottom: var(--space-md);">\u64CD\u4F5C</h3>
5984
+ <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
5985
+ <button class="btn btn-primary" onclick="processNow()">
5986
+ <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>
5987
+ \u7ACB\u5373\u5904\u7406\u6D88\u606F\u7D22\u5F15
5988
+ </button>
5989
+ <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);">
5990
+ \u8FD0\u884C CLI \u547D\u4EE4\u8FDB\u884C\u66F4\u591A\u64CD\u4F5C\uFF1A
5991
+ <div style="font-family: var(--font-mono); margin-top: var(--space-xs); line-height: 1.8;">
5992
+ chattercatcher settings<br/>
5993
+ chattercatcher doctor<br/>
5994
+ chattercatcher index rebuild<br/>
5995
+ chattercatcher files add &lt;path...&gt;<br/>
5996
+ chattercatcher export
5997
+ </div>
5998
+ </div>
5632
5999
  </div>
5633
- <aside>
5634
- <section>
5635
- <h2>\u7FA4\u804A</h2>
5636
- <div id="chats" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
5637
- </section>
5638
- <section>
5639
- <h2>\u6587\u4EF6\u5E93</h2>
5640
- <div id="files" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
5641
- </section>
5642
- <section>
5643
- <h2>\u89E3\u6790\u4EFB\u52A1</h2>
5644
- <div id="file-jobs" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
5645
- </section>
5646
- <section>
5647
- <h2>\u5B9A\u65F6\u4EFB\u52A1</h2>
5648
- <div id="cron-jobs" class="empty">\u6B63\u5728\u8BFB\u53D6...</div>
5649
- </section>
5650
- <section>
5651
- <h2>\u672C\u5730\u64CD\u4F5C</h2>
5652
- <p><code>chattercatcher settings</code> \u4FEE\u6539\u914D\u7F6E\u3002</p>
5653
- <p><code>chattercatcher files add &lt;path...&gt;</code> \u5BFC\u5165\u6587\u672C\u3001DOCX \u6216 PDF \u6587\u4EF6\u3002</p>
5654
- <p><code>chattercatcher doctor</code> \u68C0\u67E5\u98DE\u4E66\u3001\u6A21\u578B\u3001RAG \u548C\u672C\u5730\u5B58\u50A8\u3002</p>
5655
- </section>
5656
- </aside>
5657
6000
  </div>
5658
- </main>
5659
- <script>
5660
- const metrics = document.querySelector("#metrics");
5661
- const messages = document.querySelector("#messages");
5662
- const episodes = document.querySelector("#episodes");
5663
- const chats = document.querySelector("#chats");
5664
- const files = document.querySelector("#files");
5665
- const fileJobs = document.querySelector("#file-jobs");
5666
- const cronJobs = document.querySelector("#cron-jobs");
5667
- const qaLogs = document.querySelector("#qa-logs");
5668
- const processMessages = document.querySelector("#process-messages");
5669
- const actionStatus = document.querySelector("#action-status");
6001
+ </div>
6002
+ </main>
5670
6003
 
5671
- let webActionToken = "__WEB_ACTION_TOKEN__";
6004
+ <div id="toast-container" style="position: fixed; top: 24px; right: 24px; z-index: 1001; display: flex; flex-direction: column; gap: 12px;"></div>
5672
6005
 
5673
- function fmt(value) {
5674
- return value == null || value === "" ? "-" : String(value);
5675
- }
6006
+ <script>
6007
+ let currentView = "overview";
6008
+ let allMessages = [];
6009
+ let allEpisodes = [];
6010
+ let allFiles = [];
6011
+ let allFileJobs = [];
6012
+ let allCronJobs = [];
6013
+ let allQaLogs = [];
6014
+ let statusData = null;
5676
6015
 
5677
- function escapeHtml(value) {
5678
- return fmt(value)
5679
- .replaceAll("&", "&amp;")
5680
- .replaceAll("<", "&lt;")
5681
- .replaceAll(">", "&gt;")
5682
- .replaceAll('"', "&quot;");
5683
- }
6016
+ function fmt(value) { return value == null || value === "" ? "-" : String(value); }
6017
+ function escapeHtml(value) {
6018
+ return fmt(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
6019
+ }
6020
+ function isOpaqueId(value) { return /^(ou|oc|om|cli|on|un|uid)_?[a-z0-9]+/i.test(fmt(value)); }
6021
+ function formatDateTime(value) {
6022
+ var date = new Date(value);
6023
+ if (Number.isNaN(date.getTime())) return fmt(value);
6024
+ var pad = function(n) { return String(n).padStart(2, "0"); };
6025
+ return date.getFullYear() + "/" + pad(date.getMonth()+1) + "/" + pad(date.getDate()) + " " + pad(date.getHours()) + ":" + pad(date.getMinutes());
6026
+ }
6027
+ function displaySender(value) { return isOpaqueId(value) ? "\u7FA4\u6210\u5458" : fmt(value); }
6028
+ function displayChatName(value, platform) { return !isOpaqueId(value) ? fmt(value) : (platform === "feishu" ? "\u98DE\u4E66\u7FA4\u804A" : "\u7FA4\u804A"); }
5684
6029
 
5685
- function isOpaqueId(value) {
5686
- return /^(ou|oc|om|cli|on|un|uid)_?[a-z0-9]+/i.test(fmt(value));
5687
- }
6030
+ function showToast(message, type) {
6031
+ type = type || "info";
6032
+ var container = document.getElementById("toast-container");
6033
+ var toast = document.createElement("div");
6034
+ toast.className = "toast toast-" + type;
6035
+ toast.textContent = message;
6036
+ container.appendChild(toast);
6037
+ setTimeout(function() {
6038
+ toast.style.opacity = "0"; toast.style.transform = "translateX(10px)";
6039
+ setTimeout(function() { toast.remove(); }, 300);
6040
+ }, 3000);
6041
+ }
5688
6042
 
5689
- function formatDateTime(value) {
5690
- const date = new Date(value);
5691
- if (Number.isNaN(date.getTime())) return fmt(value);
5692
- const pad = (input) => String(input).padStart(2, "0");
5693
- return [
5694
- date.getFullYear(),
5695
- pad(date.getMonth() + 1),
5696
- pad(date.getDate()),
5697
- ].join("/") + " " + [
5698
- pad(date.getHours()),
5699
- pad(date.getMinutes()),
5700
- pad(date.getSeconds()),
5701
- ].join(":");
5702
- }
6043
+ function navigateTo(view) {
6044
+ document.querySelectorAll(".view").forEach(function(el) { el.classList.remove("active"); });
6045
+ document.querySelectorAll(".nav-item, .mobile-nav-item").forEach(function(el) { el.classList.remove("active"); });
6046
+ document.getElementById("view-" + view).classList.add("active");
6047
+ document.querySelectorAll('[data-view="' + view + '"]').forEach(function(el) { el.classList.add("active"); });
6048
+ currentView = view;
6049
+ window.scrollTo(0, 0);
6050
+ if (view === "messages") renderMessagesView();
6051
+ if (view === "episodes") renderEpisodesView();
6052
+ if (view === "files") renderFilesView();
6053
+ if (view === "tasks") renderTasksView();
6054
+ if (view === "qa-logs") renderQaLogsView();
6055
+ }
5703
6056
 
5704
- function displaySender(value) {
5705
- return isOpaqueId(value) ? "\u7FA4\u6210\u5458" : fmt(value);
5706
- }
6057
+ document.querySelectorAll(".nav-item, .mobile-nav-item").forEach(function(el) {
6058
+ el.addEventListener("click", function() { navigateTo(el.dataset.view); });
6059
+ });
5707
6060
 
5708
- function displayChatName(value, platform) {
5709
- if (!isOpaqueId(value)) return fmt(value);
5710
- return platform === "feishu" ? "\u98DE\u4E66\u7FA4\u804A" : "\u7FA4\u804A";
5711
- }
6061
+ function switchTab(tab) {
6062
+ document.querySelectorAll(".tab").forEach(function(el) { el.classList.remove("active"); });
6063
+ document.querySelector('[data-tab="' + tab + '"]').classList.add("active");
6064
+ document.getElementById("tab-file-jobs").style.display = tab === "file-jobs" ? "block" : "none";
6065
+ document.getElementById("tab-cron-jobs").style.display = tab === "cron-jobs" ? "block" : "none";
6066
+ if (tab === "file-jobs") renderFileJobs();
6067
+ if (tab === "cron-jobs") renderCronJobs();
6068
+ }
5712
6069
 
5713
- function formatGatewayValue(gateway) {
5714
- if (gateway.connection === "running") return "\u8FD0\u884C\u4E2D";
5715
- if (!gateway.configured) return "\u672A\u914D\u7F6E";
5716
- return "\u5F85\u542F\u52A8";
6070
+ async function fetchJson(path) {
6071
+ var response = await fetch(path);
6072
+ if (!response.ok) {
6073
+ var body = await response.text();
6074
+ throw new Error(path + " " + response.status + " " + body);
5717
6075
  }
6076
+ return response.json();
6077
+ }
5718
6078
 
5719
- function formatGatewayNote(gateway) {
5720
- if (gateway.connection === "running" && gateway.pid) return "PID " + gateway.pid;
5721
- return "\u98DE\u4E66\u957F\u8FDE\u63A5";
6079
+ async function postJson(path, options) {
6080
+ var response = await fetch(path, Object.assign({ method: "POST" }, options || {}));
6081
+ var result = await response.json();
6082
+ if (!response.ok) {
6083
+ throw new Error(result.message || result.reason || "\u8BF7\u6C42\u5931\u8D25");
5722
6084
  }
6085
+ return result;
6086
+ }
5723
6087
 
5724
- function renderMetrics(status) {
5725
- const gatewayClass = status.gateway.configured ? "status-ok" : "status-warn";
5726
- metrics.innerHTML = [
5727
- ["Gateway", formatGatewayValue(status.gateway), formatGatewayNote(status.gateway), gatewayClass],
5728
- ["\u7248\u672C", status.version || "unknown", "\u5F53\u524D\u8FD0\u884C\u7248\u672C", ""],
5729
- ["\u7FA4\u804A", status.data.chats, "\u672C\u5730\u7FA4\u804A\u6570", ""],
5730
- ["\u6D88\u606F", status.data.messages, "\u5DF2\u5165\u5E93\u6D88\u606F", ""],
5731
- ["\u4F1A\u8BDD\u8BB0\u5FC6", status.data.episodes, "\u5DF2\u751F\u6210\u6458\u8981", ""],
5732
- ["\u6587\u4EF6", status.data.files, "\u6587\u4EF6\u77E5\u8BC6\u6E90", ""],
5733
- ].map(([label, value, note, extra]) => \`
5734
- <div class="metric">
5735
- <div class="label">\${escapeHtml(label)}</div>
5736
- <div class="value \${extra}">\${escapeHtml(value)}</div>
5737
- <div class="note">\${escapeHtml(note)}</div>
5738
- </div>
5739
- \`).join("");
6088
+ async function deleteJson(path) {
6089
+ var response = await fetch(path, { method: "DELETE" });
6090
+ var result = await response.json();
6091
+ if (!response.ok) {
6092
+ throw new Error(result.message || result.reason || "\u8BF7\u6C42\u5931\u8D25");
5740
6093
  }
6094
+ return result;
6095
+ }
5741
6096
 
5742
- function renderMessages(items) {
5743
- if (items.length === 0) {
5744
- messages.className = "empty";
5745
- 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";
5746
- return;
5747
- }
5748
- messages.className = "";
5749
- messages.innerHTML = \`
5750
- <div class="message-list">
5751
- \${items.map((item) => \`
5752
- <article class="message-item">
5753
- <div class="message-meta">
5754
- <span>\${escapeHtml(formatDateTime(item.sentAt))}</span>
5755
- <span>\${escapeHtml(displaySender(item.senderName))}</span>
5756
- <span>\${escapeHtml(displayChatName(item.chatName, item.platform))}</span>
5757
- </div>
5758
- <div class="message-body">\${escapeHtml(item.text)}</div>
5759
- </article>
5760
- \`).join("")}
5761
- </div>
5762
- \`;
5763
- }
6097
+ function renderMetrics(status) {
6098
+ var gatewayClass = status.gateway.configured ? "status-dot online" : "status-dot offline";
6099
+ var gatewayText = status.gateway.connection === "running" ? "\u8FD0\u884C\u4E2D" : (!status.gateway.configured ? "\u672A\u914D\u7F6E" : "\u5F85\u542F\u52A8");
6100
+ var metricsHtml = [
6101
+ ["Gateway", gatewayText, "\u98DE\u4E66\u957F\u8FDE\u63A5", gatewayClass],
6102
+ ["\u7248\u672C", status.version || "unknown", "\u5F53\u524D\u8FD0\u884C\u7248\u672C", ""],
6103
+ ["\u7FA4\u804A", status.data.chats, "\u672C\u5730\u7FA4\u804A\u6570", ""],
6104
+ ["\u6D88\u606F", status.data.messages, "\u5DF2\u5165\u5E93\u6D88\u606F", ""],
6105
+ ["\u4F1A\u8BDD\u8BB0\u5FC6", status.data.episodes, "\u5DF2\u751F\u6210\u6458\u8981", ""],
6106
+ ["\u6587\u4EF6", status.data.files, "\u6587\u4EF6\u77E5\u8BC6\u6E90", ""],
6107
+ ["\u95EE\u7B54", status.data.qaLogs, "\u95EE\u7B54\u8BB0\u5F55", ""],
6108
+ ["\u4EFB\u52A1", status.data.cronJobs, "\u5B9A\u65F6\u4EFB\u52A1", ""]
6109
+ ].map(function(item) {
6110
+ var label = item[0], value = item[1], note = item[2], dotClass = item[3];
6111
+ return '<div class="metric-card glass"><div class="metric-label">' + escapeHtml(label) + '</div>' +
6112
+ '<div class="metric-value">' + (dotClass ? '<span class="' + dotClass + '" style="margin-right:8px;"></span>' : '') + escapeHtml(value) + '</div>' +
6113
+ '<div class="metric-note">' + escapeHtml(note) + '</div></div>';
6114
+ }).join("");
6115
+ document.getElementById("metrics").innerHTML = metricsHtml;
6116
+ document.getElementById("gateway-indicator").className = gatewayClass;
6117
+ document.getElementById("gateway-status-text").textContent = "Gateway " + gatewayText;
6118
+ document.getElementById("version-text").textContent = "v" + (status.version || "unknown");
6119
+ }
5764
6120
 
5765
- function renderEpisodes(items) {
5766
- if (items.length === 0) {
5767
- episodes.className = "empty";
5768
- 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";
5769
- return;
5770
- }
5771
- episodes.className = "";
5772
- episodes.innerHTML = \`
5773
- <div class="message-list">
5774
- \${items.map((item) => \`
5775
- <article class="message-item">
5776
- <div class="message-meta">
5777
- <span>\${escapeHtml(formatDateTime(item.startedAt))} - \${escapeHtml(formatDateTime(item.endedAt))}</span>
5778
- <span>\${escapeHtml(displayChatName(item.chatName, "feishu"))}</span>
5779
- <span>\${escapeHtml(item.messageCount)} \u6761\u6D88\u606F</span>
5780
- </div>
5781
- <div class="message-body">\${escapeHtml(item.summary)}</div>
5782
- </article>
5783
- \`).join("")}
5784
- </div>
5785
- \`;
5786
- }
6121
+ function renderSystemStatus(status) {
6122
+ var gateway = status.gateway;
6123
+ var html = '<div style="display:flex;flex-direction:column;gap:var(--space-md);">';
6124
+ 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>';
6125
+ 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>';
6126
+ 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>';
6127
+ 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>';
6128
+ html += '<div class="settings-item"><div><div class="settings-label">\u5411\u91CF\u68C0\u7D22</div></div><div class="settings-value">SQLite embedding</div></div>';
6129
+ html += '</div>';
6130
+ document.getElementById("system-status").innerHTML = html;
6131
+ }
5787
6132
 
5788
- function renderChats(items) {
5789
- if (items.length === 0) {
5790
- chats.className = "empty";
5791
- chats.textContent = "\u8FD8\u6CA1\u6709\u7FA4\u804A\u8BB0\u5F55\u3002";
5792
- return;
5793
- }
5794
- chats.className = "";
5795
- chats.innerHTML = \`
5796
- <table>
5797
- <thead><tr><th>\u540D\u79F0</th><th>\u5E73\u53F0</th></tr></thead>
5798
- <tbody>
5799
- \${items.map((item) => \`
5800
- <tr>
5801
- <td><span class="id-text" title="\${escapeHtml(item.name)}">\${escapeHtml(displayChatName(item.name, item.platform))}</span></td>
5802
- <td>\${escapeHtml(item.platform)}</td>
5803
- </tr>
5804
- \`).join("")}
5805
- </tbody>
5806
- </table>
5807
- \`;
6133
+ function renderRecentMessages(items) {
6134
+ var el = document.getElementById("recent-messages");
6135
+ if (!items || items.length === 0) {
6136
+ 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>';
6137
+ return;
5808
6138
  }
5809
-
5810
- function renderFiles(items) {
5811
- if (items.length === 0) {
5812
- files.className = "empty";
5813
- 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";
5814
- return;
5815
- }
5816
- files.className = "";
5817
- files.innerHTML = \`
5818
- <table>
5819
- <thead><tr><th>\u6587\u4EF6</th><th>\u89E3\u6790\u5668</th><th>\u5B57\u7B26</th></tr></thead>
5820
- <tbody>
5821
- \${items.map((item) => \`
5822
- <tr>
5823
- <td>
5824
- <div>\${escapeHtml(item.fileName)}</div>
5825
- <div class="path" title="\${escapeHtml(item.storedPath)}">\${escapeHtml(item.storedPath)}</div>
5826
- </td>
5827
- <td>\${escapeHtml(item.parser || "unknown")}</td>
5828
- <td>\${escapeHtml(item.characters)}</td>
5829
- </tr>
5830
- \`).join("")}
5831
- </tbody>
5832
- </table>
5833
- \`;
6139
+ var html = '<div class="message-list">';
6140
+ for (var i = 0; i < Math.min(items.length, 5); i++) {
6141
+ var item = items[i];
6142
+ html += '<div class="message-card"><div class="message-meta">' +
6143
+ '<span>' + escapeHtml(formatDateTime(item.sentAt)) + '</span>' +
6144
+ '<span>' + escapeHtml(displaySender(item.senderName)) + '</span>' +
6145
+ '<span>' + escapeHtml(displayChatName(item.chatName, item.platform)) + '</span>' +
6146
+ '</div><div class="message-text">' + escapeHtml(item.text) + '</div></div>';
5834
6147
  }
6148
+ html += '</div>';
6149
+ el.innerHTML = html;
6150
+ }
5835
6151
 
5836
- function renderFileJobs(items) {
5837
- if (items.length === 0) {
5838
- fileJobs.className = "empty";
5839
- fileJobs.textContent = "\u8FD8\u6CA1\u6709\u6587\u4EF6\u89E3\u6790\u4EFB\u52A1\u3002";
5840
- return;
5841
- }
5842
- fileJobs.className = "";
5843
- fileJobs.innerHTML = \`
5844
- <table>
5845
- <thead><tr><th>\u4EFB\u52A1</th><th>\u72B6\u6001</th></tr></thead>
5846
- <tbody>
5847
- \${items.map((item) => \`
5848
- <tr>
5849
- <td>
5850
- <div>\${escapeHtml(item.fileName)}</div>
5851
- <div class="path" title="\${escapeHtml(item.id)}">ID: \${escapeHtml(item.id)}</div>
5852
- <div class="path" title="\${escapeHtml(item.error || item.storedPath)}">\${escapeHtml(item.error || item.storedPath)}</div>
5853
- </td>
5854
- <td>\${escapeHtml(item.status)}</td>
5855
- </tr>
5856
- \`).join("")}
5857
- </tbody>
5858
- </table>
5859
- \`;
6152
+ function renderRecentEpisodes(items) {
6153
+ var el = document.getElementById("recent-episodes");
6154
+ if (!items || items.length === 0) {
6155
+ el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u4F1A\u8BDD\u8BB0\u5FC6\u3002</div>';
6156
+ return;
5860
6157
  }
6158
+ var html = '<div class="message-list">';
6159
+ for (var i = 0; i < Math.min(items.length, 3); i++) {
6160
+ var item = items[i];
6161
+ html += '<div class="episode-card"><div class="message-meta">' +
6162
+ '<span>' + escapeHtml(formatDateTime(item.startedAt)) + " - " + escapeHtml(formatDateTime(item.endedAt)) + '</span>' +
6163
+ '<span>' + escapeHtml(item.messageCount) + ' \u6761\u6D88\u606F</span>' +
6164
+ '</div><div class="message-text">' + escapeHtml(item.summary) + '</div></div>';
6165
+ }
6166
+ html += '</div>';
6167
+ el.innerHTML = html;
6168
+ }
5861
6169
 
5862
- function renderCronJobs(items) {
5863
- if (items.length === 0) {
5864
- cronJobs.className = "empty";
5865
- cronJobs.textContent = "\u8FD8\u6CA1\u6709\u5B9A\u65F6\u4EFB\u52A1\u3002\u53EF\u5728\u98DE\u4E66\u7FA4\u91CC @ \u673A\u5668\u4EBA\u521B\u5EFA\u3002";
5866
- return;
5867
- }
5868
- cronJobs.className = "";
5869
- cronJobs.innerHTML = \`
5870
- <table>
5871
- <thead><tr><th>\u4EFB\u52A1</th><th>\u72B6\u6001</th></tr></thead>
5872
- <tbody>
5873
- \${items.map((item) => \`
5874
- <tr>
5875
- <td>
5876
- <div>\${escapeHtml(item.schedule)}</div>
5877
- <div class="message" title="\${escapeHtml(item.prompt)}">\${escapeHtml(item.prompt)}</div>
5878
- <div class="path" title="\${escapeHtml(item.id)}">ID: \${escapeHtml(item.id)}</div>
5879
- <div class="path" title="\${escapeHtml(item.chatId)}">\u7FA4: \${escapeHtml(item.chatId)}</div>
5880
- <div class="path">\u4E0B\u6B21: \${escapeHtml(formatDateTime(item.nextRunAt))}</div>
5881
- <div class="path" title="\${escapeHtml(item.lastError || "")}">\${escapeHtml(item.lastError || "")}</div>
5882
- \${item.status === "active" ? \`<button type="button" data-delete-cron-job="\${escapeHtml(item.id)}">\u5220\u9664</button>\` : ""}
5883
- </td>
5884
- <td>\${escapeHtml(item.status)}</td>
5885
- </tr>
5886
- \`).join("")}
5887
- </tbody>
5888
- </table>
5889
- \`;
6170
+ function renderMessagesView() {
6171
+ var el = document.getElementById("messages-list");
6172
+ if (!allMessages || allMessages.length === 0) {
6173
+ el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u6D88\u606F\u3002</div>';
6174
+ return;
5890
6175
  }
6176
+ var searchInput = document.getElementById("message-search");
6177
+ var searchTerm = searchInput ? searchInput.value.toLowerCase() : "";
6178
+ var filtered = searchTerm ? allMessages.filter(function(m) { return (m.text || "").toLowerCase().indexOf(searchTerm) !== -1; }) : allMessages;
6179
+ if (filtered.length === 0) {
6180
+ el.innerHTML = '<div class="empty-state">\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u6D88\u606F\u3002</div>';
6181
+ return;
6182
+ }
6183
+ var html = '<div class="message-list">';
6184
+ for (var i = 0; i < Math.min(filtered.length, 50); i++) {
6185
+ var item = filtered[i];
6186
+ html += '<div class="message-card"><div class="message-meta">' +
6187
+ '<span>' + escapeHtml(formatDateTime(item.sentAt)) + '</span>' +
6188
+ '<span>' + escapeHtml(displaySender(item.senderName)) + '</span>' +
6189
+ '<span>' + escapeHtml(displayChatName(item.chatName, item.platform)) + '</span>' +
6190
+ '</div><div class="message-text" style="-webkit-line-clamp:4;">' + escapeHtml(item.text) + '</div></div>';
6191
+ }
6192
+ html += '</div>';
6193
+ if (filtered.length > 50) {
6194
+ 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>';
6195
+ }
6196
+ el.innerHTML = html;
6197
+ }
5891
6198
 
5892
- function renderQaLogs(items) {
5893
- if (items.length === 0) {
5894
- qaLogs.className = "empty";
5895
- qaLogs.textContent = "\u8FD8\u6CA1\u6709\u95EE\u7B54\u65E5\u5FD7\u3002";
5896
- return;
5897
- }
5898
- qaLogs.className = "";
5899
- const rows = items.map((item) => {
5900
- const citationCount = Array.isArray(item.citations) ? item.citations.length : 0;
5901
- return [
5902
- '<article class="message-item">',
5903
- ' <div class="message-meta">',
5904
- " <span>" + escapeHtml(formatDateTime(item.createdAt)) + "</span>",
5905
- " <span>" + escapeHtml(item.status) + "</span>",
5906
- " <span>" + escapeHtml(citationCount) + " \u6761\u5F15\u7528</span>",
5907
- " </div>",
5908
- " <div class=\\"message-body\\"><strong>\u95EE\uFF1A</strong>" + escapeHtml(item.question) + "</div>",
5909
- " <div class=\\"message-body\\"><strong>\u7B54\uFF1A</strong>" + escapeHtml(item.answer) + "</div>",
5910
- "</article>",
5911
- ].join("\\n");
5912
- });
5913
- qaLogs.innerHTML = [
5914
- '<div class="message-list">',
5915
- rows.join(""),
5916
- "</div>",
5917
- ].join("\\n");
6199
+ function filterMessages() { renderMessagesView(); }
6200
+
6201
+ function renderEpisodesView() {
6202
+ var el = document.getElementById("episodes-list");
6203
+ if (!allEpisodes || allEpisodes.length === 0) {
6204
+ el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u4F1A\u8BDD\u8BB0\u5FC6\u3002</div>';
6205
+ return;
6206
+ }
6207
+ var html = '<div class="timeline">';
6208
+ for (var i = 0; i < allEpisodes.length; i++) {
6209
+ var item = allEpisodes[i];
6210
+ 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>';
5918
6211
  }
6212
+ html += '</div>';
6213
+ el.innerHTML = html;
6214
+ }
5919
6215
 
5920
- async function fetchJson(path) {
5921
- const response = await fetch(path);
5922
- if (!response.ok) {
5923
- const body = await response.text();
5924
- throw new Error(path + " " + response.status + " " + body);
5925
- }
5926
- return response.json();
6216
+ function renderFilesView() {
6217
+ var el = document.getElementById("files-list");
6218
+ if (!allFiles || allFiles.length === 0) {
6219
+ 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>';
6220
+ return;
5927
6221
  }
6222
+ var html = '<div class="grid-2">';
6223
+ for (var i = 0; i < allFiles.length; i++) {
6224
+ var item = allFiles[i];
6225
+ html += '<div class="file-card glass"><div class="file-icon">' +
6226
+ '<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>' +
6227
+ '</div><div style="font-weight:600;margin-bottom:4px;">' + escapeHtml(item.fileName) + '</div>' +
6228
+ '<div style="font-size:13px;color:var(--text-muted);margin-bottom:4px;" class="truncate">' + escapeHtml(item.storedPath) + '</div>' +
6229
+ '<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>';
6230
+ }
6231
+ html += '</div>';
6232
+ el.innerHTML = html;
6233
+ }
6234
+
6235
+ function renderTasksView() {
6236
+ var activeTab = document.querySelector(".tab.active");
6237
+ var tab = activeTab ? activeTab.dataset.tab : "file-jobs";
6238
+ if (tab === "file-jobs") renderFileJobs();
6239
+ else renderCronJobs();
6240
+ }
5928
6241
 
5929
- function renderLoadError(element, error) {
5930
- element.className = "empty";
5931
- element.textContent = "\u52A0\u8F7D\u5931\u8D25\uFF1A" + (error instanceof Error ? error.message : String(error));
6242
+ function renderFileJobs() {
6243
+ var el = document.getElementById("file-jobs-list");
6244
+ if (!allFileJobs || allFileJobs.length === 0) {
6245
+ el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u6587\u4EF6\u89E3\u6790\u4EFB\u52A1\u3002</div>';
6246
+ return;
6247
+ }
6248
+ var html = '<table class="data-table"><thead><tr><th>\u6587\u4EF6</th><th>\u72B6\u6001</th><th>\u4FE1\u606F</th></tr></thead><tbody>';
6249
+ for (var i = 0; i < allFileJobs.length; i++) {
6250
+ var item = allFileJobs[i];
6251
+ var tagClass = item.status === 'indexed' ? 'tag-success' : item.status === 'failed' ? 'tag-error' : 'tag-warning';
6252
+ 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>' +
6253
+ '<td><span class="tag ' + tagClass + '">' + escapeHtml(item.status) + '</span></td>' +
6254
+ '<td style="font-size:13px;color:var(--text-muted);">' + escapeHtml(item.error || "") + '</td></tr>';
5932
6255
  }
6256
+ html += '</tbody></table>';
6257
+ el.innerHTML = html;
6258
+ }
5933
6259
 
5934
- async function loadSection(path, element, render) {
5935
- try {
5936
- render(await fetchJson(path));
5937
- } catch (error) {
5938
- renderLoadError(element, error);
5939
- }
6260
+ function renderCronJobs() {
6261
+ var el = document.getElementById("cron-jobs-list");
6262
+ if (!allCronJobs || allCronJobs.length === 0) {
6263
+ el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u5B9A\u65F6\u4EFB\u52A1\u3002</div>';
6264
+ return;
6265
+ }
6266
+ var html = '<table class="data-table"><thead><tr><th>\u4EFB\u52A1</th><th>\u72B6\u6001</th><th>\u64CD\u4F5C</th></tr></thead><tbody>';
6267
+ for (var i = 0; i < allCronJobs.length; i++) {
6268
+ var item = allCronJobs[i];
6269
+ var tagClass = item.status === 'active' ? 'tag-success' : 'tag-warning';
6270
+ html += '<tr><td><div style="font-weight:500;">' + escapeHtml(item.schedule) + '</div>' +
6271
+ '<div style="font-size:13px;color:var(--text-muted);" class="truncate-2">' + escapeHtml(item.prompt) + '</div>' +
6272
+ '<div style="font-size:12px;color:var(--text-muted);">\u4E0B\u6B21: ' + escapeHtml(formatDateTime(item.nextRunAt)) + '</div>' +
6273
+ (item.lastError ? '<div style="font-size:12px;color:var(--danger);margin-top:4px;">' + escapeHtml(item.lastError) + '</div>' : '') +
6274
+ '</td><td><span class="tag ' + tagClass + '">' + escapeHtml(item.status) + '</span></td><td>' +
6275
+ (item.status === "active" ? '<button class="btn btn-sm btn-danger" data-delete-cron-job="' + escapeHtml(item.id) + '">\u5220\u9664</button>' : '-') +
6276
+ '</td></tr>';
5940
6277
  }
6278
+ html += '</tbody></table>';
6279
+ el.innerHTML = html;
6280
+ }
5941
6281
 
5942
- async function load() {
5943
- await Promise.all([
5944
- loadSection("/api/status", metrics, renderMetrics),
5945
- loadSection("/api/messages/recent?limit=20", messages, (data) => renderMessages(data.items)),
5946
- loadSection("/api/episodes?limit=10", episodes, (data) => renderEpisodes(data.items)),
5947
- loadSection("/api/chats", chats, (data) => renderChats(data.items)),
5948
- loadSection("/api/files", files, (data) => renderFiles(data.items)),
5949
- loadSection("/api/file-jobs", fileJobs, (data) => renderFileJobs(data.items)),
5950
- loadSection("/api/qa-logs?limit=10", qaLogs, (data) => renderQaLogs(data.items)),
5951
- loadSection("/api/cron-jobs", cronJobs, (data) => renderCronJobs(data.items)),
5952
- ]);
6282
+ function renderQaLogsView() {
6283
+ var el = document.getElementById("qa-logs-list");
6284
+ if (!allQaLogs || allQaLogs.length === 0) {
6285
+ el.innerHTML = '<div class="empty-state">\u8FD8\u6CA1\u6709\u95EE\u7B54\u65E5\u5FD7\u3002</div>';
6286
+ return;
5953
6287
  }
6288
+ var html = '';
6289
+ for (var i = 0; i < allQaLogs.length; i++) {
6290
+ var item = allQaLogs[i];
6291
+ var citationCount = Array.isArray(item.citations) ? item.citations.length : 0;
6292
+ var statusClass = item.status === 'success' ? 'tag-success' : 'tag-warning';
6293
+ html += '<div class="qa-card"><div class="message-meta" style="margin-bottom:var(--space-sm);">' +
6294
+ '<span>' + escapeHtml(formatDateTime(item.createdAt)) + '</span>' +
6295
+ '<span class="tag ' + statusClass + '">' + escapeHtml(item.status) + '</span>' +
6296
+ '<span>' + citationCount + ' \u6761\u5F15\u7528</span></div>' +
6297
+ '<div class="qa-question">' + escapeHtml(item.question) + '</div>' +
6298
+ '<div class="qa-answer">' + escapeHtml(item.answer) + '</div></div>';
6299
+ }
6300
+ el.innerHTML = html;
6301
+ }
5954
6302
 
5955
- async function processNow() {
5956
- processMessages.disabled = true;
5957
- actionStatus.textContent = "\u6B63\u5728\u5904\u7406\u6D88\u606F\u7D22\u5F15...";
5958
- try {
5959
- const response = await fetch("/api/process/messages", {
5960
- method: "POST",
5961
- headers: { "x-chattercatcher-web-token": webActionToken },
5962
- });
5963
- const result = await response.json();
5964
- if (!response.ok) {
5965
- actionStatus.textContent = result.message || "\u5904\u7406\u5931\u8D25\u3002";
5966
- return;
5967
- }
6303
+ function renderSettings(status) {
6304
+ var el = document.getElementById("settings-config");
6305
+ var html = '<h3 style="font-size:16px;font-weight:600;margin-bottom:var(--space-md);">\u7CFB\u7EDF\u914D\u7F6E</h3>';
6306
+ html += '<div style="display:flex;flex-direction:column;">';
6307
+ 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>';
6308
+ 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>';
6309
+ 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>';
6310
+ 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>';
6311
+ html += '</div>';
6312
+ el.innerHTML = html;
6313
+ }
5968
6314
 
5969
- if (result.status === "skipped") {
5970
- actionStatus.textContent = result.reason;
5971
- } else {
5972
- actionStatus.textContent = \`\u5904\u7406\u5B8C\u6210\uFF1Achunks=\${result.chunks}, vectors=\${result.vectors}\`;
5973
- }
5974
- await load();
5975
- } catch (error) {
5976
- actionStatus.textContent = error instanceof Error ? error.message : String(error);
5977
- } finally {
5978
- processMessages.disabled = false;
5979
- }
5980
- }
6315
+ async function loadSection(path, setter) {
6316
+ try { setter(await fetchJson(path)); }
6317
+ catch (error) { console.error("\u52A0\u8F7D\u5931\u8D25:", path, error); }
6318
+ }
5981
6319
 
5982
- document.addEventListener("click", async (event) => {
5983
- const target = event.target;
5984
- if (!(target instanceof HTMLElement)) return;
5985
- const id = target.dataset.deleteCronJob;
5986
- if (!id) return;
5987
- target.setAttribute("disabled", "disabled");
5988
- actionStatus.textContent = "\u6B63\u5728\u5220\u9664\u5B9A\u65F6\u4EFB\u52A1...";
5989
- try {
5990
- const response = await fetch(\`/api/cron-jobs/\${encodeURIComponent(id)}\`, {
5991
- method: "DELETE",
5992
- headers: { "x-chattercatcher-web-token": webActionToken },
5993
- });
5994
- const result = await response.json();
5995
- actionStatus.textContent = result.ok ? "\u5B9A\u65F6\u4EFB\u52A1\u5DF2\u5220\u9664\u3002" : result.message || "\u5220\u9664\u5931\u8D25\u3002";
5996
- await load();
5997
- } catch (error) {
5998
- actionStatus.textContent = error instanceof Error ? error.message : String(error);
5999
- } finally {
6000
- target.removeAttribute("disabled");
6001
- }
6320
+ async function load() {
6321
+ await loadSection("/api/status", function(data) {
6322
+ statusData = data;
6323
+ renderMetrics(data);
6324
+ renderSystemStatus(data);
6325
+ renderSettings(data);
6002
6326
  });
6327
+ await loadSection("/api/messages/recent?limit=50", function(data) { allMessages = data.items || []; renderRecentMessages(allMessages); });
6328
+ await loadSection("/api/episodes?limit=20", function(data) { allEpisodes = data.items || []; renderRecentEpisodes(allEpisodes); });
6329
+ await loadSection("/api/files", function(data) { allFiles = data.items || []; });
6330
+ await loadSection("/api/file-jobs", function(data) { allFileJobs = data.items || []; });
6331
+ await loadSection("/api/qa-logs?limit=20", function(data) { allQaLogs = data.items || []; });
6332
+ await loadSection("/api/cron-jobs", function(data) { allCronJobs = data.items || []; });
6333
+ if (currentView === "messages") renderMessagesView();
6334
+ if (currentView === "episodes") renderEpisodesView();
6335
+ if (currentView === "files") renderFilesView();
6336
+ if (currentView === "tasks") renderTasksView();
6337
+ if (currentView === "qa-logs") renderQaLogsView();
6338
+ }
6003
6339
 
6004
- processMessages.addEventListener("click", () => void processNow());
6005
- void load();
6006
- setInterval(() => {
6007
- if (document.visibilityState === "visible") {
6008
- void load();
6009
- }
6010
- }, 5000);
6011
- </script>
6012
- </body>
6340
+ async function processNow() {
6341
+ var btn = document.getElementById("btn-process-messages");
6342
+ if (btn) { btn.disabled = true; }
6343
+ showToast("\u6B63\u5728\u5904\u7406\u6D88\u606F\u7D22\u5F15...", "info");
6344
+ try {
6345
+ var result = await postJson("/api/process/messages");
6346
+ if (result.status === "skipped") { showToast(result.reason, "warning"); }
6347
+ else { showToast("\u5904\u7406\u5B8C\u6210\uFF1Achunks=" + result.chunks + ", vectors=" + result.vectors, "success"); }
6348
+ await load();
6349
+ } catch (error) {
6350
+ showToast(error instanceof Error ? error.message : String(error), "error");
6351
+ } finally {
6352
+ if (btn) { btn.disabled = false; }
6353
+ }
6354
+ }
6355
+
6356
+ document.addEventListener("click", async function(event) {
6357
+ var target = event.target;
6358
+ if (!(target instanceof HTMLElement)) return;
6359
+ var id = target.dataset.deleteCronJob;
6360
+ if (!id) return;
6361
+ target.disabled = true;
6362
+ showToast("\u6B63\u5728\u5220\u9664\u5B9A\u65F6\u4EFB\u52A1...", "info");
6363
+ try {
6364
+ var result = await deleteJson("/api/cron-jobs/" + encodeURIComponent(id));
6365
+ showToast(result.ok ? "\u5B9A\u65F6\u4EFB\u52A1\u5DF2\u5220\u9664" : (result.message || "\u5220\u9664\u5931\u8D25"), result.ok ? "success" : "error");
6366
+ await load();
6367
+ } catch (error) {
6368
+ showToast(error instanceof Error ? error.message : String(error), "error");
6369
+ }
6370
+ });
6371
+
6372
+ void load();
6373
+ setInterval(function() { if (document.visibilityState === "visible") void load(); }, 5000);
6374
+ </script>
6375
+ </body>
6013
6376
  </html>`;
6014
6377
  }
6015
6378
  function parseLimit(value, fallback, max) {
@@ -6019,12 +6382,22 @@ function parseLimit(value, fallback, max) {
6019
6382
  function getWebActionToken(secrets) {
6020
6383
  return secrets.web.actionToken;
6021
6384
  }
6022
- function readHeader(value) {
6023
- return Array.isArray(value) ? value[0] : value;
6385
+ function getWebActionCookie(token) {
6386
+ return `chattercatcher_web_token=${encodeURIComponent(token)}; Path=/; HttpOnly; SameSite=Strict`;
6387
+ }
6388
+ function parseCookies(header) {
6389
+ const value = Array.isArray(header) ? header.join("; ") : header;
6390
+ if (!value) return {};
6391
+ const cookies = {};
6392
+ for (const part of value.split(";")) {
6393
+ const [rawName, ...rawValue] = part.trim().split("=");
6394
+ if (!rawName || rawValue.length === 0) continue;
6395
+ cookies[rawName] = decodeURIComponent(rawValue.join("="));
6396
+ }
6397
+ return cookies;
6024
6398
  }
6025
6399
  function isAuthorizedWebAction(request, token) {
6026
- const provided = readHeader(request.headers["x-chattercatcher-web-token"]);
6027
- return provided === token;
6400
+ return parseCookies(request.headers.cookie).chattercatcher_web_token === token;
6028
6401
  }
6029
6402
  function createWebApp(config, options = {}) {
6030
6403
  const app = Fastify({ logger: false });
@@ -6152,7 +6525,8 @@ function createWebApp(config, options = {}) {
6152
6525
  app.get("/", async (_request, reply) => {
6153
6526
  await tokenReady;
6154
6527
  reply.type("text/html; charset=utf-8");
6155
- return buildHtml().replaceAll("__WEB_ACTION_TOKEN__", webActionToken);
6528
+ reply.header("set-cookie", getWebActionCookie(webActionToken));
6529
+ return buildHtml();
6156
6530
  });
6157
6531
  return app;
6158
6532
  }