principles-disciple 1.8.1 → 1.8.2

package/ui/src/pages/EvolutionPage.tsx

@@ -0,0 +1,352 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ChevronLeft } from 'lucide-react';
+import { api } from '../api';
+import type {
+  OverviewResponse,
+  SampleDetailResponse,
+  SamplesResponse,
+  ThinkingModelDetailResponse,
+  ThinkingOverviewResponse,
+  EvolutionTasksResponse,
+  EvolutionTraceResponse,
+  EvolutionStatsResponse,
+  OverviewHealthResponse,
+  EvolutionPrinciplesResponse,
+  FeedbackGfiResponse,
+  GateStatsResponse,
+  GateBlockItem,
+  EmpathyEvent,
+  FeedbackGateBlock,
+} from '../types';
+import { Sparkline, DonutChart, GroupedBarChart, TimeRangeSelector, CollapsiblePanel, StatusBadge, EmptyState } from '../charts';
+import { useI18n } from '../i18n/ui';
+import { formatPercent, formatDate, formatDuration } from '../utils/format';
+import { Loading, ErrorState } from '../components';
+
+const STAGE_COLORS: Record<string, string> = {
+  pain_detected: '#ef4444',
+  queued: '#f59e0b',
+  started: '#3b82f6',
+  analyzing: '#8b5cf6',
+  principle_generated: '#22c55e',
+  completed: '#22c55e',
+};
+
+const STAGE_LABELS: Record<string, string> = {
+  pain_detected: '痛点检测',
+  queued: '已入队',
+  started: '开始处理',
+  analyzing: '分析中',
+  principle_generated: '原则生成',
+  completed: '已完成',
+};
+
+export function EvolutionPage() {
+  const { t } = useI18n();
+  const [tasks, setTasks] = useState<EvolutionTasksResponse | null>(null);
+  const [stats, setStats] = useState<EvolutionStatsResponse | null>(null);
+  const [trace, setTrace] = useState<EvolutionTraceResponse | null>(null);
+  const [evoPrinciples, setEvoPrinciples] = useState<EvolutionPrinciplesResponse | null>(null);
+  const [selectedId, setSelectedId] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [error, setError] = useState('');
+  const [days, setDays] = useState(30);
+
+  const search = useMemo(() => {
+    const next = new URLSearchParams();
+    if (statusFilter !== 'all') next.set('status', statusFilter);
+    next.set('page', '1');
+    next.set('pageSize', '20');
+    return next;
+  }, [statusFilter]);
+
+  useEffect(() => {
+    Promise.all([
+      api.getEvolutionTasks(search),
+      api.getEvolutionStats(days),
+      api.getEvolutionPrinciples(),
+    ]).then(([tasksData, statsData, principlesData]) => {
+      setTasks(tasksData);
+      setStats(statsData);
+      setEvoPrinciples(principlesData);
+      setError('');
+    }).catch((err) => setError(String(err)));
+  }, [search, days]);
+
+  useEffect(() => {
+    if (!selectedId) {
+      setTrace(null);
+      return;
+    }
+    api.getEvolutionTrace(selectedId).then(setTrace).catch((err) => setError(String(err)));
+  }, [selectedId]);
+
+  if (error) return <ErrorState error={error} />;
+  if (!tasks || !stats) return <Loading />;
+
+  // Prepare donut chart data
+  const statusSegments = [
+    { label: t('evolution.pending'), value: stats.pending, color: '#f59e0b' },
+    { label: t('evolution.inProgress'), value: stats.inProgress, color: '#3b82f6' },
+    { label: t('evolution.completed'), value: stats.completed, color: '#22c55e' },
+    { label: t('evolution.failed'), value: stats.failed, color: '#ef4444' },
+  ].filter(s => s.value > 0);
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h2>{t('evolution.pageTitle')}</h2>
+        </div>
+        <div className="meta">
+          <TimeRangeSelector value={days} onChange={setDays} />
+          <div className="pill-row">
+            <StatusBadge variant="warning">{t('evolution.pending')} {stats.pending}</StatusBadge>
+            <StatusBadge variant="info">{t('evolution.inProgress')} {stats.inProgress}</StatusBadge>
+            <StatusBadge variant="success">{t('evolution.completed')} {stats.completed}</StatusBadge>
+            <StatusBadge variant="error">{t('evolution.failed')} {stats.failed}</StatusBadge>
+          </div>
+        </div>
+      </header>
+
+      {/* Current Stage Indicator */}
+      {evoPrinciples && (
+        <section className="panel" style={{ marginBottom: 'var(--space-5)' }}>
+          <h3>当前阶段</h3>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', padding: 'var(--space-3) 0' }}>
+            <span style={{
+              padding: 'var(--space-2) var(--space-4)',
+              borderRadius: 'var(--radius-lg)',
+              fontSize: '15px',
+              fontWeight: 600,
+              background: 'var(--accent)',
+              color: '#fff',
+              border: '2px solid var(--accent)',
+            }}>
+              {evoPrinciples.activeStage === 'pending' ? <><Clock size={16} style={{marginRight: 6, verticalAlign: 'middle'}}/>{t('evolution.activeStage.pending')}</> :
+               evoPrinciples.activeStage === 'in_progress' ? <><Activity size={16} style={{marginRight: 6, verticalAlign: 'middle'}}/>{t('evolution.activeStage.in_progress')}</> :
+               evoPrinciples.activeStage === 'completed' ? <><Shield size={16} style={{marginRight: 6, verticalAlign: 'middle'}}/>{t('evolution.activeStage.completed')}</> :
+               evoPrinciples.activeStage === 'idle' ? <><Zap size={16} style={{marginRight: 6, verticalAlign: 'middle'}}/>{t('evolution.activeStage.idle')}</> : evoPrinciples.activeStage}
+            </span>
+            <span style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>
+              {t('evolution.enhancementLoopStatus')}
+            </span>
+          </div>
+        </section>
+      )}
+
+      {/* Principle Lifecycle & Nocturnal Training (Phase 5) */}
+      {evoPrinciples && (
+        <div className="grid two-columns" style={{ marginBottom: 'var(--space-5)' }}>
+          <section className="panel">
+            <h3><BookOpen size={16} style={{marginRight: 6, verticalAlign: 'middle'}}/>原则生命周期</h3>
+            <div className="pill-row" style={{ marginBottom: 'var(--space-3)' }}>
+              <StatusBadge variant="warning">候选: {evoPrinciples.principles.summary.candidate}</StatusBadge>
+              <StatusBadge variant="info">试用: {evoPrinciples.principles.summary.probation}</StatusBadge>
+              <StatusBadge variant="success">活跃: {evoPrinciples.principles.summary.active}</StatusBadge>
+              <StatusBadge variant="error">废弃: {evoPrinciples.principles.summary.deprecated}</StatusBadge>
+            </div>
+            {evoPrinciples.principles.recent.length > 0 && (
+              <div className="stack">
+                {evoPrinciples.principles.recent.slice(0, 5).map((item, i) => (
+                  <div className="row-card" key={`${item.principleId}-${i}`}>
+                    <div>
+                      <strong>{item.principleId}</strong>
+                      <span>{item.fromStatus} → {item.toStatus}</span>
+                    </div>
+                    <span className="badge">{new Date(item.timestamp).toLocaleString()}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+          <section className="panel">
+            <h3>💤 夜间训练状态</h3>
+            <div className="stack">
+              <div className="row-card">
+                <strong>训练队列</strong>
+                <span>待: {evoPrinciples.nocturnalTraining.queue.pending} | 中: {evoPrinciples.nocturnalTraining.queue.inProgress} | 完: {evoPrinciples.nocturnalTraining.queue.completed}</span>
+              </div>
+              <div className="row-card">
+                <strong>Arbiter 通过率</strong>
+                <span>{(evoPrinciples.nocturnalTraining.arbiterPassRate * 100).toFixed(1)}%</span>
+              </div>
+              <div className="row-card">
+                <strong>ORPO 样本数</strong>
+                <span>{evoPrinciples.nocturnalTraining.orpoSampleCount}</span>
+              </div>
+              <div className="row-card">
+                <strong>模型部署</strong>
+                <span>{evoPrinciples.nocturnalTraining.deployments.length} 个</span>
+              </div>
+            </div>
+          </section>
+        </div>
+      )}
+
+      {/* Status Distribution & Recent Activity */}
+      <div className="grid two-columns" style={{ marginBottom: 'var(--space-5)' }}>
+        <section className="panel">
+          <h3>{t('evolution.statusDistribution')}</h3>
+          <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-4) 0' }}>
+            <DonutChart segments={statusSegments} size={100} strokeWidth={10} />
+          </div>
+        </section>
+        <section className="panel">
+          <h3>{t('evolution.recentActivity')}</h3>
+          {stats.recentActivity && stats.recentActivity.length > 0 && (
+            <>
+              <div style={{ marginBottom: 'var(--space-3)' }}>
+                <GroupedBarChart
+                  data={stats.recentActivity.slice(-14).map((item) => ({
+                    label: item.day.slice(5),
+                    values: [item.created, item.completed],
+                  }))}
+                  colors={['var(--accent)', 'var(--success)']}
+                  width={280}
+                  height={60}
+                />
+                <div style={{ display: 'flex', justifyContent: 'center', gap: 'var(--space-4)', marginTop: 'var(--space-2)', fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                  <span><span style={{ display: 'inline-block', width: '10px', height: '10px', background: 'var(--accent)', borderRadius: '2px', marginRight: '4px' }}></span>{t('evolution.created')}</span>
+                  <span><span style={{ display: 'inline-block', width: '10px', height: '10px', background: 'var(--success)', borderRadius: '2px', marginRight: '4px' }}></span>{t('evolution.finished')}</span>
+                </div>
+              </div>
+              <div className="stack">
+                {stats.recentActivity.slice(-7).reverse().map((item) => (
+                  <div className="row-card" key={item.day}>
+                    <strong>{item.day}</strong>
+                    <span>+{item.created} {t('evolution.created')} {item.completed} {t('evolution.finished')}</span>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </section>
+      </div>
+
+      {/* Stage Distribution */}
+      {stats.stageDistribution && stats.stageDistribution.length > 0 && (
+        <section className="panel" style={{ marginBottom: 'var(--space-5)' }}>
+          <h3>{t('evolution.stageDistribution')}</h3>
+          <div className="stack" style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
+            {stats.stageDistribution.map((stage) => (
+              <StatusBadge key={stage.stage} variant="neutral">
+                {stage.stageLabel}: {stage.count}
+              </StatusBadge>
+            ))}
+          </div>
+        </section>
+      )}
+
+      <div className="grid two-columns wide-right">
+        <section className="panel">
+          <div className="filters">
+            <label>
+              {t('evolution.statusFilter')}
+              <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
+                <option value="all">{t('evolution.filterAll')}</option>
+                <option value="pending">{t('evolution.pending')}</option>
+                <option value="in_progress">{t('evolution.inProgress')}</option>
+                <option value="completed">{t('evolution.completed')}</option>
+              </select>
+            </label>
+          </div>
+
+          <div className="list-table">
+            {tasks.items.map((task) => (
+              <button
+                className={`table-row ${selectedId === task.traceId ? 'active' : ''}`}
+                key={task.taskId}
+                onClick={() => setSelectedId(task.traceId)}
+              >
+                <div>
+                  <strong style={{ color: STAGE_COLORS[task.status] || '#6b7280' }}>{task.taskId}</strong>
+                  <span>{task.source}</span>
+                </div>
+                <div>
+                  <StatusBadge variant="neutral">{task.status}</StatusBadge>
+                  <span>{t('evolution.score')}: {task.score}</span>
+                </div>
+                <div className="align-right">
+                  <strong>{formatDuration(task.duration)}</strong>
+                  <span>{task.eventCount} {t('evolution.events')}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+
+          <div className="pagination">
+            {t('common.total')} {tasks.pagination.total} {t('common.items')}
+          </div>
+        </section>
+
+        <section className="panel">
+          {!selectedId && (
+            <EmptyState title={t('evolution.emptyTitle')} description={t('evolution.emptyDesc')} />
+          )}
+          {trace && (
+            <div className="detail-stack">
+              <div className="detail-header">
+                <button
+                  className="back-button"
+                  onClick={() => setSelectedId('')}
+                  title={t('common.back') || 'Back'}
+                >
+                  <ChevronLeft strokeWidth={1.75} size={18} />
+                </button>
+                <div>
+                  <h3>{t('evolution.taskLabel')} {trace.task.taskId}</h3>
+                  <p>{t('evolution.source')}: {trace.task.source} | {t('evolution.score')}: {trace.task.score}</p>
+                  <p style={{ fontSize: '0.85em', color: '#6b7280' }}>{trace.task.reason}</p>
+                </div>
+                <StatusBadge variant="neutral">{trace.task.status}</StatusBadge>
+              </div>
+
+              <article>
+                <h4>{t('evolution.evolutionTimeline')}</h4>
+                <div className="timeline">
+                  {trace.timeline.map((item, index) => (
+                    <div className="timeline-item" key={`${item.stage}-${index}`}>
+                      <div
+                        className="timeline-marker"
+                        style={{ background: item.stageColor }}
+                      />
+                      <div className="timeline-content">
+                        <div className="timeline-time">{formatDate(item.timestamp)}</div>
+                        <div className="timeline-stage" style={{ color: item.stageColor }}>
+                          {item.stageLabel}
+                        </div>
+                        <div className="timeline-summary">{item.summary || item.message}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </article>
+
+              {trace.events.length > 0 && (
+                <article>
+                  <h4>{t('evolution.detailedEvents')} ({trace.events.length})</h4>
+                  <div className="stack">
+                    {trace.events.slice(0, 10).map((event) => (
+                      <div className="row-card vertical" key={event.id}>
+                        <div>
+                          <strong style={{ color: event.stageColor }}>{event.stageLabel}</strong>
+                          <span>{formatDate(event.createdAt)}</span>
+                        </div>
+                        <div style={{ fontSize: '0.9em', color: '#374151' }}>
+                          {event.summary || event.message}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </article>
+              )}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+// ===== Phase 6: Feedback Loop Page =====

package/ui/src/pages/FeedbackPage.tsx

@@ -0,0 +1,140 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { api } from '../api';
+import type { FeedbackGfiResponse, EmpathyEvent, FeedbackGateBlock } from '../types';
+import { GroupedBarChart, EmptyState } from '../charts';
+import { useI18n } from '../i18n/ui';
+import { Loading, ErrorState } from '../components';
+import { useAutoRefresh } from '../hooks/useAutoRefresh';
+
+export function FeedbackPage() {
+  const { t } = useI18n();
+  const [gfi, setGfi] = useState<FeedbackGfiResponse | null>(null);
+  const [empathyEvents, setEmpathyEvents] = useState<EmpathyEvent[]>([]);
+  const [gateBlocks, setGateBlocks] = useState<FeedbackGateBlock[]>([]);
+  const [error, setError] = useState('');
+
+  const loadAll = useCallback(async () => {
+    try {
+      const [gfiData, events, blocks] = await Promise.all([
+        api.getFeedbackGfi(),
+        api.getEmpathyEvents(20),
+        api.getFeedbackGateBlocks(20),
+      ]);
+      setGfi(gfiData);
+      setEmpathyEvents(events);
+      setGateBlocks(blocks);
+      setError('');
+    } catch (err) {
+      setError(String(err));
+    }
+  }, []);
+
+  const { isRefreshing } = useAutoRefresh(loadAll, {
+    intervalMs: 15000,
+    enabled: !!gfi,
+  });
+
+  useEffect(() => {
+    loadAll();
+  }, [loadAll]);
+
+  if (error) return <ErrorState error={error} />;
+  if (!gfi) return <Loading />;
+
+  const gfiPercent = Math.min(100, (gfi.current / gfi.threshold) * 100);
+  const gfiColor = gfi.current >= gfi.threshold ? 'var(--error)' : gfi.current >= gfi.threshold * 0.8 ? 'var(--warning)' : 'var(--success)';
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <span className="eyebrow">{t('feedback.pageTitle')}</span>
+          <h2>{t('feedback.pageSubtitle')}</h2>
+        </div>
+      </header>
+
+      {/* GFI Dashboard */}
+      <section className="panel" style={{ marginBottom: 'var(--space-5)' }}>
+        <h3>{t('feedback.gfiDashboard')}</h3>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)', padding: 'var(--space-4) 0' }}>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: '48px', fontWeight: 700, color: gfiColor }}>{gfi.current}</div>
+            <div style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>
+              {t('feedback.threshold')}: {gfi.threshold} | {t('feedback.peakToday')}: {gfi.peakToday}
+            </div>
+            <div style={{ marginTop: 'var(--space-2)', width: '100%', height: '8px', background: 'var(--bg-sunken)', borderRadius: '4px' }}>
+              <div style={{ width: `${gfiPercent}%`, height: '100%', background: gfiColor, borderRadius: '4px', transition: 'width 0.3s' }} />
+            </div>
+          </div>
+          <div style={{ flex: 2 }}>
+            <h4 style={{ marginBottom: 'var(--space-2)' }}>{t('feedback.hourlyTrend')}</h4>
+            {gfi.trend.length > 0 && (
+              <GroupedBarChart
+                data={gfi.trend.slice(-12).map((item) => ({
+                  label: item.hour.slice(-5),
+                  values: [item.value],
+                }))}
+                colors={['var(--warning)']}
+                width={400}
+                height={80}
+              />
+            )}
+          </div>
+        </div>
+      </section>
+
+      <div className="grid two-columns">
+        {/* Empathy Events */}
+        <section className="panel">
+          <h3>{t('feedback.empathyEvents')}</h3>
+          {empathyEvents.length === 0 ? (
+            <EmptyState title={t('feedback.noEmpathyEvents')} description={t('feedback.noEmpathyEventsDesc')} />
+          ) : (
+            <div className="stack">
+              {empathyEvents.map((event, i) => (
+                <div className="row-card vertical" key={i}>
+                  <div>
+                    <strong style={{ color: event.severity === 'high' || event.severity === 'severe' || event.severity === 'critical' ? 'var(--error)' : 'var(--warning)' }}>
+                      [{event.severity}] {new Date(event.timestamp).toLocaleTimeString()}
+                    </strong>
+                    <span>{event.origin}</span>
+                  </div>
+                  <div style={{ fontSize: '0.9em', color: 'var(--text-secondary)' }}>{event.reason}</div>
+                  <div className="pill-row">
+                    <span className="badge">+{event.score}</span>
+                    <span className="badge">GFI: {event.gfiAfter}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+
+        {/* GFI → Gate Blocks */}
+        <section className="panel">
+          <h3>{t('feedback.gateBlocks')}</h3>
+          {gateBlocks.length === 0 ? (
+            <EmptyState title={t('feedback.noGateBlocks')} description={t('feedback.noGateBlocksDesc')} />
+          ) : (
+            <div className="stack">
+              {gateBlocks.map((block, i) => (
+                <div className="row-card" key={i}>
+                  <div>
+                    <strong>{block.toolName}</strong>
+                    <span>{new Date(block.timestamp).toLocaleString()}</span>
+                  </div>
+                  <div className="pill-row">
+                    <span className="badge">GFI: {block.gfi}</span>
+                    <span className="badge">Stage: {block.trustStage}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+// ===== Phase 6: Gate Monitor Page =====

package/ui/src/pages/GateMonitorPage.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { api } from '../api';
+import type { GateStatsResponse, GateBlockItem } from '../types';
+import { EmptyState } from '../charts';
+import { useI18n } from '../i18n/ui';
+import { formatDate } from '../utils/format';
+import { Loading, ErrorState } from '../components';
+import { useAutoRefresh } from '../hooks/useAutoRefresh';
+
+export function GateMonitorPage() {
+  const { t } = useI18n();
+  const [gateStats, setGateStats] = useState<GateStatsResponse | null>(null);
+  const [gateBlocks, setGateBlocks] = useState<GateBlockItem[]>([]);
+  const [error, setError] = useState('');
+
+  const loadAll = useCallback(async () => {
+    try {
+      const [stats, blocks] = await Promise.all([
+        api.getGateStats(),
+        api.getGateBlocks(50),
+      ]);
+      setGateStats(stats);
+      setGateBlocks(blocks);
+      setError('');
+    } catch (err) {
+      setError(String(err));
+    }
+  }, []);
+
+  const { isRefreshing } = useAutoRefresh(loadAll, {
+    intervalMs: 30000,
+    enabled: !!gateStats,
+  });
+
+  useEffect(() => {
+    loadAll();
+  }, [loadAll]);
+
+  if (error) return <ErrorState error={error} />;
+  if (!gateStats) return <Loading />;
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <span className="eyebrow">{t('gate.pageTitle')}</span>
+          <h2>{t('gate.pageSubtitle')}</h2>
+        </div>
+      </header>
+
+      {/* Today's Block Stats */}
+      <section className="panel" style={{ marginBottom: 'var(--space-5)' }}>
+        <h3>{t('gate.todayStats')}</h3>
+        <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)' }}>
+          <article className="panel kpi">
+            <span className="label">{t('gate.gfiBlocks')}</span>
+            <span className="value">{gateStats.today.gfiBlocks}</span>
+          </article>
+          <article className="panel kpi">
+            <span className="label">{t('gate.stageBlocks')}</span>
+            <span className="value">{gateStats.today.stageBlocks}</span>
+          </article>
+          <article className="panel kpi">
+            <span className="label">{t('gate.p03Blocks')}</span>
+            <span className="value">{gateStats.today.p03Blocks}</span>
+          </article>
+          <article className="panel kpi">
+            <span className="label">{t('gate.bypassAttempts')}</span>
+            <span className="value" style={{ color: 'var(--error)' }}>{gateStats.today.bypassAttempts}</span>
+          </article>
+          <article className="panel kpi">
+            <span className="label">{t('gate.p16Exemptions')}</span>
+            <span className="value">{gateStats.today.p16Exemptions}</span>
+          </article>
+        </div>
+      </section>
+
+      {/* Trust & EP Dual Track */}
+      <div className="grid two-columns" style={{ marginBottom: 'var(--space-5)' }}>
+        <section className="panel">
+          <h3>🔐 {t('gate.trustEngine')}</h3>
+          <div style={{ padding: 'var(--space-3) 0' }}>
+            <div style={{ fontSize: '24px', fontWeight: 700 }}>Stage {gateStats.trust.stage}: {gateStats.trust.status}</div>
+            <div style={{ marginTop: 'var(--space-2)', width: '100%', height: '12px', background: 'var(--bg-sunken)', borderRadius: '6px' }}>
+              <div style={{ width: `${gateStats.trust.score}%`, height: '100%', background: 'var(--info)', borderRadius: '6px' }} />
+            </div>
+            <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginTop: 'var(--space-1)' }}>
+              {t('gate.score')}: {gateStats.trust.score}/100
+            </div>
+          </div>
+        </section>
+        <section className="panel">
+          <h3>🌱 {t('gate.evolutionEngine')}</h3>
+          <div style={{ padding: 'var(--space-3) 0' }}>
+            <div style={{ fontSize: '24px', fontWeight: 700 }}>{gateStats.evolution.tier} ({gateStats.evolution.status})</div>
+            <div style={{ marginTop: 'var(--space-2)', width: '100%', height: '12px', background: 'var(--bg-sunken)', borderRadius: '6px' }}>
+              <div style={{ width: `${Math.min(100, gateStats.evolution.points / 10)}%`, height: '100%', background: 'var(--success)', borderRadius: '6px' }} />
+            </div>
+            <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginTop: 'var(--space-1)' }}>
+              {t('gate.points')}: {gateStats.evolution.points}
+            </div>
+          </div>
+        </section>
+      </div>
+
+      {/* Block History */}
+      <section className="panel">
+        <h3>{t('gate.blockHistory')}</h3>
+        {gateBlocks.length === 0 ? (
+          <EmptyState title={t('gate.noGateBlocks')} description={t('gate.noGateBlocksDesc')} />
+        ) : (
+          <div className="list-table">
+            {gateBlocks.map((block, i) => (
+              <div className="table-row" key={i}>
+                <div>
+                  <strong>{block.toolName}</strong>
+                  <span>{block.filePath || '—'}</span>
+                </div>
+                <div>
+                  <span className="badge">{block.gateType}</span>
+                  <span>{block.reason}</span>
+                </div>
+                <div className="align-right">
+                  <span className="badge">GFI: {block.gfi}</span>
+                  <span>{new Date(block.timestamp).toLocaleString()}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+// Main App Component