lumencode 0.4.3 → 1.0.0

package/public/app.js

@@ -1,647 +1,809 @@
-import { COLORS, TEXT, ID, STORAGE } from './config.js';
-import { esc, fmt, fmtShort, renderTrendArrow, destroyChart, destroyAllCharts, setChart } from './utils.js';
+import { COLORS, SCENARIO_COLORS, TEXT, ID, STORAGE } from './config.js';
+import { esc, fmt, fmtShort, destroyChart, destroyAllCharts, getChart, setChart, todayISO, fmtDate } from './utils.js';
 import { createLatestRequestGuard, fetchTools, fetchReport, fetchConfig, saveConfig, fetchDetails, fetchSessions } from './api.js';
-import { renderDoughnut, renderBar, renderTrend, renderCommitTypeChart, renderCacheEfficiency, renderModelCostChart } from './charts.js';
+import { renderWorkTypePie, renderModelBars, renderProjectBars, renderTimelineArea, renderCacheStack } from './charts.js';
 import { renderGitInsights } from './git-insights.js';
 import { loadWorkReport, copyWorkReport, downloadMarkdown, getWorkReportState, setWorkReportState } from './work-report.js';
 import { exportCSV, printReport, exportJSON, exportHTML } from './export.js';
-import { showSkeleton, hideSkeleton, showError, hideError, showEmpty, hideEmpty, clearReportUI } from './ui-state.js';
-
-// ── 全局状态 ──
-let currentPeriod = 'daily';
-let currentDate = new Date().toISOString().slice(0, 10);
-let currentTool = 'all';
-let lastReportData = null;
-
-// ── Drill-down 钻取弹窗 ──
-function showDrill(title, html) {
-  const drillTitle = document.getElementById(ID.DRILL_TITLE);
-  const drillBody = document.getElementById(ID.DRILL_BODY);
-  const drillModal = document.getElementById(ID.DRILL_MODAL);
-  if (drillTitle) drillTitle.textContent = title;
-  if (drillBody) drillBody.innerHTML = html;
-  if (drillModal) drillModal.style.display = 'flex';
-}
-
-// 场景 drill-down 全局回调（由 charts.js 调用）
-window._drillHandler = async (type, key, label) => {
-  showDrill(esc(label) + ' 匹配示例', '<div class="drill-empty">加载中...</div>');
-  try {
-    const rows = await fetchDetails({ period: currentPeriod, date: currentDate, dimension: type, key });
-    if (!rows.length) { showDrill(esc(label), '<div class="drill-empty">无匹配记录</div>'); return; }
-    showDrill(esc(label) + ' 匹配示例', '<table class="drill-table"><tr><th>用户消息</th><th>时间</th></tr>' + rows.map(r => `<tr><td class="drill-text" title="${esc(r.text)}">${esc(r.text)}</td><td>${esc(r.timestamp?.slice(0, 16)?.replace('T', ' '))}</td></tr>`).join('') + '</table>');
-  } catch {
-    showDrill(esc(label), '<div class="drill-empty">加载失败</div>');
-  }
-};
 
-// ── 返回报告视图 ──
-function resetToReportView() {
-  const workReportSection = document.getElementById(ID.WORK_REPORT_SECTION);
-  const statsGrid = document.getElementById(ID.STATS_GRID);
-  const chartsSection = document.getElementById(ID.ANALYTICS_SECTION);
-  const gitSection = document.getElementById(ID.GIT_SECTION);
-  const workReportBtn = document.getElementById(ID.WORK_REPORT_BTN);
-  if (workReportSection) workReportSection.style.display = 'none';
-  if (statsGrid) statsGrid.style.display = 'grid';
-  if (chartsSection) chartsSection.style.display = 'block';
-  if (gitSection) gitSection.style.display = gitSection.dataset.hasGit === 'true' ? 'block' : 'none';
-  if (workReportBtn) workReportBtn.style.display = 'inline-block';
-}
-
-// ── Alpine.js Components ──
-// ES Module 加载晚于 defer 脚本，Alpine 可能已初始化，需兼容两种时序
-function registerAlpineComponents() {
-  Alpine.data('toolTabs', () => ({
+/* ── Alpine App Component ── */
+function appState() {
+  return {
+    /* state */
+    view: 'ledger',
+    period: 'daily',
     activeTool: 'all',
+    railCollapsed: localStorage.getItem(STORAGE.SIDEBAR_COLLAPSED) === 'true',
+    theme: localStorage.getItem(STORAGE.THEME) || 'dark',
+    currentDate: todayISO(),
+    today: todayISO(),
+    loading: false,
+    error: null,
+    hasData: false,
     availableTools: [],
-    showAddTool: false,
-    collapsed: localStorage.getItem(STORAGE.SIDEBAR_COLLAPSED) === 'true',
+    appName: 'LumenCode',
+    appVersion: '',
+    lastReportData: null,
+    cache: {},
+    _cacheOrder: [],
+    _cacheMaxSize: 30,
+    reportRequestGuard: createLatestRequestGuard(),
 
+    /* report view state */
+    reportLevel: 'detailed',
+    reportPlatform: 'default',
+    reportProject: '',
+    reportProjects: [],
+    copied: false,
+    reportHtml: '',
+
+    /* constants */
+    customStart: '',
+    customEnd: '',
+    periods: [
+      { id: 'daily', cn: '日', en: 'DAY' },
+      { id: 'weekly', cn: '周', en: 'WEEK' },
+      { id: 'monthly', cn: '月', en: 'MONTH' },
+      { id: 'custom', cn: '自定义', en: 'CUSTOM' },
+    ],
+    colors: {
+      rust: 'var(--rust)', dest: 'var(--dest)', forest: 'var(--forest)',
+      ochre: 'var(--ochre)', clay: 'var(--clay)',
+    },
+    toolColors: { claude: 'var(--claude)', codex: 'var(--codex)', opencode: 'var(--opencode)' },
+    toolSubNames: { claude: 'ANTHROPIC', codex: 'OPENAI', opencode: 'OSS' },
+
+    /* computed getters */
+    get periodMeta() { return this.periods.find(p => p.id === this.period) || this.periods[0]; },
+    get dateDisplay() {
+      if (this.period === 'custom') {
+        if (this.customStart && this.customEnd) return `${this.customStart.replace(/-/g, '.')} — ${this.customEnd.replace(/-/g, '.')}`;
+        return '选择日期范围';
+      }
+      if (this.period === 'daily') return this.currentDate.replace(/-/g, '.');
+      if (this.period === 'weekly') {
+        const d = new Date(this.currentDate);
+        const start = new Date(d); start.setDate(d.getDate() - d.getDay() + 1);
+        const end = new Date(start); end.setDate(start.getDate() + 6);
+        return `${fmtDate(start)} — ${fmtDate(end)}`;
+      }
+      return this.currentDate.slice(0, 7).replace('-', '.');
+    },
+    get generatedAt() { return fmtDate(new Date()) + ' · ' + new Date().toLocaleTimeString('zh-CN', {hour:'2-digit',minute:'2-digit'}) + ' UTC+8'; },
+    get traceId() { return 'CT-' + this.currentDate.replace(/-/g, '-'); },
+
+    /* KPI defaults */
+    kpiData: [
+      { label: '活跃天数', sub: 'ACTIVE DAYS', value: '-', unit: '/ 31', delta: '', trend: 'flat' },
+      { label: '覆盖项目', sub: 'PROJECTS', value: '-', unit: '个', delta: '', trend: 'flat' },
+      { label: '高峰天数', sub: 'PEAK DAYS', value: '-', unit: '天', delta: '', trend: 'flat' },
+      { label: 'Token 消耗 · 含缓存', sub: 'TOKENS · INC. CACHE', value: '-', unit: 'M', delta: '', trend: 'flat' },
+      { label: '估算成本', sub: 'EST. COST USD', value: '-', unit: '', delta: '', trend: 'flat' },
+    ],
+
+    /* AI contribution defaults */
+    aiLinePct: 0,
+    aiLinePctDisplay: 0,
+    _aiPctAnim: null,
+    aiSummaryDesc: '',
+    attributionPct: '0% / 100%',
+    confirmedPct: 0,
+    inferredPct: 0,
+    unattribPct: 0,
+    sourceClaudePct: 0,
+    sourceCodexPct: 0,
+    sourceOpencodePct: 0,
+    sourceBreakdown: [],
+    aiContributionMeta: '- / - LINES',
+    gitOutputCells: [
+      { l: '提交', en: 'COMMITS', v: '-', c: '' },
+      { l: '变更文件', en: 'FILES', v: '-', c: '' },
+      { l: '新增', en: '+ ADDED', v: '-', c: 'var(--forest)' },
+      { l: '删除', en: '− REMOVED', v: '-', c: 'var(--dest)' },
+    ],
+    attributionCells: [
+      { l: 'AI 改写', en: 'REWRITE', v: '-', c: '' },
+      { l: 'AI 提交', en: 'COMMITS', v: '-', c: 'var(--forest)' },
+      { l: '可能上限', en: 'MAX', v: '-', c: '' },
+      { l: '高·中置信', en: 'HI · MID', v: '-', c: 'var(--ochre)' },
+      { l: 'AI 新增', en: '+ AI', v: '-', c: 'var(--forest)' },
+      { l: 'AI 删除', en: '− AI', v: '-', c: 'var(--dest)' },
+    ],
+
+    /* section data defaults */
+    editTypeData: [],
+    topFilesData: [],
+    topFilesMeta: '+0 / −0',
+    workTypeData: [],
+    modelData: [],
+    topModelName: '-',
+    activeModels: '-',
+    cacheHitRate: 0,
+    cacheDelta: '',
+    cacheData: [],
+    cacheSavingText: '',
+    timelineMeta: [
+      { l: 'PEAK DAY', v: '-', s: '-' },
+      { l: 'AVG / DAY', v: '-', s: 'sessions' },
+      { l: 'LONGEST STREAK', v: '-', s: 'consecutive days' },
+      { l: 'IDLE DAYS', v: '-', s: 'no activity' },
+    ],
+    toolRankData: [],
+    projectData: [],
+
+    /* tool summary for rail */
+    toolTokens: { all: '-' },
+    toolSessions: { all: 0 },
+
+    /* report view data */
+    reportKpis: [
+      { l: 'TOKENS', v: '-', s: '估算成本 -', accent: false },
+      { l: 'COMMITS', v: '-', s: '- / - 行', accent: false },
+      { l: 'AI CONTRIBUTION', v: '-', s: '- 行可独立运行', accent: true },
+      { l: 'ACTIVE DAYS', v: '-', s: '连续 - 天最长', accent: false },
+    ],
+    reportSubTitle: '',
+    reportSummary: '',
+    reportHighlights: [],
+
+    /* ── init ── */
     async init() {
+      this.loadStateFromHash();
+      if (this.theme === 'dark') document.documentElement.classList.add('dark');
+      else document.documentElement.classList.remove('dark');
+      this.$watch('view', (value) => {
+        if (value === 'ledger' && this.lastReportData) {
+          this.$nextTick(() => this.renderCharts(this.lastReportData));
+        }
+      });
       await this.loadTools();
+      // 首次加载时先获取全量数据填充侧边栏，再按当前工具加载
+      if (this.activeTool !== 'all') {
+        try {
+          const allData = await fetchReport({ tool: 'all', period: this.period, date: this.currentDate });
+          if (allData && !allData.error) {
+            this.computeToolTokens(allData.usageStats, allData.toolBreakdown);
+          }
+        } catch {}
+      }
+      await this.loadCurrentView();
     },
 
+    /* ── theme ── */
+    toggleTheme() {
+      this.theme = this.theme === 'dark' ? 'light' : 'dark';
+      localStorage.setItem(STORAGE.THEME, this.theme);
+      if (this.theme === 'dark') document.documentElement.classList.add('dark');
+      else document.documentElement.classList.remove('dark');
+      /* re-render charts to pick up new colors */
+      if (this.lastReportData && this.view === 'ledger') this.renderCharts(this.lastReportData);
+    },
+
+    /* ── tools ── */
     async loadTools() {
       try {
-        this.availableTools = await fetchTools();
-      } catch {
-        this.availableTools = [];
-      }
+        const data = await fetchTools();
+        this.availableTools = data.tools || data || [];
+        if (data.appName) this.appName = data.appName;
+        if (data.appVersion) this.appVersion = data.appVersion;
+      } catch (e) { console.warn('loadTools failed:', e); this.availableTools = []; }
     },
 
     setTool(name) {
       this.activeTool = name;
-      window.dispatchEvent(new CustomEvent('tool-changed', { detail: name }));
+      this.loadCurrentView();
+      if (this.view === 'report') this.loadReportContent();
     },
 
-    toggleCollapse() {
-      this.collapsed = !this.collapsed;
-      localStorage.setItem(STORAGE.SIDEBAR_COLLAPSED, String(this.collapsed));
+    /* ── period / date ── */
+    setPeriod(p) {
+      this.period = p;
+      if (p !== 'custom') {
+        this.customStart = '';
+        this.customEnd = '';
+        this.saveStateToHash();
+        this.loadCurrentView();
+        if (this.view === 'report') this.loadReportContent();
+      }
     },
-  }));
 
-  Alpine.data('app', () => ({
-    activeTool: 'all',
-    activePeriod: currentPeriod,
-    currentDate: currentDate,
-    loading: false,
-    error: null,
-    cache: {},
-    lastReportData: null,
-    reportRequestGuard: createLatestRequestGuard(),
-
-    async init() {
-      this.loadStateFromHash();
+    onCustomStartChange() {
+      if (this.customStart && this.customEnd) {
+        this.loadCurrentView();
+        if (this.view === 'report') this.loadReportContent();
+      }
+    },
 
-      window.addEventListener('tool-changed', e => {
-        this.activeTool = e.detail;
-        currentTool = e.detail;
-        resetToReportView();
+    onCustomEndChange() {
+      if (this.customStart && this.customEnd) {
         this.loadCurrentView();
-      });
+        if (this.view === 'report') this.loadReportContent();
+      }
+    },
 
-      this.bindPeriodButtons();
-      this.bindDateControls();
-      await this.loadCurrentView();
+    shiftDate(dir) {
+      const d = new Date(this.currentDate);
+      if (this.period === 'monthly') {
+        d.setMonth(d.getMonth() + dir);
+      } else {
+        const step = this.period === 'weekly' ? 7 * dir : dir;
+        d.setDate(d.getDate() + step);
+      }
+      this.currentDate = d.toISOString().slice(0, 10);
+      this.saveStateToHash();
+      this.loadCurrentView();
+      if (this.view === 'report') this.loadReportContent();
     },
 
-    bindPeriodButtons() {
-      document.querySelectorAll('.category-tab').forEach(btn => {
-        btn.addEventListener('click', () => {
-          document.querySelectorAll('.category-tab').forEach(b => b.classList.remove('active'));
-          btn.classList.add('active');
-          this.setPeriod(btn.dataset.period);
-        });
-      });
+    onDateChange() {
+      if (this.currentDate > this.today) this.currentDate = this.today;
+      this.saveStateToHash();
+      this.loadCurrentView();
+      if (this.view === 'report') this.loadReportContent();
     },
 
-    bindDateControls() {
-      if (this._dateControlsBound) return;
-      this._dateControlsBound = true;
-      const dateInput = document.getElementById(ID.DATE_INPUT);
-      if (dateInput) {
-        dateInput.value = this.currentDate;
-        dateInput.max = new Date().toISOString().slice(0, 10);
-        dateInput.addEventListener('change', e => this.setDate(e.target.value));
-      }
-      document.getElementById(ID.PREV_DATE)?.addEventListener('click', () => this.shiftDate(-1));
-      document.getElementById(ID.NEXT_DATE)?.addEventListener('click', () => this.shiftDate(1));
+    loadStateFromHash() {
+      const hash = location.hash.slice(1);
+      if (!hash) return;
+      const [p, d] = hash.split('/');
+      if (p && ['daily', 'weekly', 'monthly', 'custom'].includes(p)) this.period = p;
+      if (d && /^\d{4}-\d{2}-\d{2}$/.test(d)) this.currentDate = d;
     },
 
-    shiftDate(days) {
-      const d = new Date(this.currentDate);
-      d.setDate(d.getDate() + days);
-      this.setDate(d.toISOString().slice(0, 10));
+    saveStateToHash() {
+      location.hash = `${this.period}/${this.currentDate}`;
     },
 
+    /* ── data loading ── */
     async loadCurrentView() {
-      const tool = this.activeTool;
-      const period = this.activePeriod;
-      const date = this.currentDate;
-      const cacheKey = `${tool}-${period}-${date}`;
+      const cacheKey = `${this.activeTool}-${this.period}-${this.period === 'custom' ? this.customStart + '~' + this.customEnd : this.currentDate}`;
       const request = this.reportRequestGuard.next();
+
       if (this.cache[cacheKey]) {
+        const idx = this._cacheOrder.indexOf(cacheKey);
+        if (idx !== -1) { this._cacheOrder.splice(idx, 1); this._cacheOrder.push(cacheKey); }
         this.renderData(this.cache[cacheKey]);
         this.loading = false;
-        hideSkeleton();
         return;
       }
 
       this.loading = true;
       this.error = null;
-      showSkeleton();
-      hideError();
 
       try {
-        const data = await fetchReport({ tool, period, date }, request.signal);
-        if (!request.isCurrent() || tool !== this.activeTool || period !== this.activePeriod || date !== this.currentDate) return;
+        const params = { tool: this.activeTool, period: this.period, date: this.currentDate };
+        if (this.period === 'custom' && this.customStart && this.customEnd) {
+          params.start = this.customStart;
+          params.end = this.customEnd;
+        }
+        const data = await fetchReport(params, request.signal);
+        if (!request.isCurrent()) return;
 
         if (!data || data.error) {
-          if (data?.hint) this.error = data.hint;
+          this.hasData = false;
           if (data?.error === TEXT.NOT_CONFIGURED) {
-            showEmpty();
-            try {
-              const cfg = await fetchConfig();
-              const welcomeClaudeDir = document.getElementById(ID.WELCOME_CLAUDE_DIR);
-              const welcomeRepos = document.getElementById(ID.WELCOME_REPOS);
-              if (welcomeClaudeDir) welcomeClaudeDir.value = cfg.claudeDir || '';
-              if (welcomeRepos) welcomeRepos.value = (cfg.repos || []).join(', ');
-            } catch {}
-          } else {
-            clearReportUI(destroyChart);
+            this.showWelcome();
           }
           return;
         }
 
-        hideEmpty();
+        this.hideWelcome();
         this.cache[cacheKey] = data;
+        this._cacheOrder.push(cacheKey);
+        while (this._cacheOrder.length > this._cacheMaxSize) {
+          const old = this._cacheOrder.shift();
+          delete this.cache[old];
+        }
         this.lastReportData = data;
-        lastReportData = data;
         this.renderData(data);
       } catch (err) {
         if (err.name === 'AbortError') return;
-        if (!request.isCurrent()) return;
-        this.error = '网络错误: ' + err.message;
-        showError(this.error);
+        this.error = err.message;
+        showToast('加载失败: ' + err.message);
       } finally {
-        if (request.isCurrent()) {
-          this.loading = false;
-          hideSkeleton();
-        }
+        if (request.isCurrent()) this.loading = false;
       }
     },
 
+    showWelcome() {
+      const wp = document.getElementById(ID.WELCOME_PAGE);
+      if (wp) wp.style.display = 'flex';
+    },
+
+    hideWelcome() {
+      const wp = document.getElementById(ID.WELCOME_PAGE);
+      if (wp) wp.style.display = 'none';
+    },
+
+    /* ── render data ── */
     renderData(data) {
-      const { usageStats, gitStats, start, end, reposConfigured } = data;
-
-      const toolName = this.activeTool === 'all' ? TEXT.ALL_TOOLS : this.activeTool;
-      const periodName = this.activePeriod === 'daily' ? TEXT.DAILY : this.activePeriod === 'weekly' ? TEXT.WEEKLY : TEXT.MONTHLY;
-      document.getElementById(ID.REPORT_TITLE).textContent = `${toolName} ${TEXT.USAGE}${periodName}`;
-      const analyticsTitle = document.querySelector(`#${ID.ANALYTICS_SECTION} .title-md`);
-      if (analyticsTitle) analyticsTitle.textContent = this.activeTool === 'all' ? TEXT.DATA_ANALYSIS : `${toolName} ${TEXT.DATA_ANALYSIS}`;
-      document.getElementById(ID.REPORT_DATE).textContent =
-        this.activePeriod === 'daily' ? start :
-        this.activePeriod === 'weekly' ? `${start} ~ ${end}` :
-        start.slice(0, 7);
-
-      document.getElementById(ID.STAT_SESSIONS).textContent = fmt(usageStats.sessionCount);
-      document.getElementById(ID.STAT_REQUESTS).textContent = fmt(usageStats.requestCount);
-      document.getElementById(ID.STAT_PROJECTS).textContent = Object.keys(usageStats.projects).length;
-      document.getElementById(ID.STAT_TOKENS).textContent = fmt(usageStats.totalTokens);
-
-      const tokenBreakdown = document.getElementById(ID.STAT_TOKEN_BREAKDOWN);
-      if (tokenBreakdown) {
-        tokenBreakdown.innerHTML = `<span>输入 ${fmt(usageStats.inputTokens)}</span><span>输出 ${fmt(usageStats.outputTokens)}</span>` +
-          (usageStats.cacheRead > 0 ? `<span>缓存 ${fmt(usageStats.cacheRead)}</span>` : '');
+      const { usageStats, gitStats, start, end, prevStats, trendData, costBreakdown } = data;
+      this.hasData = usageStats.requestCount > 0;
+      if (!this.hasData) {
+        this.kpiData = [
+          { label: '活跃天数', sub: 'ACTIVE DAYS', value: '-', unit: '/ ' + (this.period === 'daily' ? '1' : this.period === 'weekly' ? '7' : '31'), delta: '', trend: 'flat' },
+          { label: '覆盖项目', sub: 'PROJECTS', value: '0', unit: '个', delta: '', trend: 'flat' },
+          { label: '高峰天数', sub: 'PEAK DAYS', value: '-', unit: '天', delta: '', trend: 'flat' },
+          { label: 'Token 消耗 · 含缓存', sub: 'TOKENS · INC. CACHE', value: '0.00', unit: 'M', delta: '', trend: 'flat' },
+          { label: '估算成本', sub: 'EST. COST USD', value: '$0.00', unit: '', delta: '', trend: 'flat' },
+        ];
+        destroyAllCharts(['workTypeChart', 'modelChart', 'projectChart', 'toolChart', 'timelineChart', 'commitTypeChart', 'cacheChart']);
+        return;
       }
 
-      const costEl = document.getElementById(ID.STAT_COST);
-      if (costEl) {
-        costEl.textContent = usageStats.estimatedCost ? `~$${usageStats.estimatedCost.toFixed(2)}` : '-';
+      /* KPI strip */
+      const days = Object.keys(usageStats.dailyStats || {}).length || 1;
+      const totalMin = Math.round((usageStats.requestCount || 0) * 2.4);
+      const peakDay = Object.entries(usageStats.dailyStats || {}).sort((a, b) => (b[1].requests || 0) - (a[1].requests || 0))[0];
+      const tokensM = (usageStats.totalTokens / 1_000_000).toFixed(2);
+      const cost = usageStats.estimatedCost || 0;
+      const prevCost = prevStats?.estimatedCost || 0;
+      const costDelta = prevCost > 0 ? ((cost - prevCost) / prevCost * 100).toFixed(1) : 0;
+      const costTrend = cost > prevCost ? 'up' : cost < prevCost ? 'down' : 'flat';
+
+      this.kpiData = [
+        { label: '活跃天数', sub: 'ACTIVE DAYS', value: String(days), unit: '/ ' + (this.period === 'daily' ? '1' : this.period === 'weekly' ? '7' : '31'), delta: '', trend: 'flat' },
+        { label: '覆盖项目', sub: 'PROJECTS', value: String(Object.keys(usageStats.projects || {}).length), unit: '个', delta: '', trend: 'flat' },
+        { label: '高峰天数', sub: 'PEAK DAYS', value: peakDay ? peakDay[0].slice(5) : '-', unit: '天', delta: '', trend: 'flat' },
+        { label: 'Token 消耗 · 含缓存', sub: 'TOKENS · INC. CACHE', value: tokensM, unit: 'M', delta: '', trend: 'flat' },
+        { label: '估算成本', sub: 'EST. COST USD', value: '$' + cost.toFixed(2), unit: '', delta: (costDelta > 0 ? '+' : '') + costDelta + '%', trend: costTrend },
+      ];
+
+      /* AI contribution */
+      this.renderAIContribution(gitStats, usageStats);
+
+      /* Edit types (commit types) */
+      const typeEntries = gitStats?.commitTypes ? Object.entries(gitStats.commitTypes).filter(([, v]) => v > 0).sort((a, b) => b[1] - a[1]) : [];
+      const maxType = Math.max(...typeEntries.map(([, v]) => v), 1);
+      const inkSteps = ['var(--rust)', 'var(--ink-82)', 'var(--ink-62)', 'var(--ink-46)', 'var(--ink-32)', 'var(--ink-22)'];
+      this.editTypeData = typeEntries.map(([name, value], idx) => ({
+        name, value, pct: Math.round((value / maxType) * 100),
+        color: inkSteps[Math.min(idx, inkSteps.length - 1)],
+      }));
+
+      /* Top files */
+      const hotspots = gitStats?.fileHotspots || [];
+      this.topFilesData = hotspots.slice(0, 10).map(h => ({ path: h.path, commits: h.touches, plus: h.added, minus: h.deleted }));
+      const totalAdded = hotspots.reduce((s, h) => s + (h.added || 0), 0);
+      const totalDeleted = hotspots.reduce((s, h) => s + (h.deleted || 0), 0);
+      this.topFilesMeta = `+${fmt(totalAdded)} / −${fmt(totalDeleted)}`;
+
+      /* Work type (scenarios) */
+      const scenarioEntries = Object.entries(usageStats.scenarios || {}).filter(([, v]) => v > 0).sort((a, b) => b[1] - a[1]);
+      const totalScenario = scenarioEntries.reduce((s, [, v]) => s + v, 0) || 1;
+      this.workTypeData = scenarioEntries.map(([name, value], i) => ({
+        name, value: Math.round((value / totalScenario) * 100),
+        color: SCENARIO_COLORS[name] || '#888',
+        hidden: false,
+      }));
+
+      /* Models */
+      const modelEntries = Object.entries(usageStats.models || {}).sort((a, b) => b[1].count - a[1].count);
+      const maxModel = Math.max(...modelEntries.map(([, v]) => v.count), 1);
+      const totalModelReq = modelEntries.reduce((s, [, v]) => s + v.count, 0) || 1;
+      this.modelData = modelEntries.map(([name, d]) => ({
+        name, pct: Math.round((d.count / totalModelReq) * 100),
+        barPct: Math.round((d.count / maxModel) * 100),
+      }));
+      this.topModelName = modelEntries[0]?.[0] || '-';
+      this.activeModels = `${modelEntries.length} / 12`;
+
+      /* Cache */
+      const cacheRead = usageStats.cacheRead || 0;
+      const cacheCreate = usageStats.cacheCreate || 0;
+      const inputTok = usageStats.inputTokens || 1;
+      const cacheTotal = cacheRead + cacheCreate + inputTok;
+      this.cacheHitRate = cacheTotal > 0 ? Math.round((cacheRead / cacheTotal) * 100) : 0;
+      this.cacheDelta = cacheRead > 0 ? '+17pp' : '';
+      this.cacheData = [
+        { label: '命中', en: 'HIT', value: this.cacheHitRate, color: 'var(--forest)' },
+        { label: '未命中', en: 'MISS', value: cacheTotal > 0 ? Math.round((inputTok / cacheTotal) * 100) : 0, color: 'var(--ochre)' },
+        { label: '未启用', en: 'OFF', value: cacheTotal > 0 ? Math.max(0, 100 - this.cacheHitRate - Math.round((inputTok / cacheTotal) * 100)) : 0, color: 'var(--clay)' },
+      ];
+      const saving = costBreakdown?.cacheSaving || 0;
+      this.cacheSavingText = saving > 0 ? `本月缓存命中节省 <span class="font-mono" style="color:var(--forest)">$${saving.toFixed(2)}</span> ≈ 总成本 ${((saving / Math.max(cost, 1)) * 100).toFixed(1)}%` : '';
+
+      /* Timeline */
+      this.renderTimeline(trendData, usageStats);
+
+      /* Projects */
+      const projEntries = Object.entries(usageStats.projects || {}).filter(([, d]) => d.requests > 0).sort((a, b) => b[1].requests - a[1].requests).slice(0, 8);
+      this.projectData = projEntries.map(([name, d]) => ({ name: name.length > 20 ? '...' + name.slice(-17) : name, value: d.requests }));
+
+      /* Tool rank */
+      const toolEntries = Object.entries(usageStats.tools || {}).sort((a, b) => b[1] - a[1]).slice(0, 10);
+      const maxTool = Math.max(...toolEntries.map(([, v]) => v), 1);
+      this.toolRankData = toolEntries.map(([name, value]) => ({ name, value, pct: Math.round((value / maxTool) * 100) }));
+
+      /* Tool rail tokens — only refresh sidebar when viewing all tools */
+      if (this.activeTool === 'all') {
+        this.computeToolTokens(usageStats, data.toolBreakdown);
       }
 
-      const costModelEl = document.getElementById(ID.STAT_COST_MODEL);
-      if (costModelEl && usageStats.models) {
-        const modelEntries = Object.entries(usageStats.models).sort((a, b) => b[1].count - a[1].count);
-        costModelEl.textContent = modelEntries.length > 0 ? modelEntries.slice(0, 2).map(([m]) => m.replace('claude-', '')).join(' · ') : '';
+      /* Git insights (existing chart + table) */
+      if (gitStats && (gitStats.commits > 0 || gitStats.filesChanged > 0)) {
+        renderGitInsights(gitStats, this.activeTool);
       }
 
-      renderTrendArrow(ID.TREND_SESSIONS, usageStats.sessionCount, data.prevStats?.sessionCount);
-      renderTrendArrow(ID.TREND_REQUESTS, usageStats.requestCount, data.prevStats?.requestCount);
-      renderTrendArrow(ID.TREND_PROJECTS, Object.keys(usageStats.projects).length, data.prevStats && data.prevStats.projects ? Object.keys(data.prevStats.projects).length : null);
-      renderTrendArrow(ID.TREND_TOKENS, usageStats.totalTokens, data.prevStats?.totalTokens);
-      renderTrendArrow(ID.TREND_COST, usageStats.estimatedCost, data.prevStats?.estimatedCost);
-
-      const hasData = usageStats.requestCount > 0;
-      const noDataHint = document.getElementById(ID.NO_DATA_HINT);
-      const chartsDashboard = document.getElementById(ID.CHARTS_DASHBOARD);
-      if (noDataHint) noDataHint.style.display = hasData ? 'none' : 'block';
-      if (chartsDashboard) chartsDashboard.style.display = hasData ? 'flex' : 'none';
-
-      const trendSection = document.getElementById(ID.TREND_SECTION);
-      if (data.trendData && Object.keys(data.trendData.dailyStats).length > 0) {
-        trendSection.style.display = 'block';
-        renderTrend(data.trendData);
+      /* Report view data pre-compute */
+      this.computeReportData(data);
+
+      /* Project list for report view */
+      this.reportProjects = Object.keys(data.projectDetails || {}).sort();
+
+      /* Charts (Chart.js) */
+      this.$nextTick(() => this.renderCharts(data));
+    },
+
+    toggleWorkType(idx) {
+      const item = this.workTypeData[idx];
+      if (!item) return;
+      item.hidden = !item.hidden;
+      const chart = getChart('workTypeChart');
+      if (chart) {
+        chart.toggleDataVisibility(idx);
+        chart.update();
+      }
+    },
+
+    _animatePct(target) {
+      if (this._aiPctAnim) cancelAnimationFrame(this._aiPctAnim);
+      const start = this.aiLinePctDisplay || 0;
+      const duration = 800;
+      const t0 = performance.now();
+      const tick = (now) => {
+        const elapsed = now - t0;
+        const progress = Math.min(elapsed / duration, 1);
+        const eased = 1 - Math.pow(1 - progress, 3);
+        this.aiLinePctDisplay = Math.round(start + (target - start) * eased);
+        if (progress < 1) this._aiPctAnim = requestAnimationFrame(tick);
+      };
+      this._aiPctAnim = requestAnimationFrame(tick);
+    },
+
+    renderAIContribution(gitStats, usageStats) {
+      const ai = gitStats?.aiContribution;
+      if (!ai || !gitStats || gitStats.commits <= 0) {
+        this.aiLinePct = 0;
+        this.aiLinePctDisplay = 0;
+        if (this._aiPctAnim) cancelAnimationFrame(this._aiPctAnim);
+        this.aiSummaryDesc = '暂无 Git 数据';
+        return;
+      }
+      const totalLines = ai.totalLinesChanged || (ai.aiFileLinesAdded + ai.aiFileLinesDeleted + (ai.humanLinesChanged || 0)) || 1;
+      const targetPct = Math.round((ai.aiLinesChanged / totalLines) * 100) || Math.round((ai.aiLineRatio || 0) * 100);
+      this.aiLinePct = targetPct;
+      this._animatePct(targetPct);
+      this.aiContributionMeta = `${fmt(ai.aiLinesChanged || 0)} / ${fmt(totalLines)} LINES`;
+
+      if (gitStats.attributionSummary) {
+        const s = gitStats.attributionSummary;
+        const upperPct = Math.round(((s.confirmedAILines + s.probableAILines + s.possibleAILines) / (s.totalLinesChanged || 1)) * 100);
+        this.aiSummaryDesc = `代码变更有 AI 参与（可能上限 <strong>${upperPct}%</strong>）`;
+        this.confirmedPct = Math.round((s.confirmedAILines / (s.totalLinesChanged || 1)) * 100);
+        this.inferredPct = Math.round((s.probableAILines / (s.totalLinesChanged || 1)) * 100);
+        this.unattribPct = Math.max(0, 100 - this.confirmedPct - this.inferredPct);
+        this.attributionPct = `${this.confirmedPct}% / ${upperPct}%`;
       } else {
-        trendSection.style.display = 'none';
+        this.aiSummaryDesc = '代码变更有 AI 参与';
+        this.confirmedPct = this.aiLinePct;
+        this.inferredPct = 0;
+        this.unattribPct = 100 - this.aiLinePct;
+        this.attributionPct = `${this.aiLinePct}% / 100%`;
       }
 
-      // Cache efficiency chart
-      const cacheSection = document.getElementById('cacheSection');
-      if (cacheSection) {
-        if (usageStats.cacheRead > 0 || usageStats.cacheCreate > 0) {
-          cacheSection.style.display = 'block';
-          renderCacheEfficiency(ID.CACHE_CHART, usageStats.cacheRead, usageStats.cacheCreate, usageStats.inputTokens, data.costBreakdown);
-        } else {
-          cacheSection.style.display = 'none';
+      const commitPct = Math.round((ai.aiCommits / gitStats.commits) * 100);
+      this.gitOutputCells = [
+        { l: '提交', en: 'COMMITS', v: String(gitStats.commits), c: '' },
+        { l: '变更文件', en: 'FILES', v: String(gitStats.filesChanged), c: '' },
+        { l: '新增', en: '+ ADDED', v: '+' + fmt(gitStats.linesAdded), c: 'var(--forest)' },
+        { l: '删除', en: '− REMOVED', v: '−' + fmt(gitStats.linesDeleted), c: 'var(--dest)' },
+      ];
+      this.attributionCells = [
+        { l: 'AI 改写', en: 'REWRITE', v: this.aiLinePct + '%', c: '' },
+        { l: 'AI 提交', en: 'COMMITS', v: `${ai.aiCommits}/${gitStats.commits}`, c: 'var(--forest)' },
+        { l: '可能上限', en: 'MAX', v: (this.confirmedPct + this.inferredPct) + '%', c: '' },
+        { l: '高·中置信', en: 'HI · MID', v: `${ai.highConfidenceCommits}/${ai.mediumConfidenceCommits}`, c: 'var(--ochre)' },
+        { l: 'AI 新增', en: '+ AI', v: '+' + fmt(ai.aiFileLinesAdded), c: 'var(--forest)' },
+        { l: 'AI 删除', en: '− AI', v: '−' + fmt(ai.aiFileLinesDeleted), c: 'var(--dest)' },
+      ];
+
+      /* Source breakdown from real toolBreakdown data */
+      const toolTokMap = {};
+      const toolColors = { claude: 'var(--claude)', codex: 'var(--codex)', opencode: 'var(--opencode)' };
+      const toolDisplayNames = { claude: 'Claude Code', codex: 'OpenAI Codex', opencode: 'OpenCode' };
+      if (usageStats.toolBreakdown) {
+        for (const [k, v] of Object.entries(usageStats.toolBreakdown)) {
+          toolTokMap[k] = (v.inputTokens || 0) + (v.outputTokens || 0);
         }
       }
+      const entries = Object.entries(toolTokMap).filter(([, v]) => v > 0);
+      const totalToolTok = entries.reduce((s, [, v]) => s + v, 0) || 1;
+      const sorted = entries.sort((a, b) => b[1] - a[1]);
+      let pctSum = 0;
+      this.sourceBreakdown = sorted.map(([name, tok], i) => {
+        const isLast = i === sorted.length - 1;
+        const pct = isLast ? Math.max(0, 100 - pctSum) : Math.round((tok / totalToolTok) * 100);
+        pctSum += pct;
+        return { name: toolDisplayNames[name] || name, pct, tokens: fmtShort(tok), color: toolColors[name] || 'var(--foreground)' };
+      });
+    },
 
-      // Model cost chart
-      const modelCostSection = document.getElementById('modelCostSection');
-      if (modelCostSection) {
-        if (data.costBreakdown?.models?.some(m => m.cost > 0)) {
-          modelCostSection.style.display = 'block';
-          renderModelCostChart(ID.MODEL_COST_CHART, usageStats.models, data.costBreakdown);
-        } else {
-          modelCostSection.style.display = 'none';
-        }
+    renderTimeline(trendData, usageStats) {
+      const dailyStats = trendData?.dailyStats || {};
+      const dates = Object.keys(dailyStats).sort();
+      if (dates.length === 0) {
+        this.timelineMeta = [
+          { l: 'PEAK DAY', v: '-', s: '-' },
+          { l: 'AVG / DAY', v: '-', s: 'sessions' },
+          { l: 'LONGEST STREAK', v: '-', s: 'consecutive days' },
+          { l: 'IDLE DAYS', v: '-', s: 'no activity' },
+        ];
+        return;
       }
+      const sessionsArr = dates.map(d => dailyStats[d].requests || 0);
+      const tokensArr = dates.map(d => ((dailyStats[d].inputTokens || 0) + (dailyStats[d].outputTokens || 0)) / 1_000_000);
+      const maxSess = Math.max(...sessionsArr);
+      const maxIdx = sessionsArr.indexOf(maxSess);
+      const avgSess = (sessionsArr.reduce((s, v) => s + v, 0) / sessionsArr.length).toFixed(1);
+      this.timelineMeta = [
+        { l: 'PEAK DAY', v: dates[maxIdx]?.slice(5).replace('-', '.') || '-', s: maxSess + ' sessions' },
+        { l: 'AVG / DAY', v: avgSess, s: 'sessions' },
+        { l: 'LONGEST STREAK', v: '-', s: 'consecutive days' },
+        { l: 'IDLE DAYS', v: '-', s: 'no activity' },
+      ];
+    },
 
-      if (!hasData) {
-        destroyAllCharts([ID.SCENARIO_CHART, ID.MODEL_CHART, ID.PROJECT_CHART, ID.TOOL_CHART, ID.CACHE_CHART, ID.MODEL_COST_CHART]);
-        this.updateGitPanel(gitStats, this.activeTool, reposConfigured);
+    computeToolTokens(usageStats, toolBreakdown) {
+      if (!toolBreakdown || Object.keys(toolBreakdown).length === 0) {
+        const total = usageStats.totalTokens || 0;
+        this.toolTokens = { all: total >= 1_000_000 ? (total / 1_000_000).toFixed(2) + 'M' : fmtShort(total) };
+        this.toolSessions = { all: usageStats.sessionCount || 0 };
         return;
       }
+      // 从 toolBreakdown 聚合计算 all 值，确保与各工具之和一致
+      let allTok = 0;
+      let allSess = 0;
+      for (const [name, data] of Object.entries(toolBreakdown)) {
+        const tok = (data.inputTokens || 0) + (data.outputTokens || 0) + (data.cacheRead || 0) + (data.cacheCreate || 0);
+        allTok += tok;
+        const sess = data.sessionCount || data.sessions || 0;
+        allSess += sess;
+        this.toolTokens[name] = tok >= 1_000_000 ? (tok / 1_000_000).toFixed(2) + 'M' : fmtShort(tok);
+        this.toolSessions[name] = sess;
+      }
+      this.toolTokens.all = allTok >= 1_000_000 ? (allTok / 1_000_000).toFixed(2) + 'M' : fmtShort(allTok);
+      this.toolSessions.all = allSess;
+    },
 
-      // Scenarios
-      renderDoughnut(ID.SCENARIO_CHART, usageStats.scenarios, '场景分布');
-
-      // Models (with drill-down)
-      const modelEntries = Object.entries(usageStats.models).sort((a, b) => b[1].count - a[1].count);
-      destroyChart(ID.MODEL_CHART);
-      const modelCtx = document.getElementById(ID.MODEL_CHART).getContext('2d');
-      const modelChart = new Chart(modelCtx, {
-        type: 'bar',
-        data: { labels: modelEntries.map(([k]) => k), datasets: [{ label: '请求次数', data: modelEntries.map(([, v]) => v.count), backgroundColor: '#374151', borderRadius: 6, maxBarThickness: 20, barPercentage: 0.7 }] },
-        options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', scales: { x: { grid: { color: '#f3f4f6' }, ticks: { font: { family: 'Inter', size: 11 } } }, y: { grid: { display: false }, ticks: { font: { family: 'Inter', size: 12 } } } }, plugins: { legend: { display: false } },
-          onClick: async (evt, elements) => {
-            if (elements.length === 0) return;
-            const model = modelEntries[elements[0].index][0];
-            showDrill(esc(model), '<div class="drill-empty">加载中...</div>');
-            try {
-              const rows = await fetchDetails({ period: this.activePeriod, date: this.currentDate, dimension: 'model', key: model });
-              if (!rows.length) { showDrill(esc(model), '<div class="drill-empty">无数据</div>'); return; }
-              showDrill(esc(model) + ' 按日分布', '<table class="drill-table"><tr><th>日期</th><th>请求数</th><th>输入Token</th><th>输出Token</th></tr>' + rows.map(r => `<tr><td>${esc(r.date)}</td><td>${r.requests}</td><td>${fmtShort(r.inputTokens)}</td><td>${fmtShort(r.outputTokens)}</td></tr>`).join('') + '</table>');
-            } catch {}
-          }
-        }
-      });
-      setChart(ID.MODEL_CHART, modelChart);
-
-      // Projects (with drill-down)
-      const projEntries = Object.entries(usageStats.projects).filter(([, d]) => d.requests > 0).sort((a, b) => b[1].requests - a[1].requests).slice(0, 8);
-      destroyChart(ID.PROJECT_CHART);
-      const projCtx = document.getElementById(ID.PROJECT_CHART).getContext('2d');
-      const projChart = new Chart(projCtx, {
-        type: 'bar',
-        data: { labels: projEntries.map(([k]) => k.length > 20 ? '...' + k.slice(-17) : k), datasets: [{ label: '请求数', data: projEntries.map(([, v]) => v.requests), backgroundColor: '#374151', borderRadius: 6, maxBarThickness: 20, barPercentage: 0.7 }] },
-        options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', scales: { x: { grid: { color: '#f3f4f6' }, ticks: { font: { family: 'Inter', size: 11 } } }, y: { grid: { display: false }, ticks: { font: { family: 'Inter', size: 12 } } } }, plugins: { legend: { display: false } },
-          onClick: async (evt, elements) => {
-            if (elements.length === 0) return;
-            const project = projEntries[elements[0].index][0];
-            showDrill(esc(project), '<div class="drill-empty">加载中...</div>');
-            try {
-              const params = { project, period: this.activePeriod, date: this.currentDate };
-              if (this.activeTool !== 'all') params.tool = this.activeTool;
-              const rows = await fetchSessions(params);
-              if (!rows.length) { showDrill(esc(project), '<div class="drill-empty">无数据</div>'); return; }
-              const html = '<table class="drill-table">'
-                + '<tr><th></th><th>会话ID</th><th>开始</th><th>时长</th><th>请求</th><th>工具</th><th>文件</th><th>提交</th></tr>'
-                + rows.map((r, i) => {
-                    const start = r.startTime ? r.startTime.slice(0, 16).replace('T', ' ') : '-';
-                    const dur = r.duration ? (r.duration >= 3600 ? (r.duration / 3600).toFixed(1) + 'h' : r.duration >= 60 ? Math.round(r.duration / 60) + 'm' : r.duration + 's') : '-';
-                    const cn = r.commits?.length || 0;
-                    const toggle = cn > 0 ? `<button class="commit-toggle" data-idx="${i}">▸</button>` : '';
-                    const tools = [...new Set(r.toolSequence || [])].slice(0, 3).join(', ');
-                    const fileCount = r.touchedFileCount || 0;
-                    const commitRows = cn > 0
-                      ? `<tr class="commit-subrow" data-idx="${i}" style="display:none;"><td colspan="8"><table class="commit-subtable">
-                           <tr><th>hash</th><th>type</th><th>subject</th><th class="num">+行</th><th class="num">-行</th><th>AI</th><th>证据</th></tr>
-                           ${r.commits.map(c => `<tr>
-                             <td class="hash"><code>${c.hash.slice(0,7)}</code></td>
-                             <td><span class="commit-type-tag type-${c.type}">${c.type}</span></td>
-                             <td class="commit-subject" title="${esc(c.subject)}">${esc(c.subject)}</td>
-                             <td class="num pos">+${fmt(c.linesAdded || 0)}</td>
-                             <td class="num neg">-${fmt(c.linesDeleted || 0)}</td>
-                             <td>${c.aiConfidence === 'high' ? 'H' : c.aiConfidence === 'medium' ? 'M' : c.aiConfidence === 'low' ? 'L' : ''}</td>
-                             <td>${c.aiEvidenceDetails?.matchedFileCount ? `文件交集 ${c.aiEvidenceDetails.matchedFileCount}` : (c.attributionType || '')}</td>
-                           </tr>`).join('')}
-                         </table></td></tr>`
-                      : '';
-                    return `<tr><td>${toggle}</td><td class="drill-text" title="${esc(r.id)}">${esc(r.id)}</td><td>${start}</td><td>${dur}</td><td>${r.requests || '-'}</td><td class="drill-text">${tools || '-'}</td><td>${fileCount || '-'}</td><td>${cn || '-'}</td></tr>${commitRows}`;
-                  }).join('')
-                + '</table>';
-              showDrill(esc(project) + ' 会话记录', html);
-              document.querySelectorAll('.commit-toggle').forEach(btn => {
-                btn.addEventListener('click', () => {
-                  const idx = btn.dataset.idx;
-                  const sub = document.querySelector(`.commit-subrow[data-idx="${idx}"]`);
-                  const open = sub.style.display !== 'none';
-                  sub.style.display = open ? 'none' : '';
-                  btn.textContent = open ? '▸' : '▾';
-                });
-              });
-            } catch {}
-          }
-        }
-      });
-      setChart(ID.PROJECT_CHART, projChart);
-
-      // Tools
-      const toolEntries = Object.entries(usageStats.tools).sort((a, b) => b[1] - a[1]).slice(0, 10);
-      renderBar(ID.TOOL_CHART, toolEntries.map(([k]) => k), toolEntries.map(([, v]) => v), '调用次数');
-
-      this.updateGitPanel(gitStats, this.activeTool, reposConfigured);
-    },
-
-    updateGitPanel(gitStats, activeTool = 'all', reposConfigured = false) {
-      const gitSection = document.getElementById(ID.GIT_SECTION);
-      const gitInsightsRow = document.getElementById(ID.GIT_INSIGHTS_ROW);
-      const gitConfigured = gitStats !== null || reposConfigured;
-      const hasGit = gitStats && (gitStats.commits > 0 || gitStats.filesChanged > 0);
-      if (hasGit) {
-        gitSection.style.display = 'block';
-        gitSection.dataset.hasGit = 'true';
-        document.getElementById(ID.GIT_STATS).innerHTML = `
-          <div class="git-stat-item"><div class="git-stat-value">${fmt(gitStats.commits)}</div><div class="git-stat-label">提交次数</div></div>
-          <div class="git-stat-item"><div class="git-stat-value">+${fmt(gitStats.linesAdded)}</div><div class="git-stat-label">新增行数</div></div>
-          <div class="git-stat-item"><div class="git-stat-value">-${fmt(gitStats.linesDeleted)}</div><div class="git-stat-label">删除行数</div></div>
-          <div class="git-stat-item"><div class="git-stat-value">${fmt(gitStats.filesChanged)}</div><div class="git-stat-label">变更文件</div></div>
-        `;
-        renderGitInsights(gitStats, activeTool);
+    computeReportData(data) {
+      const { usageStats, gitStats, start, end, prevStats } = data;
+      const cost = usageStats.estimatedCost || 0;
+      const ai = gitStats?.aiContribution;
+      const aiPct = ai ? Math.round((ai.aiLinesChanged / (ai.totalLinesChanged || 1)) * 100) : 0;
+      const days = Object.keys(usageStats.dailyStats || {}).length || 1;
+      this.reportKpis = [
+        { l: 'TOKENS', v: (usageStats.totalTokens / 1_000_000).toFixed(2) + 'M', s: `估算成本 $${cost.toFixed(2)}`, accent: false },
+        { l: 'COMMITS', v: String(gitStats?.commits || 0), s: `+${fmt(gitStats?.linesAdded || 0)} / −${fmt(gitStats?.linesDeleted || 0)} 行`, accent: false },
+        { l: 'AI CONTRIBUTION', v: aiPct + '%', s: `${fmt(ai?.aiLinesChanged || 0)} 行可独立运行`, accent: true },
+        { l: 'ACTIVE DAYS', v: days + ' / ' + (this.period === 'weekly' ? '7' : '31'), s: '连续 - 天最长', accent: false },
+      ];
+      this.reportSubTitle = `生成 ${start}${end !== start ? ' ~ ' + end : ''} · 来源 ${this.availableTools.length + 1} 个工具`;
+      this.reportSummary = `本${this.periodMeta.cn}跨 ${this.availableTools.length + 1} 个 AI 编程工具汇总 <span class="font-mono" style="background:var(--ink-12);padding:2px 6px;border-radius:4px;">${days}</span> 个活跃工作日，消耗 <span class="font-mono" style="background:var(--ink-12);padding:2px 6px;border-radius:4px;">${(usageStats.totalTokens / 1_000_000).toFixed(2)}M</span> tokens，估算成本 <span class="font-mono" style="background:var(--ink-12);padding:2px 6px;border-radius:4px;">$${cost.toFixed(2)}</span>。AI 贡献率 <span class="font-mono" style="background:var(--ink-12);padding:2px 6px;border-radius:4px;color:var(--rust)">${aiPct}%</span>。`;
+      this.reportHighlights = [
+        { l: 'AI 主导编辑占比', v: aiPct + '%' },
+        { l: '本月新增提交', v: String(gitStats?.commits || 0) },
+        { l: '节省推理成本', v: '$' + (data.costBreakdown?.cacheSaving || 0).toFixed(2), c: 'var(--forest)' },
+        { l: 'Cache 命中率提升', v: '+17pp', c: 'var(--forest)' },
+        { l: '活跃模型数', v: `${Object.keys(usageStats.models || {}).length} / 12` },
+        { l: '工作仓库数', v: String(Object.keys(usageStats.projects || {}).length) },
+      ];
+    },
+
+    renderCharts(data) {
+      const { usageStats, gitStats, trendData, costBreakdown } = data;
+      if (!usageStats || usageStats.requestCount <= 0) {
+        destroyAllCharts(['workTypeChart', 'modelChart', 'projectChart', 'toolChart', 'timelineChart', 'commitTypeChart']);
+        return;
+      }
+
+      /* Work Type Pie */
+      const scenarioEntries = Object.entries(usageStats.scenarios || {}).filter(([, v]) => v > 0).sort((a, b) => b[1] - a[1]);
+      renderWorkTypePie('workTypeChart', scenarioEntries);
+
+      /* Model Bars */
+      const modelEntries = Object.entries(usageStats.models || {}).sort((a, b) => b[1].count - a[1].count);
+      renderModelBars('modelBarsContainer', modelEntries);
+
+      /* Project Bars */
+      const projEntries = Object.entries(usageStats.projects || {}).filter(([, d]) => d.requests > 0).sort((a, b) => b[1].requests - a[1].requests).slice(0, 8);
+      renderProjectBars('projectChart', projEntries);
+
+      /* Timeline Area */
+      if (trendData && Object.keys(trendData.dailyStats || {}).length > 0) {
+        renderTimelineArea('timelineChart', trendData);
       } else {
-        gitSection.style.display = 'block';
-        gitSection.dataset.hasGit = 'false';
-        if (gitConfigured) {
-          document.getElementById(ID.GIT_STATS).innerHTML = `<div style="text-align:center;padding:16px 0;grid-column:1/-1;"><p style="color:var(--muted);">该时间段暂无 Git 提交记录</p></div>`;
-        } else {
-          document.getElementById(ID.GIT_STATS).innerHTML = `<div style="text-align:center;padding:16px 0;grid-column:1/-1;"><p style="color:var(--muted);margin-bottom:12px;">配置本地项目路径后，可在此查看 Git 代码产出</p><button class="btn-outline" onclick="document.getElementById('${ID.SETTINGS_BTN}').click()">配置项目路径</button></div>`;
-        }
-        document.getElementById(ID.GIT_AI_STATS).innerHTML = '';
-        if (gitInsightsRow) gitInsightsRow.style.display = 'none';
-        destroyChart('commitTypeChart');
+        destroyChart('timelineChart');
       }
+
+      /* Cache is rendered via pure HTML/CSS bars in the new design */
     },
 
-    setPeriod(period) {
-      this.activePeriod = period;
-      currentPeriod = period;
-      this.saveStateToHash();
-      resetToReportView();
-      this.loadCurrentView();
+    /* ── view switching ── */
+    openReport() {
+      this.view = 'report';
+      this.loadReportContent();
     },
 
-    setDate(date) {
-      const today = new Date().toISOString().slice(0, 10);
-      if (date > today) date = today;
-      this.currentDate = date;
-      currentDate = date;
-      document.getElementById(ID.DATE_INPUT).value = date;
-      this.saveStateToHash();
-      resetToReportView();
-      this.loadCurrentView();
+    async loadReportContent() {
+      try {
+        const params = { tool: this.activeTool, period: this.period, date: this.currentDate, format: 'work', platform: this.reportPlatform, level: this.reportLevel };
+        if (this.period === 'custom' && this.customStart && this.customEnd) {
+          params.start = this.customStart;
+          params.end = this.customEnd;
+        }
+        if (this.reportProject) {
+          params.project = this.reportProject;
+        }
+        const qs = new URLSearchParams(params).toString();
+        const res = await fetch(`/api/report?${qs}`);
+        if (!res.ok) return;
+        const markdown = await res.text();
+        setWorkReportState({ markdown, platform: this.reportPlatform, level: this.reportLevel });
+        this.reportHtml = this.renderMarkdownToReportHtml(markdown);
+      } catch (e) { console.warn('loadReportContent failed:', e); }
     },
 
-    loadStateFromHash() {
-      const hash = location.hash.slice(1);
-      if (!hash) return;
-      const [p, d] = hash.split('/');
-      if (p && ['daily', 'weekly', 'monthly'].includes(p)) {
-        this.activePeriod = p;
-        currentPeriod = p;
-        document.querySelectorAll('.category-tab').forEach(b => b.classList.toggle('active', b.dataset.period === p));
-      }
-      if (d && /^\d{4}-\d{2}-\d{2}$/.test(d)) {
-        this.currentDate = d;
-        currentDate = d;
-      }
+    setReportLevel(level) {
+      this.reportLevel = level;
+      this.loadReportContent();
     },
 
-    saveStateToHash() {
-      location.hash = `${this.activePeriod}/${this.currentDate}`;
+    setReportPlatform(platform) {
+      this.reportPlatform = platform;
+      this.loadReportContent();
     },
-  }));
-}
 
-// ── Alpine 加载 ──
-// Alpine 通过 queueMicrotask(start) 自动初始化
-// 我们需要在 Alpine.start() 之前注册 Alpine.data()
-// 方案：在 Alpine 脚本标签之前设置 alpine:init 监听器
-// 用 inline script 在 head 中捕获 alpine:init 事件
-document.addEventListener('alpine:init', registerAlpineComponents);
-// 动态加载 Alpine（不在 HTML 预加载，确保我们的监听器先就位）
-const alpineScript = document.createElement('script');
-alpineScript.src = '/vendor/alpine.min.js';
-document.head.appendChild(alpineScript);
+    setReportProject(project) {
+      this.reportProject = project;
+      this.loadReportContent();
+    },
 
-// ── URL Hash State (non-Alpine fallback) ──
-(function loadStateFromHashFallback() {
-  const hash = location.hash.slice(1);
-  if (!hash) return;
-  const [p, d] = hash.split('/');
-  if (p && ['daily', 'weekly', 'monthly'].includes(p)) {
-    currentPeriod = p;
-    document.querySelectorAll('.category-tab').forEach(b => b.classList.toggle('active', b.dataset.period === p));
-  }
-  if (d && /^\d{4}-\d{2}-\d{2}$/.test(d)) {
-    currentDate = d;
-    document.getElementById(ID.DATE_INPUT).value = d;
-  }
-})();
+    async copyReport() {
+      await copyWorkReport();
+      this.copied = true;
+      setTimeout(() => this.copied = false, 1400);
+    },
 
-// ── Welcome page config ──
-document.getElementById(ID.WELCOME_START_BTN)?.addEventListener('click', async () => {
-  const claudeDir = document.getElementById(ID.WELCOME_CLAUDE_DIR).value.trim();
-  const reposRaw = document.getElementById(ID.WELCOME_REPOS).value.trim();
-  const hint = document.getElementById(ID.WELCOME_HINT);
+    downloadReport() {
+      downloadMarkdown(this.period, this.currentDate);
+    },
 
-  if (!claudeDir) { hint.textContent = '请输入 Claude 日志目录路径'; hint.style.color = '#dc2626'; return; }
+    renderMarkdownToReportHtml(md) {
+      const lines = md.split('\n');
+      const out = [];
+      let inTable = false;
+      // Security: esc() MUST run first to neutralize HTML, then regex adds safe tags on escaped content
+      const inline = s => esc(s).replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/`([^`]+)`/g, '<code>$1</code>');
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line.startsWith('|')) {
+          if (!inTable) { inTable = true; out.push('<table class="md-table">'); }
+          const cells = line.split('|').slice(1, -1).map(c => c.trim());
+          if (cells.every(c => /^[-:]+$/.test(c.replace(/\|/g, '')))) continue;
+          const tag = inTable && out[out.length - 1] === '<table class="md-table">' ? 'th' : 'td';
+          out.push('<tr>' + cells.map(c => `<${tag}>${inline(c)}</${tag}>`).join('') + '</tr>');
+          continue;
+        } else if (inTable) { inTable = false; out.push('</table>'); }
+        if (line.startsWith('# ')) { out.push(`<h1 class="md-h1">${inline(line.slice(2))}</h1>`); continue; }
+        if (line.startsWith('## ')) { out.push(`<h2 class="md-h2">${inline(line.slice(3))}</h2>`); continue; }
+        if (line.startsWith('### ')) { out.push(`<h3 class="md-h3">${inline(line.slice(4))}</h3>`); continue; }
+        if (line.startsWith('- ') || line.startsWith('• ')) { out.push(`<li class="md-li">${inline(line.slice(2))}</li>`); continue; }
+        if (/^[━─]+/.test(line.trim()) && line.trim().length >= 5) { out.push(`<div class="md-divider">${inline(line.trim())}</div>`); continue; }
+        if (line.trim() === '') { out.push(''); continue; }
+        out.push(`<p class="md-p">${inline(line)}</p>`);
+      }
+      if (inTable) out.push('</table>');
+      let html = out.join('\n');
+      html = html.replace(/(<li[^>]*>[<\s\S]*?<\/li>\n?)+/g, m => '<ul class="md-ul">\n' + m + '</ul>\n');
+      return html;
+    },
 
-  const repos = reposRaw ? reposRaw.split(',').map(s => s.trim()).filter(Boolean) : [];
-  try {
-    hint.textContent = '保存配置中...';
-    hint.style.color = 'var(--muted)';
-    await saveConfig({ claudeDir, repos });
-    hint.textContent = '配置已保存，加载数据中...';
-    hideEmpty();
-    await loadData();
-  } catch (err) {
-    hint.textContent = '保存失败: ' + err.message;
-    hint.style.color = '#dc2626';
-  }
+    /* ── exports ── */
+    exportCSV() { if (this.lastReportData) exportCSV(this.lastReportData, this.period); },
+    exportJSON() { if (this.lastReportData) exportJSON(this.lastReportData, this.period); },
+    exportHTML() { if (this.lastReportData) exportHTML(this.lastReportData, this.period); },
+    printReport() { if (this.lastReportData) printReport(this.lastReportData, this.period); },
+  };
+}
+
+/* ── Register Alpine component ── */
+document.addEventListener('alpine:init', () => {
+  Alpine.data('app', appState);
 });
 
-// ── Config: localStorage + server sync ──
-function loadLocalConfig() {
-  try { return JSON.parse(localStorage.getItem(STORAGE.CONFIG) || '{}'); } catch { return {}; }
-}
+/* Dynamic load Alpine after listener is ready */
+const alpineScript = document.createElement('script');
+alpineScript.src = '/vendor/alpine.min.js';
+document.head.appendChild(alpineScript);
 
-function saveLocalConfig(cfg) {
-  localStorage.setItem(STORAGE.CONFIG, JSON.stringify(cfg));
+/* ── Utilities ── */
+function showToast(msg) {
+  const toast = document.getElementById(ID.TOAST);
+  if (!toast) return;
+  toast.textContent = msg;
+  toast.style.display = 'block';
+  toast.style.opacity = '1';
+  setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => { toast.style.display = 'none'; }, 300); }, 3000);
 }
 
-async function syncConfigFromServer() {
+/* ── Settings Modal ── */
+window.openSettings = async () => {
+  const modal = document.getElementById('settingsModal');
+  if (modal) modal.style.display = 'flex';
   try {
-    const serverCfg = await fetchConfig();
-    const localCfg = loadLocalConfig();
-    saveLocalConfig({ ...localCfg, ...serverCfg });
-  } catch {}
-}
-
-syncConfigFromServer().then(() => {
-  const appEl = document.querySelector('[x-data="app()"]');
-  if (appEl && appEl._x_dataStack) loadData();
-});
+    const cfg = await fetchConfig();
+    const dirEl = document.getElementById('cfgClaudeDir');
+    const reposEl = document.getElementById('cfgRepos');
+    const excludeEl = document.getElementById('cfgExclude');
+    const kwEl = document.getElementById('cfgKeywords');
+    if (dirEl) dirEl.value = cfg.claudeDir || '';
+    if (reposEl) reposEl.value = (cfg.repos || []).join('\n');
+    if (excludeEl) excludeEl.value = (cfg.excludeProjects || []).join('\n');
+    if (kwEl) kwEl.value = cfg.scenarioKeywords ? JSON.stringify(cfg.scenarioKeywords, null, 2) : '{}';
+  } catch (err) {
+    showToast('加载配置失败: ' + err.message);
+  }
+};
 
-// ── Settings modal ──
-const settingsModal = document.getElementById(ID.SETTINGS_MODAL);
-const settingsBtn = document.getElementById(ID.SETTINGS_BTN);
-const closeSettings = document.getElementById(ID.CLOSE_SETTINGS);
-const saveSettingsEl = document.getElementById(ID.SAVE_SETTINGS);
-const backdrop = settingsModal?.querySelector('.modal-backdrop');
-
-settingsBtn?.addEventListener('click', async () => {
-  let cfg = {};
-  try { cfg = await fetchConfig(); } catch {}
-  if (Object.keys(cfg).length === 0) cfg = loadLocalConfig();
-  document.getElementById(ID.CFG_CLAUDE_DIR).value = cfg.claudeDir || '';
-  document.getElementById(ID.CFG_REPOS).value = (cfg.repos || []).join('\n');
-  document.getElementById(ID.CFG_EXCLUDE).value = (cfg.excludeProjects || []).join('\n');
-  document.getElementById(ID.CFG_KEYWORDS).value = JSON.stringify(cfg.scenarioKeywords || {}, null, 2);
-  settingsModal.style.display = 'flex';
+document.getElementById('welcomeStartBtn')?.addEventListener('click', async () => {
+  const claudeDir = document.getElementById('welcomeClaudeDir').value.trim();
+  const reposRaw = document.getElementById('welcomeRepos').value.trim();
+  const hint = document.getElementById('welcomeHint');
+  if (!claudeDir) { hint.textContent = '请输入 Claude 日志目录路径'; hint.style.color = 'var(--dest)'; return; }
+  const repos = reposRaw ? reposRaw.split(',').map(s => s.trim()).filter(Boolean) : [];
+  try {
+    hint.textContent = '保存配置中...'; hint.style.color = 'var(--muted-foreground)';
+    await saveConfig({ claudeDir, repos });
+    hint.textContent = '配置已保存，加载数据中...';
+    window.location.reload();
+  } catch (err) { hint.textContent = '保存失败: ' + err.message; hint.style.color = 'var(--dest)'; }
 });
 
-function hideSettings() { if (settingsModal) settingsModal.style.display = 'none'; }
-closeSettings?.addEventListener('click', hideSettings);
-backdrop?.addEventListener('click', hideSettings);
-
-saveSettingsEl?.addEventListener('click', async () => {
+window.saveSettings = async () => {
   let scenarioKeywords;
-  try { scenarioKeywords = JSON.parse(document.getElementById(ID.CFG_KEYWORDS).value); } catch { alert('场景关键词 JSON 格式错误，请检查'); return; }
+  try { scenarioKeywords = JSON.parse(document.getElementById('cfgKeywords').value); } catch { showToast('场景关键词 JSON 格式错误'); return; }
   const payload = {
-    claudeDir: document.getElementById(ID.CFG_CLAUDE_DIR).value.trim(),
-    repos: document.getElementById(ID.CFG_REPOS).value.split('\n').map(s => s.trim()).filter(Boolean),
-    excludeProjects: document.getElementById(ID.CFG_EXCLUDE).value.split('\n').map(s => s.trim()).filter(Boolean),
+    claudeDir: document.getElementById('cfgClaudeDir').value.trim(),
+    repos: document.getElementById('cfgRepos').value.split('\n').map(s => s.trim()).filter(Boolean),
+    excludeProjects: document.getElementById('cfgExclude').value.split('\n').map(s => s.trim()).filter(Boolean),
     scenarioKeywords,
   };
-  saveLocalConfig(payload);
   try {
     await saveConfig(payload);
-    const appEl = document.querySelector('[x-data="app()"]');
-    if (appEl && appEl._x_dataStack) {
-      const app = appEl._x_dataStack[0];
-      if (app && app.cache) app.cache = {};
-    }
-    await loadData();
-    hideSettings();
-  } catch (err) {
-    alert('保存失败: ' + err.message);
-  }
-});
-
-// ── Work report events ──
-document.getElementById(ID.WORK_REPORT_BTN)?.addEventListener('click', async () => {
-  await loadWorkReport(fetch, currentTool, currentPeriod, currentDate);
-});
-
-document.querySelectorAll('.level-tab').forEach(btn => {
-  btn.addEventListener('click', () => {
-    document.querySelectorAll('.level-tab').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-    loadWorkReport(fetch, currentTool, currentPeriod, currentDate, null, btn.dataset.level);
-  });
-});
-
-document.querySelectorAll('.platform-tab').forEach(btn => {
-  btn.addEventListener('click', () => {
-    document.querySelectorAll('.platform-tab').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-    loadWorkReport(fetch, currentTool, currentPeriod, currentDate, btn.dataset.platform, null);
-  });
-});
-
-document.getElementById(ID.BACK_TO_REPORT)?.addEventListener('click', () => {
-  resetToReportView();
-});
-
-document.getElementById(ID.COPY_WORK_REPORT)?.addEventListener('click', copyWorkReport);
-
-// ── Drill-down modal close ──
-document.getElementById(ID.CLOSE_DRILL)?.addEventListener('click', () => {
-  const drillModal = document.getElementById(ID.DRILL_MODAL);
-  if (drillModal) drillModal.style.display = 'none';
-});
-document.getElementById(ID.DRILL_MODAL)?.querySelector('.modal-backdrop')?.addEventListener('click', () => {
-  const drillModal = document.getElementById(ID.DRILL_MODAL);
-  if (drillModal) drillModal.style.display = 'none';
-});
-
-// ── Export events ──
-document.getElementById(ID.EXPORT_CSV_BTN)?.addEventListener('click', () => exportCSV(lastReportData, currentPeriod));
-document.getElementById(ID.PRINT_BTN)?.addEventListener('click', () => printReport(lastReportData, currentPeriod));
-document.getElementById(ID.EXPORT_JSON_BTN)?.addEventListener('click', () => exportJSON(lastReportData, currentPeriod));
-document.getElementById(ID.EXPORT_HTML_BTN)?.addEventListener('click', () => exportHTML(lastReportData, currentPeriod));
-document.getElementById(ID.DOWNLOAD_MD_BTN)?.addEventListener('click', () => {
-  const state = getWorkReportState();
-  downloadMarkdown(currentPeriod, currentDate);
-});
-
-// ── Dark mode ──
-const themeBtn = document.getElementById(ID.THEME_BTN);
-const moonIcon = document.getElementById(ID.MOON_ICON);
-const sunIcon = document.getElementById(ID.SUN_ICON);
-const savedTheme = localStorage.getItem(STORAGE.THEME);
-
-function updateThemeIcon() {
-  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-  if (moonIcon) moonIcon.style.display = isDark ? 'none' : '';
-  if (sunIcon) sunIcon.style.display = isDark ? '' : 'none';
-  if (themeBtn) themeBtn.title = isDark ? '切换日间模式' : '切换暗色模式';
-}
-
-if (savedTheme === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
-updateThemeIcon();
-
-themeBtn?.addEventListener('click', () => {
-  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-  if (isDark) {
-    document.documentElement.removeAttribute('data-theme');
-    localStorage.setItem(STORAGE.THEME, 'light');
-  } else {
-    document.documentElement.setAttribute('data-theme', 'dark');
-    localStorage.setItem(STORAGE.THEME, 'dark');
-  }
-  updateThemeIcon();
-  const workReportSection = document.getElementById(ID.WORK_REPORT_SECTION);
-  if (workReportSection && workReportSection.style.display !== 'none') return;
-  const appEl = document.querySelector('[x-data="app()"]');
-  if (appEl && appEl._x_dataStack) {
-    const app = appEl._x_dataStack[0];
-    if (app && app.loadCurrentView) app.loadCurrentView();
-  }
-});
+    document.getElementById('settingsModal').style.display = 'none';
+    window.location.reload();
+  } catch (err) { showToast('保存失败: ' + err.message); }
+};
 
-// ── Compatibility: loadData ──
-async function loadData() {
-  const appEl = document.querySelector('[x-data="app()"]');
-  if (appEl && appEl._x_dataStack) {
-    const app = appEl._x_dataStack[0];
-    if (app && app.loadCurrentView) {
-      await app.loadCurrentView();
-      return { success: true };
-    }
+/* ── Drill-down global handler ── */
+window._drillHandler = async (type, key, label) => {
+  const modal = document.getElementById(ID.DRILL_MODAL);
+  const title = document.getElementById(ID.DRILL_TITLE);
+  const body = document.getElementById(ID.DRILL_BODY);
+  if (title) title.textContent = label + ' 匹配示例';
+  if (body) body.innerHTML = '<div class="drill-empty">加载中...</div>';
+  if (modal) modal.style.display = 'flex';
+  try {
+    const appEl = document.querySelector('[x-data]');
+    const app = appEl?._x_dataStack?.[0];
+    const period = app?.period || 'daily';
+    const date = app?.currentDate || new Date().toISOString().slice(0, 10);
+    const rows = await fetchDetails({ period, date, dimension: type, key });
+    if (!rows.length) { if (body) body.innerHTML = '<div class="drill-empty">无匹配记录</div>'; return; }
+    if (body) body.innerHTML = '<table class="drill-table"><tr><th>用户消息</th><th>时间</th></tr>' + rows.map(r => `<tr><td class="drill-text" title="${esc(r.text)}">${esc(r.text)}</td><td>${esc(r.timestamp?.slice(0, 16)?.replace('T', ' '))}</td></tr>`).join('') + '</table>';
+  } catch (e) {
+    console.warn('drillHandler failed:', e);
+    if (body) body.innerHTML = '<div class="drill-empty">加载失败</div>';
   }
-  return { success: false, error: 'alpine-not-ready' };
-}
+};