iterate-plugin 2.4.0 → 2.5.0

package/lib/client.js

@@ -35,6 +35,18 @@ import {
   toKnownIntentionalYaml,
   buildApplyInstruction,
   collectIgnoredEntries,
+  filterFindingsWithIndices,
+  buildFilterOptions,
+  countVerdicts,
+  batchSetVerdict,
+  setAllVerdicts,
+  buildRoundHistory,
+  buildFindingTrend,
+  computeTrendMetrics,
+  trendMax,
+  buildCompletionSummary,
+  buildConfigEditGuide,
+  keyToVerdict,
   SEVERITY_LABEL,
   SEVERITY_COLOR,
 } from './parse.js'
@@ -150,6 +162,38 @@ const ITERATE_CSS = `
 .iterate-settings-title { font-size: 14px; font-weight: 600; color: var(--dsw-alias-label-primary); }
 .iterate-settings-desc { font-size: 12px; color: var(--dsw-alias-label-secondary); margin-top: 3px; line-height: 1.5; }
 .iterate-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); font-size: 11px; color: var(--dsw-alias-label-secondary); }
+
+/* Filter bar + batch toolbar (triage) */
+.iterate-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--dsw-alias-border-l1); font-size: 11px; color: var(--dsw-alias-label-secondary); }
+.iterate-filter-select { padding: 4px 8px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); font-size: 11px; }
+.iterate-filter-search { padding: 4px 8px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); font-size: 11px; min-width: 140px; }
+.iterate-filter-search::placeholder { color: var(--dsw-alias-label-secondary); }
+.iterate-filter-count { margin-left: auto; white-space: nowrap; }
+.iterate-batch { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--dsw-alias-border-l1); font-size: 11px; color: var(--dsw-alias-label-secondary); }
+.iterate-batch-label { margin-right: 2px; }
+.iterate-batch-btn { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-secondary); font-size: 11px; cursor: pointer; }
+.iterate-batch-btn:hover { border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-brand-primary); }
+.iterate-finding[data-selected] { outline: 1px solid var(--dsw-alias-brand-primary); outline-offset: -1px; background: color-mix(in srgb, var(--dsw-alias-brand-primary) 6%, transparent); }
+
+/* Trend chart (inline SVG) */
+.iterate-trend { display: flex; align-items: flex-end; gap: 3px; height: 26px; padding: 2px 0; }
+.iterate-trend-bar { width: 6px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--dsw-alias-brand-primary) 70%, var(--dsw-alias-bg-layer-2)); }
+.iterate-trend-bar[data-hot] { background: var(--dsw-alias-brand-primary); }
+
+/* History panel */
+.iterate-history { margin: 10px 0; border: 1px solid var(--dsw-alias-border-l1); border-radius: 12px; background: var(--dsw-alias-bg-layer-1); overflow: hidden; }
+.iterate-history-body { padding: 10px 14px; }
+.iterate-history-table { width: 100%; border-collapse: collapse; font-size: 11px; color: var(--dsw-alias-label-primary); }
+.iterate-history-table th { text-align: left; font-weight: 600; color: var(--dsw-alias-label-secondary); padding: 4px 8px; border-bottom: 1px solid var(--dsw-alias-border-l1); }
+.iterate-history-table td { padding: 4px 8px; border-bottom: 1px solid var(--dsw-alias-border-l1); }
+.iterate-history-table tr:last-child td { border-bottom: none; }
+.iterate-history-num { font-weight: 600; }
+.iterate-history-trendline { margin-top: 10px; font-size: 11px; color: var(--dsw-alias-label-secondary); }
+.iterate-completion { margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 11px; }
+.iterate-completion[data-ok] { border: 1px solid var(--dsw-alias-state-success-primary); color: var(--dsw-alias-state-success-primary); background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent); }
+.iterate-completion[data-warn] { border: 1px solid var(--dsw-alias-state-warn-primary); color: var(--dsw-alias-state-warn-primary); background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 10%, transparent); }
+.iterate-capsule[data-ok] { border-color: var(--dsw-alias-state-success-primary); color: var(--dsw-alias-state-success-primary); }
+.iterate-settings-guide { white-space: pre-wrap; padding: 8px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); font-family: var(--dsw-font-mono, ui-monospace, monospace); font-size: 11px; max-height: 180px; overflow: auto; }
 `
 
 // ─── Small helpers ───────────────────────────────────────────────────────────
@@ -214,9 +258,14 @@ let themeDisposer = null
 let themeEnabled = true
 const roundPulseListeners = []
 
-/** Emit a "round changed" pulse to subscribed components. */
-function emitRoundPulse(round) {
-  for (const fn of roundPulseListeners.slice()) fn(round)
+/**
+ * Emit a "round changed" pulse to subscribed components.
+ * The payload is `{ round, converged }` so the overlay capsule can surface
+ * completion AND convergence in one notification.
+ */
+function emitRoundPulse(round, converged) {
+  const payload = { round, converged: converged === true }
+  for (const fn of roundPulseListeners.slice()) fn(payload)
 }
 
 /** Apply the iterate theme skin (idempotent). */
@@ -262,6 +311,22 @@ function latestReport(session) {
   return raw ? normalizeReport(raw) : null
 }
 
+/** Inline bar chart of findings-by-round (pure divs, no SVG needed). */
+function TrendChart({ points }) {
+  if (!points || points.length === 0) return null
+  const max = trendMax(points)
+  const bars = points.map((p) =>
+    React.createElement('div', {
+      key: p.round,
+      className: 'iterate-trend-bar',
+      'data-hot': p.count > 0 ? '' : undefined,
+      title: `Round ${p.round}：${p.count} 项`,
+      style: { height: `${Math.max(4, Math.round((p.count / max) * 24))}px` },
+    }),
+  )
+  return React.createElement('div', { className: 'iterate-trend', title: '各轮发现数量趋势' }, ...bars)
+}
+
 /** Dashboard: live convergence strip above the composer. */
 function ConvergenceDashboard(props) {
   const [pulseKey, setPulseKey] = React.useState(0)
@@ -270,7 +335,8 @@ function ConvergenceDashboard(props) {
   React.useEffect(() => {
     if (!report) return
     const cur = getCurrentRound(report)
-    emitRoundPulse(cur)
+    const conv = report.convergence
+    emitRoundPulse(cur, conv && conv.converged === true)
     setPulseKey((k) => k + 1)
   }, [report && hashReport(report) + ':' + getCurrentRound(report)])
 
@@ -281,6 +347,7 @@ function ConvergenceDashboard(props) {
   const progress = computeConvergenceProgress(report)
   const stats = severityStats(report)
   const dims = groupByDimension(report)
+  const trend = computeTrendMetrics(report)
 
   const dimBadges = Object.keys(dims).slice(0, 6).map((dim) =>
     React.createElement(
@@ -313,6 +380,7 @@ function ConvergenceDashboard(props) {
       React.createElement('span', { className: 'iterate-sev-dot', style: { background: SEVERITY_COLOR.medium } }),
       stats.medium,
     ),
+    React.createElement(TrendChart, { points: trend.points }),
     ...dimBadges,
   )
 }
@@ -320,6 +388,7 @@ function ConvergenceDashboard(props) {
 /** Stats card (empty-findings case of the turn-tail chain). */
 function StatsCard(props) {
   const report = props.report
+  const [showHistory, setShowHistory] = React.useState(false)
   const stats = severityStats(report)
   const total = stats.critical + stats.high + stats.medium + stats.low
   const rows = [
@@ -334,6 +403,21 @@ function StatsCard(props) {
     ),
   )
 
+  const history = buildRoundHistory(report)
+  const trend = computeTrendMetrics(report)
+  const historyRows = history.map((h) =>
+    React.createElement('tr', { key: h.round },
+      React.createElement('td', { className: 'iterate-history-num' }, `Round ${h.round}`),
+      React.createElement('td', {}, String(h.count)),
+      React.createElement('td', { style: { color: SEVERITY_COLOR.critical } }, String(h.critical)),
+      React.createElement('td', { style: { color: SEVERITY_COLOR.high } }, String(h.high)),
+      React.createElement('td', { style: { color: SEVERITY_COLOR.medium } }, String(h.medium)),
+      React.createElement('td', { style: { color: SEVERITY_COLOR.low } }, String(h.low)),
+    ),
+  )
+  const trendLine = `首轮 ${trend.firstRound} → 末轮 ${trend.lastRound} 项，降幅 ${trend.reductionPercent}%${trend.converged ? '，已收敛' : ''}`
+  const completion = buildCompletionSummary(report)
+
   return React.createElement('div', { 'data-iterate-root': '', 'data-iterate': 'stats', className: 'iterate-stats' },
     React.createElement('div', { className: 'iterate-triage-head' },
       React.createElement('span', {}, 'Iterate · 收敛统计'),
@@ -342,10 +426,39 @@ function StatsCard(props) {
       ),
     ),
     React.createElement('div', { className: 'iterate-stats-grid' }, ...rows),
+    React.createElement('div', { className: 'iterate-completion', 'data-ok': trend.converged ? '' : undefined, 'data-warn': trend.converged ? undefined : '' }, completion),
+    React.createElement('div', { className: 'iterate-triage-foot', style: { marginTop: 8, borderRadius: 8 } },
+      React.createElement('span', {}, trendLine),
+      React.createElement('button', {
+        className: 'iterate-btn',
+        'data-primary': showHistory ? '' : undefined,
+        onClick: () => setShowHistory((v) => !v),
+      }, showHistory ? '收起历史' : '历史 / 趋势'),
+    ),
+    showHistory
+      ? React.createElement('div', { className: 'iterate-history-body' },
+          React.createElement('table', { className: 'iterate-history-table' },
+            React.createElement('thead', {},
+              React.createElement('tr', {},
+                React.createElement('th', {}, '轮次'),
+                React.createElement('th', {}, '发现'),
+                React.createElement('th', { style: { color: SEVERITY_COLOR.critical } }, 'CRIT'),
+                React.createElement('th', { style: { color: SEVERITY_COLOR.high } }, 'HIGH'),
+                React.createElement('th', { style: { color: SEVERITY_COLOR.medium } }, 'MED'),
+                React.createElement('th', { style: { color: SEVERITY_COLOR.low } }, 'LOW'),
+              ),
+            ),
+            React.createElement('tbody', {}, ...historyRows),
+          ),
+          React.createElement('div', { className: 'iterate-history-trendline' },
+            React.createElement(TrendChart, { points: trend.points }),
+          ),
+        )
+      : null,
   )
 }
 
-/** Triage panel: per-finding y / n / a with localStorage persistence. */
+/** Triage panel: per-finding y / n / a with filters, batch ops, keyboard shortcuts. */
 function TriagePanel(props) {
   const report = props.report
   const findings = report.findings
@@ -369,17 +482,73 @@ function TriagePanel(props) {
   })
   const [payload, setPayload] = React.useState(null)
   const [copied, setCopied] = React.useState(false)
+  const [filter, setFilter] = React.useState({ severities: [], dimensions: [], search: '' })
+  const [selected, setSelected] = React.useState(null)
+
+  /** Persist + return the next verdicts state. */
+  const persistVerdicts = (next) => {
+    if (storage) storage.set(storageKey, JSON.stringify(next))
+    return next
+  }
 
   const setVerdict = (index, verdict) => {
-    setVerdicts((prev) => {
-      const next = { ...prev, [String(index)]: verdict }
-      if (storage) storage.set(storageKey, JSON.stringify(next))
-      return next
-    })
+    setVerdicts((prev) => persistVerdicts({ ...prev, [String(index)]: verdict }))
   }
 
+  // ── Filtering (visible findings + their original indices) ───────────────
+  const { filtered, indices } = filterFindingsWithIndices(findings, filter)
+  const indicesKey = indices.join(',')
+  const options = buildFilterOptions(findings)
+  const filterActive = filter.severities.length > 0 || filter.dimensions.length > 0 || filter.search !== ''
+
+  const setSeverityFilter = (value) => setFilter((f) => ({ ...f, severities: value ? [value] : [] }))
+  const setDimensionFilter = (value) => setFilter((f) => ({ ...f, dimensions: value ? [value] : [] }))
+  const setSearchFilter = (value) => setFilter((f) => ({ ...f, search: value }))
+  const clearFilter = () => setFilter({ severities: [], dimensions: [], search: '' })
+
+  // ── Batch operations (apply to the currently VISIBLE findings) ───────────
+  const applyBatch = (verdict) => {
+    setVerdicts((prev) => persistVerdicts(batchSetVerdict(prev, indices, verdict)))
+  }
+  const applyBatchAll = (verdict) => {
+    setVerdicts((prev) => persistVerdicts(setAllVerdicts(prev, verdict)))
+  }
+
+  // ── Keyboard shortcuts (y / n / a on the selected finding, ↑/↓ to move) ──
+  React.useEffect(() => {
+    const doc = typeof document !== 'undefined' ? document : null
+    if (!doc) return
+    const onKeyDown = (ev) => {
+      const t = ev.target
+      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT')) return
+      const verdict = keyToVerdict(ev.key)
+      if (verdict && selected !== null && indices.includes(selected)) {
+        ev.preventDefault()
+        setVerdict(selected, verdict)
+        const pos = indices.indexOf(selected)
+        const nextIdx = indices[pos + 1]
+        if (nextIdx !== undefined) setSelected(nextIdx)
+        return
+      }
+      if (ev.key === 'ArrowDown' && indices.length > 0) {
+        ev.preventDefault()
+        const pos = selected === null ? -1 : indices.indexOf(selected)
+        setSelected(indices[Math.min(pos + 1, indices.length - 1)])
+        return
+      }
+      if (ev.key === 'ArrowUp' && indices.length > 0) {
+        ev.preventDefault()
+        const pos = selected === null ? 0 : indices.indexOf(selected)
+        setSelected(indices[Math.max(pos - 1, 0)])
+      }
+    }
+    doc.addEventListener('keydown', onKeyDown)
+    return () => doc.removeEventListener('keydown', onKeyDown)
+  }, [selected, indicesKey])
+
   const ignored = collectIgnoredEntries(verdicts, findings)
   const ignoredCount = ignored.length
+  const counts = countVerdicts(verdicts)
 
   const doCopyYaml = () => {
     const yaml = toKnownIntentionalYaml(ignored)
@@ -396,9 +565,11 @@ function TriagePanel(props) {
     if (text) copyText(text)
   }
 
-  const rows = findings.map((finding, index) => {
+  const rows = filtered.map((finding, i) => {
+    const index = indices[i]
     const severity = finding.severity || 'low'
     const verdict = verdicts[String(index)] || 'keep'
+    const isSelected = selected === index
     const btn = (label, value, title) =>
       React.createElement(
         'button',
@@ -412,7 +583,12 @@ function TriagePanel(props) {
         label,
       )
 
-    return React.createElement('div', { key: String(index), className: 'iterate-finding' },
+    return React.createElement('div', {
+      key: String(index),
+      className: 'iterate-finding',
+      'data-selected': isSelected ? '' : undefined,
+      onClick: () => setSelected(index),
+    },
       React.createElement('div', { className: 'iterate-finding-meta' },
         React.createElement('span', { className: 'iterate-sev-dot', style: { background: SEVERITY_COLOR[severity] || SEVERITY_COLOR.low } }),
         React.createElement('span', {}, String(SEVERITY_LABEL[severity] || 'LOW')),
@@ -431,12 +607,48 @@ function TriagePanel(props) {
 
   return React.createElement('div', { 'data-iterate-root': '', 'data-iterate': 'triage', className: 'iterate-triage' },
     React.createElement('div', { className: 'iterate-triage-head' },
-      React.createElement('span', {}, `Iterate · Findings 分诊 (${findings.length})`),
-      React.createElement('span', { className: 'iterate-triage-hint' }, 'y=修复 · n=跳过 · a=已知有意'),
+      React.createElement('span', {}, `Iterate · Findings 分诊 (${filtered.length}/${findings.length})`),
+      React.createElement('span', { className: 'iterate-triage-hint' }, 'y=修复 · n=跳过 · a=已知有意 · ↑/↓ 选择'),
+    ),
+    React.createElement('div', { className: 'iterate-filter' },
+      React.createElement('select', { className: 'iterate-filter-select', value: filter.severities[0] || '', onChange: (e) => setSeverityFilter(e.target.value), title: '按严重度筛选' },
+        React.createElement('option', { value: '' }, '全部严重度'),
+        ...options.severities.map((s) =>
+          React.createElement('option', { key: s.value, value: s.value }, `${SEVERITY_LABEL[s.value] || s.value} (${s.count})`),
+        ),
+      ),
+      React.createElement('select', { className: 'iterate-filter-select', value: filter.dimensions[0] || '', onChange: (e) => setDimensionFilter(e.target.value), title: '按维度筛选' },
+        React.createElement('option', { value: '' }, '全部维度'),
+        ...options.dimensions.map((d) =>
+          React.createElement('option', { key: d.value, value: d.value }, `${d.value} (${d.count})`),
+        ),
+      ),
+      React.createElement('input', {
+        className: 'iterate-filter-search',
+        type: 'search',
+        placeholder: '搜索文件 / 摘要…',
+        value: filter.search,
+        onChange: (e) => setSearchFilter(e.target.value),
+      }),
+      React.createElement('span', { className: 'iterate-filter-count' },
+        filterActive
+          ? React.createElement('button', { className: 'iterate-batch-btn', onClick: clearFilter }, `清除筛选（显示 ${filtered.length}）`)
+          : `共 ${findings.length} 项`,
+      ),
+    ),
+    React.createElement('div', { className: 'iterate-batch' },
+      React.createElement('span', { className: 'iterate-batch-label' }, '批量（当前可见）：'),
+      React.createElement('button', { className: 'iterate-batch-btn', onClick: () => applyBatch('keep') }, '全部 y'),
+      React.createElement('button', { className: 'iterate-batch-btn', onClick: () => applyBatch('skip') }, '全部 n'),
+      React.createElement('button', { className: 'iterate-batch-btn', onClick: () => applyBatch('ignore') }, '全部 a'),
+      React.createElement('span', { className: 'iterate-batch-label', style: { marginLeft: 8 } }, '全部：'),
+      React.createElement('button', { className: 'iterate-batch-btn', onClick: () => applyBatchAll('keep') }, 'y'),
+      React.createElement('button', { className: 'iterate-batch-btn', onClick: () => applyBatchAll('skip') }, 'n'),
+      React.createElement('button', { className: 'iterate-batch-btn', onClick: () => applyBatchAll('ignore') }, 'a'),
     ),
     ...rows,
     React.createElement('div', { className: 'iterate-triage-foot' },
-      React.createElement('span', {}, `待写回 known_intentional：${ignoredCount} 条`),
+      React.createElement('span', {}, `y ${counts.keep} · n ${counts.skip} · a ${counts.ignore} · 待写回 known_intentional：${ignoredCount} 条`),
       React.createElement('span', { style: { display: 'flex', gap: 6 } },
         React.createElement('button', { className: 'iterate-btn', 'data-primary': '', 'data-copied': copied ? '' : undefined, onClick: doCopyYaml }, copied ? '已复制' : '复制 known_intentional'),
         React.createElement('button', { className: 'iterate-btn', onClick: doBuildInstruction }, '生成应用指令'),
@@ -471,15 +683,18 @@ function TurnTailEntry(props) {
   return React.createElement(TriagePanel, { report })
 }
 
-/** Progress capsule: briefly surfaces round-completion in a frame overlay. */
+/** Progress capsule: briefly surfaces round-completion (incl. convergence). */
 function ProgressCapsule() {
   const [info, setInfo] = React.useState(null)
   React.useEffect(() => {
     let timer = null
-    const listener = (round) => {
-      setInfo(`Round ${round} 完成`)
+    const listener = (payload) => {
+      const converged = payload && payload.converged === true
+      const round = payload && typeof payload.round === 'number' ? payload.round : '?'
+      setInfo({ text: converged ? `Round ${round} 完成 · 已收敛` : `Round ${round} 完成`, ok: converged })
       if (timer) clearTimeout(timer)
-      timer = setTimeout(() => setInfo(null), 2400)
+      // Converged notifications stay a bit longer.
+      timer = setTimeout(() => setInfo(null), converged ? 3600 : 2400)
     }
     roundPulseListeners.push(listener)
     return () => {
@@ -489,13 +704,15 @@ function ProgressCapsule() {
     }
   }, [])
   if (!info) return null
-  return React.createElement('div', { 'data-iterate-root': '', className: 'iterate-capsule' }, info)
+  return React.createElement('div', { 'data-iterate-root': '', className: 'iterate-capsule', 'data-ok': info.ok ? '' : undefined }, info.text)
 }
 
 /** Settings page section (root scope; reads localStorage + latest known data). */
 function SettingsPanel() {
   const [enabled, setEnabled] = React.useState(themeEnabled)
   const [copied, setCopied] = React.useState(false)
+  const [showGuide, setShowGuide] = React.useState(false)
+  const guide = buildConfigEditGuide()
 
   const toggleTheme = () => {
     const next = !enabled
@@ -504,12 +721,6 @@ function SettingsPanel() {
   }
 
   const doCopyGuide = () => {
-    const guide =
-      'iterate 配置指引\n' +
-      '----------------\n' +
-      '目标 / 维度 / 最大轮数在项目的 iterate.config.yaml 中配置。\n' +
-      '让模型修改配置：请调用 iterate_config（读）与 iterate_triage（写 known_intentional），\n' +
-      '并说明你希望调整的字段（goal、dimensions、max_rounds 等）。\n'
     copyText(guide)
     setCopied(true)
     setTimeout(() => setCopied(false), 1600)
@@ -538,10 +749,16 @@ function SettingsPanel() {
     React.createElement('div', { className: 'iterate-settings-row' },
       React.createElement('div', {},
         React.createElement('div', { className: 'iterate-settings-title' }, '配置管理'),
-        React.createElement('div', { className: 'iterate-settings-desc' }, '目标 / 维度 / 最大轮数写在项目的 iterate.config.yaml。复制下方指引，让模型为你调整。'),
+        React.createElement('div', { className: 'iterate-settings-desc' }, '目标 / 维度 / 最大轮数写在项目的 iterate.config.yaml。复制指引让模型为你调整，或展开查看可编辑字段。'),
+      ),
+      React.createElement('span', { style: { display: 'flex', gap: 6 } },
+        React.createElement('button', { className: 'iterate-btn', 'data-primary': '', 'data-copied': copied ? '' : undefined, onClick: doCopyGuide }, copied ? '已复制' : '复制指引'),
+        React.createElement('button', { className: 'iterate-btn', onClick: () => setShowGuide((v) => !v) }, showGuide ? '收起' : '查看'),
       ),
-      React.createElement('button', { className: 'iterate-btn', 'data-primary': '', 'data-copied': copied ? '' : undefined, onClick: doCopyGuide }, copied ? '已复制' : '复制指引'),
     ),
+    showGuide
+      ? React.createElement('div', { className: 'iterate-settings-guide' }, guide)
+      : null,
   )
 }