lumencode 0.4.3

package/public/git-insights.js

@@ -0,0 +1,123 @@
+import { ID } from './config.js';
+import { esc, fmt, destroyChart } from './utils.js';
+import { renderCommitTypeChart } from './charts.js';
+
+export function renderGitInsights(gitStats, activeTool = 'all') {
+  const aiStatsEl = document.getElementById(ID.GIT_AI_STATS);
+  const ai = gitStats.aiContribution;
+  if (!ai || gitStats.commits <= 0) { aiStatsEl.innerHTML = ''; return; }
+
+  const commitPct = Math.round((ai.aiCommitRatio ?? (ai.aiCommits / gitStats.commits)) * 100);
+  const linePct = Math.round(((ai.aiLineRatio ?? ai.aiRatio) || 0) * 100);
+  const toolNames = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode' };
+  const toolLabel = activeTool !== 'all' ? ((toolNames[activeTool] || activeTool) + ' ') : '';
+
+  const totalLines = ai.totalLinesChanged || (ai.aiFileLinesAdded + ai.aiFileLinesDeleted + (ai.humanLinesChanged || 0)) || 1;
+  const aiLinePct = Math.round((ai.aiLinesChanged / totalLines) * 100) || linePct;
+
+  const toolTheme = activeTool !== 'all' ? `theme-${activeTool}` : 'theme-all';
+
+  let summaryDesc = '';
+  if (activeTool !== 'all') {
+    summaryDesc = `${toolLabel}代码变更有 AI 参与`;
+  } else if (gitStats.attributionSummary) {
+    const s = gitStats.attributionSummary;
+    const upperPct = Math.round(((s.confirmedAILines + s.probableAILines + s.possibleAILines) / (s.totalLinesChanged || 1)) * 100);
+    summaryDesc = `代码变更有 AI 参与（可能上限 <strong>${upperPct}%</strong>）`;
+  } else {
+    summaryDesc = '代码变更有 AI 参与';
+  }
+
+  const summaryHtml = `
+    <div class="ai-summary-card ${toolTheme}">
+      <div class="ai-summary-left">
+        <span class="ai-summary-pct">${aiLinePct}%</span>
+        <span class="ai-summary-desc">${summaryDesc}</span>
+      </div>
+      <div class="ai-summary-right">
+        <span class="ai-summary-commits">${ai.aiCommits}/${gitStats.commits} 提交使用 AI (${commitPct}%)</span>
+        <div class="ai-summary-bar"><div class="ai-summary-bar-fill" style="width:${commitPct}%"></div></div>
+      </div>
+    </div>
+  `;
+
+  const tip = (text) => `<span class="metric-tip" data-tip="${text}">?</span>`;
+  const kv = (value, label, tipText) =>
+    `<div class="ai-kv-row"><span class="ai-kv-val">${value}</span><span class="ai-kv-lbl">${label}${tipText ? tip(tipText) : ''}</span></div>`;
+
+  let metrics = [];
+
+  if (activeTool !== 'all') {
+    const total = ai.totalLinesChanged || 1;
+    const confirmedPct = Math.round((ai.aiLinesChanged / total) * 100);
+    const humanPct = 100 - confirmedPct;
+    metrics.push(kv(`${confirmedPct}%`, `${toolLabel}确认 AI`, '该工具关联的 AI 提交代码行占总变更行比例'));
+    metrics.push(kv(`${humanPct}%`, `${toolLabel}未归因`, '未关联到该工具 AI session 的代码行'));
+  } else if (gitStats.attributionSummary) {
+    const s = gitStats.attributionSummary;
+    const total = s.totalLinesChanged || 1;
+    const confirmedPct = Math.round((s.confirmedAILines / total) * 100);
+    const upperPct = Math.round(((s.confirmedAILines + s.probableAILines + s.possibleAILines) / total) * 100);
+    const unknownPct = Math.round((s.unknownLines / total) * 100);
+    metrics.push(kv(`${confirmedPct}%`, '确认 AI 改动', '有明确 AI 签名或高置信 session 关联+文件交集的代码行占比'));
+    metrics.push(kv(`${upperPct}%`, '可能 AI 上限', '确认+弱信号匹配的最大覆盖面，实际 AI 参与度在此区间内'));
+    metrics.push(kv(`${unknownPct}%`, '未归因改动', '未能关联到任何 AI session 的代码行'));
+  }
+
+  metrics.push(kv(`${linePct}%`, `${toolLabel}AI 代码改写`, 'AI 命中文件的新增+删除行占总变更行比例'));
+  metrics.push(kv(`${ai.aiCommits}/${gitStats.commits}`, `${toolLabel}AI 提交 (${commitPct}%)`, '高/中置信度 AI 提交占总提交比'));
+  metrics.push(kv(`${ai.highConfidenceCommits}/${ai.mediumConfidenceCommits}`, `${toolLabel}高/中置信`, '高=签名或Bash关联+交集；中=时间窗关联+交集'));
+  metrics.push(kv(`+${fmt(ai.aiFileLinesAdded)}`, `${toolLabel}AI 新增行`, 'AI 提交中与 session 文件有交集的新增行'));
+  metrics.push(kv(`-${fmt(ai.aiFileLinesDeleted)}`, `${toolLabel}AI 删除行`, 'AI 提交中与 session 文件有交集的删除行'));
+
+  if (activeTool !== 'all' && gitStats.aiContributionByTool) {
+    const globalAi = gitStats.aiContributionByTool;
+    const allAiCommits = (globalAi.claude?.aiCommits || 0) + (globalAi.codex?.aiCommits || 0) + (globalAi.opencode?.aiCommits || 0) + (globalAi['generic-ai']?.aiCommits || 0);
+    const globalPct = gitStats.commits > 0 ? Math.round((allAiCommits / gitStats.commits) * 100) : 0;
+    metrics.push(kv(`${globalPct}%`, '全局 AI 提交率', '所有工具的 AI 归因提交数占总提交数比例'));
+  }
+
+  aiStatsEl.innerHTML = `${summaryHtml}<div class="ai-metrics-list">${metrics.join('')}</div>`;
+
+  // 提交类型分布 + 文件热点
+  const row = document.getElementById(ID.GIT_INSIGHTS_ROW);
+  const typeEntries = gitStats.commitTypes
+    ? Object.entries(gitStats.commitTypes).filter(([, v]) => v > 0).sort((a, b) => b[1] - a[1])
+    : [];
+  const hotspots = gitStats.fileHotspots || [];
+
+  if (typeEntries.length === 0 && hotspots.length === 0) {
+    row.style.display = 'none';
+    destroyChart('commitTypeChart');
+    return;
+  }
+  row.style.display = '';
+
+  if (typeEntries.length > 0) {
+    renderCommitTypeChart(typeEntries);
+  } else {
+    destroyChart('commitTypeChart');
+  }
+
+  const hostEl = document.getElementById(ID.FILE_HOTSPOTS_TABLE);
+  if (hotspots.length === 0) {
+    hostEl.innerHTML = '<div class="hotspots-empty">无文件变更数据</div>';
+  } else {
+    const maxTouch = Math.max(...hotspots.map(h => h.touches));
+    const truncate = (p) => p.length > 40 ? '...' + p.slice(-37) : p;
+    hostEl.innerHTML = `
+      <table class="hotspots-tbl">
+        <thead><tr><th>文件</th><th class="num">触碰</th><th class="num">+行</th><th class="num">-行</th><th>热度</th></tr></thead>
+        <tbody>${hotspots.map(h => {
+          const pct = Math.max(8, Math.round((h.touches / maxTouch) * 100));
+          return `<tr>
+            <td class="hotspot-path" title="${esc(h.path)}">${esc(truncate(h.path))}</td>
+            <td class="num">${h.touches}</td>
+            <td class="num pos">+${fmt(h.added)}</td>
+            <td class="num neg">-${fmt(h.deleted)}</td>
+            <td><div class="hotspot-bar"><div class="hotspot-bar-fill" style="width:${pct}%"></div></div></td>
+          </tr>`;
+        }).join('')}</tbody>
+      </table>`;
+  }
+}

package/public/index.html

@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LumenCode</title>
+  <link rel="stylesheet" href="/fonts/inter.css">
+  <script src="/vendor/chart.umd.min.js"></script>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <div id="toast" class="toast" style="display:none;"></div>
+  <nav class="top-nav">
+    <div class="nav-inner">
+      <div class="logo">LumenCode</div>
+      <div class="nav-controls">
+        <div class="nav-pill-group">
+          <button class="category-tab active" data-period="daily">日报</button>
+          <button class="category-tab" data-period="weekly">周报</button>
+          <button class="category-tab" data-period="monthly">月报</button>
+        </div>
+        <div style="display:flex;align-items:center;gap:4px;">
+          <button id="prevDate" class="icon-btn" title="上一个" aria-label="上一个日期">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+          </button>
+          <label for="dateInput" class="sr-only">选择日期</label>
+          <input type="date" id="dateInput" class="text-input">
+          <button id="nextDate" class="icon-btn" title="下一个" aria-label="下一个日期">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+          </button>
+        </div>
+        <button id="themeBtn" class="icon-btn" title="切换暗色模式">
+          <svg id="moonIcon" 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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+          <svg id="sunIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+        </button>
+        <button id="settingsBtn" class="icon-btn" title="设置">
+          <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"></circle><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 .33-1.82 1.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"></path></svg>
+        </button>
+      </div>
+    </div>
+  </nav>
+
+  <div class="app-layout">
+    <aside class="tool-sidebar" :class="{ collapsed: collapsed }" x-data="toolTabs()" x-init="init()" x-show="availableTools.length > 0">
+      <div class="tool-sidebar-header">
+        <span class="tool-sidebar-title" x-show="!collapsed">数据源</span>
+        <button class="tool-sidebar-toggle" @click="toggleCollapse()" :title="collapsed ? '展开' : '收起'">
+          <svg x-show="!collapsed" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>
+          <svg x-show="collapsed" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>
+        </button>
+      </div>
+      <nav class="tool-nav">
+        <button class="tool-nav-item" :class="{ active: activeTool === 'all' }" @click="setTool('all')" title="汇总">
+          <span class="tool-dot tool-dot-all"></span>
+          <span class="tool-nav-label" x-show="!collapsed">汇总</span>
+        </button>
+        <template x-for="tool in availableTools" :key="tool.name">
+          <button
+            class="tool-nav-item"
+            :class="{ active: activeTool === tool.name, disabled: !tool.detected && !tool.enabled }"
+            :disabled="!tool.detected && !tool.enabled"
+            @click="setTool(tool.name)"
+            :title="tool.displayName"
+          >
+            <span class="tool-dot" :class="'tool-dot-' + tool.name"></span>
+            <span class="tool-nav-text" x-show="!collapsed">
+              <span class="tool-nav-label" x-text="tool.displayName"></span>
+              <span class="tool-nav-version" x-show="tool.version" x-text="'v' + tool.version"></span>
+            </span>
+          </button>
+        </template>
+      </nav>
+      <!-- 添加数据源功能暂未实现，先隐藏
+      <div class="tool-sidebar-footer">
+        <button class="tool-nav-add" @click="showAddTool = true" title="添加数据源">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+          <span class="tool-nav-label" x-show="!collapsed">添加</span>
+        </button>
+      </div>
+      -->
+    </aside>
+
+    <main class="container" x-data="app()">
+    <section class="hero-band">
+      <div class="hero-row">
+        <div>
+          <h1 class="display-lg" id="reportTitle">Claude Code 使用日报</h1>
+          <p class="body-md muted" id="reportDate">加载中...</p>
+        </div>
+        <div class="hero-actions" style="display:flex;gap:8px;">
+          <button id="exportCsvBtn" class="btn-outline">导出 CSV</button>
+          <button id="exportJsonBtn" class="btn-outline">导出 JSON</button>
+          <button id="exportHtmlBtn" class="btn-outline">保存 HTML</button>
+          <button id="printBtn" class="btn-outline">打印/PDF</button>
+          <button id="workReportBtn" class="btn-outline">工作汇报</button>
+        </div>
+      </div>
+    </section>
+
+    <section class="stats-grid" id="statsGrid">
+      <div class="feature-card">
+        <div class="card-label">独立会话</div>
+        <div class="card-value-row"><div class="card-value" id="statSessions">-</div><div class="card-trend" id="trendSessions"></div></div>
+      </div>
+      <div class="feature-card">
+        <div class="card-label">交互轮次</div>
+        <div class="card-value-row"><div class="card-value" id="statRequests">-</div><div class="card-trend" id="trendRequests"></div></div>
+      </div>
+      <div class="feature-card">
+        <div class="card-label">覆盖项目</div>
+        <div class="card-value-row"><div class="card-value" id="statProjects">-</div><div class="card-trend" id="trendProjects"></div></div>
+      </div>
+      <div class="feature-card">
+        <div class="card-label">Token 消耗</div>
+        <div class="card-value-row"><div class="card-value" id="statTokens">-</div><div class="card-trend" id="trendTokens"></div></div>
+        <div class="card-sub" id="statTokenBreakdown"></div>
+      </div>
+      <div class="feature-card">
+        <div class="card-label">预估费用</div>
+        <div class="card-value-row"><div class="card-value" id="statCost">-</div><div class="card-trend" id="trendCost"></div></div>
+        <div class="card-sub" id="statCostModel"></div>
+      </div>
+    </section>
+
+    <section class="git-section" id="gitSection" style="display:none;">
+      <div class="cta-band-light">
+        <h3 class="title-lg">Git 代码产出</h3>
+        <div class="git-stats" id="gitStats"></div>
+        <div class="git-ai-stats" id="gitAiStats"></div>
+      </div>
+      <div class="chart-row git-insights-row" id="gitInsightsRow" style="display:none;">
+        <div class="chart-card">
+          <h3 class="title-md">提交类型分布</h3>
+          <div class="chart-wrap"><canvas id="commitTypeChart"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <h3 class="title-md">文件热点 Top 10</h3>
+          <div id="fileHotspotsTable" class="hotspots-table"></div>
+        </div>
+      </div>
+    </section>
+
+    <section id="analyticsSection">
+    <div class="section-header">
+      <h2 class="title-md">数据分析</h2>
+    </div>
+    <div class="no-data-hint" id="noDataHint" style="display:none;">
+      <p>该时间段暂无使用数据</p>
+    </div>
+    <div class="charts-dashboard" id="chartsDashboard">
+      <section class="charts-section">
+        <div class="chart-row">
+          <div class="chart-card">
+            <h3 class="title-md">工作类型分布</h3>
+            <div class="chart-wrap"><canvas id="scenarioChart"></canvas></div>
+          </div>
+          <div class="chart-card">
+            <h3 class="title-md">模型使用分布</h3>
+            <div class="chart-wrap"><canvas id="modelChart"></canvas></div>
+          </div>
+        </div>
+        <div class="chart-row">
+          <div class="chart-card">
+            <h3 class="title-md">项目使用分布</h3>
+            <div class="chart-wrap"><canvas id="projectChart"></canvas></div>
+          </div>
+          <div class="chart-card">
+            <h3 class="title-md">工具调用排行</h3>
+            <div class="chart-wrap"><canvas id="toolChart"></canvas></div>
+          </div>
+        </div>
+      </section>
+      <section class="trend-section" id="trendSection" style="display:none;">
+        <div class="chart-card trend-card">
+          <h3 class="title-md">使用趋势</h3>
+          <div class="chart-wrap chart-wrap-tall"><canvas id="trendChart"></canvas></div>
+        </div>
+      </section>
+      <section class="trend-section" id="cacheSection" style="display:none;">
+        <div class="chart-card">
+          <h3 class="title-md">缓存效率</h3>
+          <div class="chart-wrap"><canvas id="cacheChart"></canvas></div>
+        </div>
+      </section>
+      <section class="trend-section" id="modelCostSection" style="display:none;">
+        <div class="chart-card">
+          <h3 class="title-md">模型费用分布</h3>
+          <div class="chart-wrap chart-wrap-tall"><canvas id="modelCostChart"></canvas></div>
+        </div>
+      </section>
+    </div>
+    </section>
+
+    <section class="welcome-page" id="welcomePage" style="display:none;">
+      <div class="welcome-content">
+        <div class="welcome-brand">
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-bottom:16px;">
+            <rect x="8" y="12" width="32" height="24" rx="6" stroke="#111111" stroke-width="2.5" fill="none"/>
+            <path d="M16 22L22 28L32 18" stroke="#111111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+          </svg>
+          <h1 class="welcome-title">欢迎使用 LumenCode</h1>
+          <p class="welcome-subtitle">AI 编码助手使用统计与代码产出分析工具</p>
+        </div>
+
+        <div class="welcome-features">
+          <div class="feature-item">
+            <svg class="feature-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <rect x="3" y="3" width="18" height="18" rx="2"/>
+              <path d="M3 9h18M9 21V9"/>
+            </svg>
+            <div class="feature-text">
+              <h4>Token 消耗追踪</h4>
+              <p>按日/周/月统计输入、输出、缓存命中</p>
+            </div>
+          </div>
+          <div class="feature-item">
+            <svg class="feature-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="12" cy="12" r="9"/>
+              <path d="M12 6v6l4 2"/>
+            </svg>
+            <div class="feature-text">
+              <h4>费用估算</h4>
+              <p>基于模型定价自动计算成本</p>
+            </div>
+          </div>
+          <div class="feature-item">
+            <svg class="feature-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+              <path d="M2 17l10 5 10-5"/>
+              <path d="M2 12l10 5 10-5"/>
+            </svg>
+            <div class="feature-text">
+              <h4>AI 贡献度</h4>
+              <p>关联 Git 提交，量化 AI 辅助占比</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="welcome-steps">
+          <div class="step-card">
+            <div class="step-header">
+              <span class="step-number">1</span>
+              <h3>选择 Claude 日志目录</h3>
+            </div>
+            <p class="step-desc">Claude Code 会话日志的存放路径，通常是 <code>~/.claude</code></p>
+            <label for="welcomeClaudeDir" class="sr-only">Claude 日志目录</label>
+            <input type="text" class="welcome-input" id="welcomeClaudeDir" placeholder="例如: C:/Users/xxx/.claude" />
+          </div>
+
+          <div class="step-card">
+            <div class="step-header">
+              <span class="step-number">2</span>
+              <h3>选择项目仓库（可选）</h3>
+            </div>
+            <p class="step-desc">用于关联 Git 代码产出统计，多个仓库用逗号分隔</p>
+            <label for="welcomeRepos" class="sr-only">项目仓库路径</label>
+            <input type="text" class="welcome-input" id="welcomeRepos" placeholder="例如: D:/project1, D:/project2" />
+          </div>
+        </div>
+
+        <div class="welcome-actions">
+          <button class="btn-primary welcome-start-btn" id="welcomeStartBtn">开始使用</button>
+          <p class="welcome-hint" id="welcomeHint"></p>
+        </div>
+      </div>
+    </section>
+
+    <section class="work-report-section" id="workReportSection" style="display:none;">
+      <div class="chart-card">
+        <div class="work-report-header">
+          <h3 class="title-md">工作汇报</h3>
+          <div class="work-report-actions">
+            <div class="level-tab-group">
+              <button class="level-tab active" data-level="detailed">详报</button>
+              <button class="level-tab" data-level="brief">简报</button>
+            </div>
+            <div class="platform-pill-group">
+              <button class="platform-tab active" data-platform="default">标准</button>
+              <button class="platform-tab" data-platform="feishu">飞书</button>
+              <button class="platform-tab" data-platform="dingtalk">钉钉</button>
+            </div>
+            <span class="action-divider"></span>
+            <button id="copyWorkReport" class="btn-secondary">复制</button>
+            <button id="downloadMdBtn" class="btn-secondary">下载 .md</button>
+            <button id="backToReport" class="btn-primary">返回</button>
+          </div>
+        </div>
+        <div id="workReportContent" class="work-report-content"></div>
+      </div>
+    </section>
+    <!-- Drill-down Modal -->
+    <div id="drillModal" class="modal" style="display:none;">
+      <div class="modal-backdrop"></div>
+      <div class="modal-panel" style="max-width:640px;">
+        <div class="modal-header">
+          <h3 class="title-md" id="drillTitle">明细</h3>
+          <button id="closeDrill" class="icon-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
+        </div>
+        <div class="modal-body" id="drillBody"></div>
+      </div>
+    </div>
+  </main>
+  </div>
+
+  <!-- Settings Modal -->
+  <div id="settingsModal" class="modal" style="display:none;">
+    <div class="modal-backdrop"></div>
+    <div class="modal-panel">
+      <div class="modal-header">
+        <h3 class="title-md">配置</h3>
+        <button id="closeSettings" class="icon-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label class="form-label">Claude 日志目录</label>
+          <input type="text" id="cfgClaudeDir" class="text-input form-input">
+        </div>
+        <div class="form-group">
+          <label class="form-label">本地项目路径（每行一个）</label>
+          <textarea id="cfgRepos" class="text-input form-textarea" rows="3"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label">排除项目（每行一个）</label>
+          <textarea id="cfgExclude" class="text-input form-textarea" rows="3"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label">场景关键词</label>
+          <textarea id="cfgKeywords" class="text-input form-textarea" rows="5"></textarea>
+          <p class="form-hint">JSON 格式，如 { "coding": ["实现", "开发"] }</p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button id="saveSettings" class="btn-primary">保存</button>
+      </div>
+    </div>
+  </div>
+
+  <footer class="footer">
+    <div class="footer-inner">
+      <p>LumenCode · AI 编码助手使用统计</p>
+      <p class="muted-soft">数据来自本地日志，不上传至任何服务器</p>
+    </div>
+  </footer>
+
+  <script type="module" src="/app.js"></script>
+</body>
+</html>