lumencode 1.2.0 → 1.3.1

package/public/app.js

@@ -1,8 +1,8 @@
 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 { createLatestRequestGuard, fetchTools, fetchReport, fetchConfig, saveConfig, fetchDetails, fetchSessions, fetchStepStats, fetchHooksStatus, updateHooks } from './api.js';
 import { renderWorkTypePie, renderModelBars, renderProjectBars, renderTimelineArea, renderCacheStack } from './charts.js';
-import { renderGitInsights } from './git-insights.js';
+import { renderGitInsights, renderLineBlameEvidence } from './git-insights.js';
 import { loadWorkReport, copyWorkReport, downloadMarkdown, getWorkReportState, setWorkReportState } from './work-report.js';
 import { exportCSV, printReport, exportJSON, exportHTML } from './export.js';
 
@@ -95,6 +95,12 @@ function appState() {
     sourceOpencodePct: 0,
     sourceBreakdown: [],
     aiContributionMeta: '- / - LINES',
+    lineBlameEvidence: null,
+    lineBlamePrecision: '',
+    stepStats: null,
+    stepStatusLabel: '',
+    hooksStatus: null,
+    hooksBusy: false,
     gitOutputCells: [
       { l: '提交', en: 'COMMITS', v: '-', c: '' },
       { l: '变更文件', en: 'FILES', v: '-', c: '' },
@@ -146,6 +152,36 @@ function appState() {
     reportSummary: '',
     reportHighlights: [],
 
+    get hooksNeedAction() {
+      if (!this.hooksStatus) return false;
+      return !this.hooksStatus.stepsInitialized ||
+        !this.hooksStatus.claude?.enabled ||
+        !this.hooksStatus.codex?.enabled ||
+        !this.hooksStatus.opencode?.enabled;
+    },
+
+    get hooksStatusText() {
+      if (!this.hooksStatus) return '正在检查 hooks 状态';
+      const total = this.hooksStatus.projectCount ?? this.hooksStatus.claude?.total ?? 0;
+      if (this.hooksStatus.targetMode === 'configured-projects') {
+        if (total === 0) return '未配置项目，请先在设置中添加项目路径';
+        const parts = [
+          `Claude ${this.hooksStatus.claude?.enabledCount || 0}/${total}`,
+          `Codex ${this.hooksStatus.codex?.enabledCount || 0}/${total}`,
+          `OpenCode ${this.hooksStatus.opencode?.enabledCount || 0}/${total}`,
+          `steps ${this.hooksStatus.stepsReadyCount || 0}/${total}`,
+        ];
+        return `设置内项目 hooks：${parts.join(' / ')}`;
+      }
+      const parts = [
+        `Claude ${this.hooksStatus.claude?.enabled ? '已开启' : '未开启'}`,
+        `Codex ${this.hooksStatus.codex?.enabled ? '已开启' : '未开启'}`,
+        `OpenCode ${this.hooksStatus.opencode?.enabled ? '已开启' : '未开启'}`,
+        `steps ${this.hooksStatus.stepsInitialized ? '已初始化' : '未初始化'}`,
+      ];
+      return parts.join(' / ');
+    },
+
     /* ── init ── */
     async init() {
       this.loadStateFromHash();
@@ -157,6 +193,8 @@ function appState() {
         }
       });
       await this.loadTools();
+      await this.loadHooksStatus();
+      await this.loadStepStats();
       // 首次加载时先获取全量数据填充侧边栏，再按当前工具加载
       if (this.activeTool !== 'all') {
         try {
@@ -189,6 +227,83 @@ function appState() {
       } catch (e) { console.warn('loadTools failed:', e); this.availableTools = []; }
     },
 
+    async loadStepStats() {
+      try {
+        const data = await fetchStepStats();
+        this.stepStats = data;
+        this.stepStatusLabel = data?.available
+          ? `STEP READY · ${data.stepCount || 0}`
+          : 'STEP NOT READY';
+      } catch {
+        this.stepStats = null;
+        this.stepStatusLabel = '';
+      }
+    },
+
+    async loadHooksStatus() {
+      try {
+        this.hooksStatus = await fetchHooksStatus();
+      } catch (e) {
+        console.warn('loadHooksStatus failed:', e);
+        this.hooksStatus = null;
+      }
+    },
+
+    showHooksConfirmModal() {
+      const count = this.hooksStatus?.projectCount ?? 0;
+      const el = document.getElementById('hooksConfirmCount');
+      if (el) el.textContent = count;
+      const modal = document.getElementById('hooksConfirmModal');
+      if (modal) modal.style.display = 'flex';
+    },
+
+    hideHooksConfirmModal() {
+      const modal = document.getElementById('hooksConfirmModal');
+      if (modal) modal.style.display = 'none';
+    },
+
+    async enableHooksFromUi() {
+      this.hideHooksConfirmModal();
+      if (this.hooksBusy) return;
+      this.hooksBusy = true;
+      try {
+        await updateHooks('enable');
+        await this.loadHooksStatus();
+        await this.loadStepStats();
+        showToast('hooks 已开启');
+      } catch (err) {
+        showToast('开启 hooks 失败: ' + err.message);
+      } finally {
+        this.hooksBusy = false;
+      }
+    },
+
+    showHooksDisableConfirmModal() {
+      const modal = document.getElementById('hooksDisableConfirmModal');
+      if (modal) modal.style.display = 'flex';
+    },
+
+    hideHooksDisableConfirmModal() {
+      const modal = document.getElementById('hooksDisableConfirmModal');
+      if (modal) modal.style.display = 'none';
+    },
+
+    async disableHooksFromUi() {
+      this.hideHooksDisableConfirmModal();
+      if (this.hooksBusy) return;
+      this.hooksBusy = true;
+      try {
+        await updateHooks('disable');
+        await this.loadHooksStatus();
+        await this.loadStepStats();
+        showToast('hooks 已关闭');
+      } catch (err) {
+        showToast('关闭 hooks 失败: ' + err.message);
+      } finally {
+        this.hooksBusy = false;
+      }
+    },
+
     setTool(name) {
       this.activeTool = name;
       this.loadCurrentView();
@@ -535,6 +650,16 @@ function appState() {
         pctSum += pct;
         return { name: toolDisplayNames[name] || name, pct, tokens: fmtShort(tok), color: toolColors[name] || 'var(--foreground)' };
       });
+
+      /* Line-level blame evidence */
+      const blameEv = renderLineBlameEvidence(gitStats?.commitList);
+      if (blameEv) {
+        this.lineBlameEvidence = blameEv;
+        this.lineBlamePrecision = `行级归因: ${blameEv.aiLines}/${blameEv.totalLines} 行 (${blameEv.precision}%) · ${blameEv.commitCount} 提交`;
+      } else {
+        this.lineBlameEvidence = null;
+        this.lineBlamePrecision = '';
+      }
     },
 
     renderTimeline(trendData, usageStats) {

package/public/config.js

@@ -5,6 +5,8 @@ export const API = {
   CONFIG: '/api/config',
   DETAILS: '/api/details',
   SESSIONS: '/api/sessions',
+  STEP_STATS: '/api/step-stats',
+  HOOKS: '/api/hooks',
 };
 
 // 灰阶色板（按视觉权重从重到轻）

package/public/git-insights.js

@@ -42,6 +42,25 @@ function renderCommitTypeChart(typeEntries) {
   setChart('commitTypeChart', instance);
 }
 
+/**
+ * Render line-level attribution evidence summary.
+ * Called when gitStats.commitList has commits with lineBlame data.
+ */
+export function renderLineBlameEvidence(commitList) {
+  const blamed = (commitList || []).filter(c => c.lineBlame && c.lineBlame.source === 'step_blame');
+  if (blamed.length === 0) return null;
+  const totalAiLines = blamed.reduce((s, c) => s + (c.lineBlame.aiLines || 0), 0);
+  const totalLines = blamed.reduce((s, c) => s + (c.lineBlame.totalLines || 0), 0);
+  const totalAiDeleted = blamed.reduce((s, c) => s + (c.lineBlame.aiDeletedLines || 0), 0);
+  return {
+    commitCount: blamed.length,
+    aiLines: totalAiLines,
+    totalLines,
+    aiDeletedLines: totalAiDeleted,
+    precision: totalLines > 0 ? Math.round((totalAiLines / totalLines) * 100) : 0,
+  };
+}
+
 const COMMIT_TYPE_COLORS = {
   feat: '#8ab8a0', fix: '#c49090', refactor: '#a090c0', docs: '#90a8c8',
   test: '#c8b880', chore: '#a8a8a8', perf: '#c890b0', style: '#80b8b8',

package/public/index.html

@@ -52,6 +52,22 @@
             </ul>
           </nav>
 
+          <div class="rail-hooks" x-show="hooksStatus" x-cloak>
+            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
+              <span style="font-size:11px;font-weight:500;">行级 AI 归因</span>
+              <span class="font-mono" style="font-size:9px;letter-spacing:0.08em;opacity:0.55">HOOKS</span>
+            </div>
+            <div class="rail-hooks-meta" x-text="hooksStatusText"></div>
+            <div style="display:flex;gap:6px;margin-top:8px;">
+              <button class="rail-hooks-btn" x-show="hooksNeedAction" @click="showHooksConfirmModal()" :disabled="hooksBusy">
+                <span x-text="hooksBusy ? '...' : '开启'"></span>
+              </button>
+              <button class="rail-hooks-btn rail-hooks-btn--off" x-show="!hooksNeedAction" @click="showHooksDisableConfirmModal()" :disabled="hooksBusy">
+                关闭
+              </button>
+            </div>
+          </div>
+
           <div class="rail-footer">
             <div style="display:flex;align-items:center;justify-content:space-between;width:100%;">
               <div style="display:flex;align-items:center;gap:8px;">
@@ -188,6 +204,8 @@
               <span class="label section-head-en">/ AI CONTRIBUTION</span>
               <span class="section-head-line"></span>
               <span class="section-head-meta font-mono" style="font-size:10px;opacity:0.55" x-text="aiContributionMeta"></span>
+              <span x-show="stepStatusLabel && !lineBlameEvidence" class="font-mono" style="font-size:9px;padding:2px 8px;border-radius:4px;background:var(--ink-12);color:var(--foreground);letter-spacing:0.08em;opacity:0.7" x-text="stepStatusLabel"></span>
+              <span x-show="lineBlameEvidence" class="font-mono" style="font-size:9px;padding:2px 8px;border-radius:4px;background:var(--forest);color:var(--background);letter-spacing:0.08em;opacity:0.85">LINE-BLAME</span>
             </div>
 
             <div class="ai-hero-grid">
@@ -196,6 +214,7 @@
                   <div style="flex-shrink:0;">
                     <div class="ai-hero-pct"><span class="text-aurora-shimmer" x-text="aiLinePctDisplay"></span><span :style="'color:' + colors.rust">%</span></div>
                     <div class="ai-hero-desc" x-html="aiSummaryDesc"></div>
+                    <div x-show="lineBlamePrecision" class="font-mono" style="font-size:10px;margin-top:6px;opacity:0.55" x-text="lineBlamePrecision"></div>
                   </div>
                   <div style="flex:1;padding-bottom:12px;">
                     <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -640,6 +659,56 @@
         </div>
       </div>
     </main>
+
+    <!-- ── Hooks Confirm Modal ── -->
+    <div id="hooksConfirmModal" class="modal-overlay" style="display:none;">
+      <div class="modal-backdrop" @click="hideHooksConfirmModal()"></div>
+      <div class="modal-panel" style="max-width:440px;">
+        <div class="modal-header">
+          <h3 style="font-size:15px;font-weight:500;">确认开启 hooks</h3>
+          <button class="rail-btn-icon" @click="hideHooksConfirmModal()" style="color:var(--foreground);opacity:0.65;">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <div class="modal-body" style="padding:16px 24px;">
+          <p style="font-size:13px;line-height:1.7;opacity:0.85;">将为设置中的 <strong id="hooksConfirmCount">0</strong> 个项目开启 hooks，修改各项目下的配置文件并自动备份：</p>
+          <div class="hooks-confirm-files">
+            <div><span style="color:var(--claude)">Claude</span> .claude/settings.local.json</div>
+            <div><span style="color:var(--codex)">Codex</span> .codex/config.toml</div>
+            <div><span style="color:var(--opencode)">OpenCode</span> .opencode/plugins/lumencode-step-tracker.js</div>
+          </div>
+        </div>
+        <div class="modal-footer" style="gap:8px;">
+          <button class="btn btn-outline" @click="hideHooksConfirmModal()">取消</button>
+          <button class="btn btn-primary" @click="enableHooksFromUi()" :disabled="hooksBusy">确认开启</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Hooks Disable Confirm Modal ── -->
+    <div id="hooksDisableConfirmModal" class="modal-overlay" style="display:none;">
+      <div class="modal-backdrop" @click="hideHooksDisableConfirmModal()"></div>
+      <div class="modal-panel" style="max-width:440px;">
+        <div class="modal-header">
+          <h3 style="font-size:15px;font-weight:500;">确认关闭 hooks</h3>
+          <button class="rail-btn-icon" @click="hideHooksDisableConfirmModal()" style="color:var(--foreground);opacity:0.65;">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <div class="modal-body" style="padding:16px 24px;">
+          <p style="font-size:13px;line-height:1.7;opacity:0.85;">关闭后将<strong style="color:var(--warning)">停止记录</strong>行级编辑步骤，影响如下：</p>
+          <div class="hooks-confirm-files">
+            <div style="color:var(--warning)">新提交的代码将无法进行行级 AI 归因</div>
+            <div>已记录的历史数据会保留，不受影响</div>
+            <div>恢复记录需重新开启 hooks</div>
+          </div>
+        </div>
+        <div class="modal-footer" style="gap:8px;">
+          <button class="btn btn-outline" @click="hideHooksDisableConfirmModal()">取消</button>
+          <button class="btn btn-primary" @click="disableHooksFromUi()" :disabled="hooksBusy">确认关闭</button>
+        </div>
+      </div>
+    </div>
   </div>
 
   <!-- ── Settings Modal ── -->

package/public/style.css

@@ -378,6 +378,7 @@ input, textarea { font-family: inherit; color: inherit; }
   color: var(--foreground);
 }
 .btn-outline:hover { border-color: var(--foreground); background: var(--ink-8); }
+.btn:disabled { opacity: 0.55; cursor: not-allowed; }
 .btn-ghost {
   padding: 6px 10px;
   color: var(--foreground);
@@ -396,6 +397,88 @@ input, textarea { font-family: inherit; color: inherit; }
     0 8px 24px -12px var(--card-lift-drop-2);
 }
 
+.hooks-notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 12px 0 16px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--ink-4);
+}
+
+.hooks-notice-title {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.hooks-notice-meta {
+  margin-top: 4px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  opacity: 0.62;
+}
+
+/* ── Rail Hooks ── */
+.rail-hooks {
+  margin: auto 14px 0;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--ink-4);
+}
+
+.rail-hooks-meta {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.04em;
+  opacity: 0.62;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.hooks-confirm-files {
+  margin-top: 12px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--ink-4);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  opacity: 0.8;
+}
+
+.rail-hooks-btn {
+  flex: 1;
+  padding: 4px 0;
+  font-size: 10px;
+  font-weight: 500;
+  text-align: center;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--background);
+  background: var(--foreground);
+}
+
+.rail-hooks-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.rail-hooks-btn--off {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--foreground);
+}
+
 /* ── KPI Strip ── */
 .kpi-strip {
   display: grid;
@@ -855,7 +938,8 @@ input, textarea { font-family: inherit; color: inherit; }
 .toast {
   position: fixed;
   top: 16px;
-  right: 16px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 300;
   background: var(--foreground);
   color: var(--background);