principles-disciple 1.8.0 → 1.8.2

package/ui/src/pages/LoginPage.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Hexagon } from 'lucide-react';
+import { useI18n } from '../i18n/ui';
+import { useAuth } from '../context/auth';
+
+export function LoginPage() {
+  const { t } = useI18n();
+  const [token, setToken] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token.trim()) {
+      setError(t('auth.errorEmpty'));
+      return;
+    }
+    setLoading(true);
+    setError('');
+    const success = await login(token.trim());
+    setLoading(false);
+    if (success) {
+      navigate('/overview');
+    } else {
+      setError(t('auth.errorInvalid'));
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-container">
+        <div className="login-header">
+          <div className="login-logo">
+            <span className="logo-icon">
+              <Hexagon strokeWidth={1.5} />
+            </span>
+            <h1>{t('brand.title')}</h1>
+          </div>
+          <p className="login-subtitle">{t('auth.loginSubtitle')}</p>
+        </div>
+
+        <form className="login-form" onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="token">Gateway Token</label>
+            <input
+              id="token"
+              type="password"
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              placeholder={t('auth.tokenPlaceholder')}
+              autoComplete="off"
+            />
+            <span className="form-hint">
+              {t('auth.tokenHint')}
+            </span>
+          </div>
+
+          {error && <div className="form-error">{error}</div>}
+
+          <button type="submit" className="login-button" disabled={loading}>
+            {loading ? (
+              <>
+                <span className="spinner-small"></span>
+                {t('auth.validatingButton')}
+              </>
+            ) : (
+              t('auth.loginButton')
+            )}
+          </button>
+        </form>
+
+        <div className="login-footer">
+          <h4>{t('auth.howToGetToken')}</h4>
+          <ol>
+            <li>{t('auth.step1')}</li>
+            <li>{t('auth.step2')}</li>
+            <li>{t('auth.step3')}</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Protected Route

package/ui/src/pages/OverviewPage.tsx

@@ -0,0 +1,238 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { api } from '../api';
+import type { OverviewResponse, OverviewHealthResponse } from '../types';
+import { Sparkline, GroupedBarChart, TimeRangeSelector, StatusBadge } from '../charts';
+import { useI18n } from '../i18n/ui';
+import { formatPercent, formatDate } from '../utils/format';
+import { WorkspaceConfig } from '../components/WorkspaceConfig';
+import { Loading, ErrorState } from '../components';
+import { useAutoRefresh } from '../hooks/useAutoRefresh';
+
+export function OverviewPage() {
+  const { t } = useI18n();
+  const [data, setData] = useState<OverviewResponse | null>(null);
+  const [health, setHealth] = useState<OverviewHealthResponse | null>(null);
+  const [error, setError] = useState('');
+  const [syncing, setSyncing] = useState(false);
+  const [days, setDays] = useState(30);
+
+  const loadCentralOverview = useCallback(async () => {
+    try {
+      const result = await api.getCentralOverview(days);
+      setData(result);
+      setError('');
+    } catch (err) {
+      setError(String(err));
+    }
+  }, [days]);
+
+  const loadAll = useCallback(async () => {
+    await loadCentralOverview();
+    api.getOverviewHealth().then(setHealth).catch(() => {});
+  }, [loadCentralOverview]);
+
+  const { lastRefresh, isRefreshing, refresh } = useAutoRefresh(loadAll, {
+    intervalMs: 30000,
+    enabled: !!data,
+  });
+
+  useEffect(() => {
+    loadAll();
+  }, [loadAll]);
+
+  const handleSync = async () => {
+    setSyncing(true);
+    try {
+      await api.syncCentral();
+      await loadCentralOverview();
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  if (error) return <ErrorState error={error} />;
+  if (!data) return <Loading />;
+
+  const centralInfo = (data as OverviewResponse & { centralInfo?: { workspaceCount: number; enabledWorkspaceCount: number; workspaces: string[]; enabledWorkspaces: string[] } }).centralInfo;
+  const dailyTrend = data.dailyTrend ?? [];
+
+  // Prepare sparkline data
+  const toolCallsTrend = dailyTrend.map(d => d.toolCalls);
+  const failuresTrend = dailyTrend.map(d => d.failures);
+  const correctionsTrend = dailyTrend.map(d => d.userCorrections);
+  const thinkingTrend = dailyTrend.map(d => d.thinkingTurns);
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h2>{t('overview.pageTitle')}</h2>
+        </div>
+        <div className="meta">
+          <TimeRangeSelector value={days} onChange={setDays} />
+          {isRefreshing && <span className="refresh-indicator">⟳ {t('common.refreshing') || '刷新中...'}</span>}
+          {centralInfo && (
+            <div>{centralInfo.enabledWorkspaceCount} / {centralInfo.workspaceCount} {t('overview.workspacesEnabled')}</div>
+          )}
+          <div>{t('overview.freshness')}: {formatDate(data.dataFreshness)}</div>
+          <button className="button-secondary" onClick={handleSync} disabled={syncing}>
+            {syncing ? t('overview.syncing') : t('overview.syncAll')}
+          </button>
+        </div>
+      </header>
+
+      <WorkspaceConfig />
+
+      {/* System Health Cards (Phase 5) */}
+      {health && (
+        <section className="kpi-grid" style={{ marginBottom: 'var(--space-5)' }}>
+          <article className="panel kpi" style={{ borderLeft: `3px solid ${health.gfi.current >= health.gfi.threshold ? 'var(--error)' : 'var(--success)'}` }}>
+            <span className="label"><svg width="10" height="10" viewBox="0 0 10 10" style={{marginRight: '6px', verticalAlign: 'middle'}}><circle cx="5" cy="5" r="5" fill={health.gfi.current >= health.gfi.threshold ? 'var(--error)' : 'var(--success)'}/></svg>{t('overview.health.gfi')}</span>
+            <span className="value">{health.gfi.current}</span>
+            <span>{t('overview.health.threshold')}: {health.gfi.threshold} | {t('overview.health.peakToday')}: {health.gfi.peakToday}</span>
+          </article>
+          <article className="panel kpi" style={{ borderLeft: `3px solid ${health.painFlag.active ? 'var(--warning)' : 'var(--success)'}` }}>
+            <span className="label"><svg width="10" height="10" viewBox="0 0 10 10" style={{marginRight: '6px', verticalAlign: 'middle'}}><circle cx="5" cy="5" r="5" fill={health.painFlag.active ? 'var(--warning)' : 'var(--success)'}/></svg>{t('overview.health.painFlag')}</span>
+            <span className="value">{health.painFlag.active ? t('overview.health.active') : t('overview.health.normal')}</span>
+            <span>{health.painFlag.source ? `${t('overview.health.source')}: ${health.painFlag.source}` : t('overview.health.noActivePain')}</span>
+          </article>
+          <article className="panel kpi" style={{ borderLeft: '3px solid var(--info)' }}>
+            <span className="label"><svg width="10" height="10" viewBox="0 0 10 10" style={{marginRight: '6px', verticalAlign: 'middle'}}><circle cx="5" cy="5" r="5" fill="var(--info)"/></svg>{t('overview.health.trustStage')}</span>
+            <span className="value">{health.trust.stageLabel}</span>
+            <span>{t('overview.health.stage')} {health.trust.stage} | {t('overview.health.score')}: {health.trust.score}</span>
+          </article>
+          <article className="panel kpi" style={{ borderLeft: '3px solid var(--accent)' }}>
+            <span className="label"><svg width="10" height="10" viewBox="0 0 10 10" style={{marginRight: '6px', verticalAlign: 'middle'}}><circle cx="5" cy="5" r="5" fill="var(--accent)"/></svg>{t('overview.health.epTier')}</span>
+            <span className="value">{health.evolution.tier}</span>
+            <span>{t('overview.health.points')}: {health.evolution.points}</span>
+          </article>
+          <article className="panel kpi" style={{ borderLeft: '3px solid var(--success)' }}>
+            <span className="label"><svg width="10" height="10" viewBox="0 0 10 10" style={{marginRight: '6px', verticalAlign: 'middle'}}><circle cx="5" cy="5" r="5" fill="var(--success)"/></svg>{t('overview.health.principlesTotal')}</span>
+            <span className="value">{health.principles.candidate + health.principles.probation + health.principles.active + health.principles.deprecated}</span>
+            <span>{t('overview.health.candidate')}: {health.principles.candidate} | {t('overview.health.probation')}: {health.principles.probation} | {t('overview.health.active2')}: {health.principles.active} | {t('overview.health.deprecated')}: {health.principles.deprecated}</span>
+          </article>
+          <article className="panel kpi" style={{ borderLeft: `3px solid ${health.queue.pending > 5 ? 'var(--warning)' : 'var(--success)'}` }}>
+            <span className="label"><svg width="10" height="10" viewBox="0 0 10 10" style={{marginRight: '6px', verticalAlign: 'middle'}}><circle cx="5" cy="5" r="5" fill={health.queue.pending > 5 ? 'var(--warning)' : 'var(--success)'}/></svg>{t('overview.health.queueBacklog')}</span>
+            <span className="value">{health.queue.pending}</span>
+            <span>{t('overview.health.pending')}: {health.queue.pending} | {t('overview.health.inProgress')}: {health.queue.inProgress} | {t('overview.health.completed')}: {health.queue.completed}</span>
+          </article>
+        </section>
+      )}
+
+      <section className="kpi-grid">
+        <article className="panel kpi">
+          <span className="label">{t('overview.repeatErrorRate')}</span>
+          <span className="value">{formatPercent(data.summary.repeatErrorRate)}</span>
+          {failuresTrend.length >= 2 && (
+            <div className="stat-sparkline"><Sparkline data={failuresTrend} width={50} height={16} color="var(--error)" /></div>
+          )}
+        </article>
+        <article className="panel kpi">
+          <span className="label">{t('overview.userCorrectionRate')}</span>
+          <span className="value">{formatPercent(data.summary.userCorrectionRate)}</span>
+          {correctionsTrend.length >= 2 && (
+            <div className="stat-sparkline"><Sparkline data={correctionsTrend} width={50} height={16} color="var(--warning)" /></div>
+          )}
+        </article>
+        <article className="panel kpi">
+          <span className="label">{t('overview.pendingSamples')}</span>
+          <span className="value">{data.summary.pendingSamples}</span>
+        </article>
+        <article className="panel kpi">
+          <span className="label">{t('overview.approvedSamples')}</span>
+          <span className="value">{data.summary.approvedSamples}</span>
+        </article>
+        <article className="panel kpi">
+          <span className="label">{t('overview.thinkingCoverage')}</span>
+          <span className="value">{formatPercent(data.summary.thinkingCoverageRate)}</span>
+          {thinkingTrend.length >= 2 && (
+            <div className="stat-sparkline"><Sparkline data={thinkingTrend} width={50} height={16} color="var(--info)" /></div>
+          )}
+        </article>
+        <article className="panel kpi">
+          <span className="label">{t('overview.painEvents')}</span>
+          <span className="value">{data.summary.painEvents}</span>
+        </article>
+      </section>
+
+      <div className="grid two-columns">
+        <section className="panel">
+          <h3>{t('overview.recentTrend')}</h3>
+          {dailyTrend.length > 0 && (
+            <div style={{ marginBottom: 'var(--space-4)' }}>
+              <GroupedBarChart
+                data={dailyTrend.slice(-14).map((item) => ({
+                  label: item.day.slice(5),
+                  values: [item.toolCalls, item.failures],
+                }))}
+                colors={['var(--accent)', 'var(--error)']}
+                width={280}
+                height={80}
+              />
+            </div>
+          )}
+          <div className="trend-list">
+            {dailyTrend.slice(-7).reverse().map((item) => (
+              <div className="trend-row" key={item.day}>
+                <div>
+                  <strong>{item.day}</strong>
+                  <span>{item.toolCalls} {t('overview.calls')} / {item.failures} {t('overview.failures')} / {item.userCorrections} {t('overview.corrections')}</span>
+                </div>
+                <span className="badge">{item.thinkingTurns} {t('overview.thinkingTurns')}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+        <section className="panel">
+          <h3>{t('overview.topRegressions')}</h3>
+          <div className="stack">
+            {data.topRegressions.map((row) => (
+              <div className="row-card" key={`${row.toolName}-${row.errorType}`}>
+                <div>
+                  <strong>{row.toolName}</strong>
+                  <span>{row.errorType}</span>
+                </div>
+                <span className="badge">{row.occurrences}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      <div className="grid two-columns">
+        <section className="panel">
+          <h3>{t('overview.sampleQueue')}</h3>
+          <div className="pill-row">
+            {Object.entries(data.sampleQueue.counters).map(([status, count]) => (
+              <span className="badge" key={status}>{status}: {count}</span>
+            ))}
+          </div>
+          <div className="stack">
+            {data.sampleQueue.preview.map((item) => (
+              <div className="row-card" key={item.sampleId}>
+                <div>
+                  <strong>{item.sampleId}</strong>
+                  <span>{item.sessionId}</span>
+                </div>
+                <span className="badge">{item.qualityScore}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+        <section className="panel">
+          <h3>{t('overview.thinkingSummary')}</h3>
+          <div className="stack">
+            <div className="row-card"><strong>{t('overview.activeModels')}</strong><span>{data.thinkingSummary.activeModels}</span></div>
+            <div className="row-card"><strong>{t('overview.dormantModels')}</strong><span>{data.thinkingSummary.dormantModels}</span></div>
+            <div className="row-card"><strong>{t('overview.effectiveModels')}</strong><span>{data.thinkingSummary.effectiveModels}</span></div>
+            <div className="row-card"><strong>{t('overview.coverage')}</strong><span>{formatPercent(data.thinkingSummary.coverageRate)}</span></div>
+            <div className="row-card"><strong>{t('overview.principleEvents')}</strong><span>{data.summary.principleEventCount}</span></div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+

package/ui/src/pages/SamplesPage.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { ChevronLeft } from 'lucide-react';
+import { api } from '../api';
+import type { SamplesResponse, SampleDetailResponse } from '../types';
+import { EmptyState } from '../charts';
+import { useI18n } from '../i18n/ui';
+import { formatDate } from '../utils/format';
+import { Loading, ErrorState } from '../components';
+
+export function SamplesPage() {
+  const { t } = useI18n();
+  const [status, setStatus] = useState('all');
+  const [data, setData] = useState<SamplesResponse | null>(null);
+  const [selected, setSelected] = useState<SampleDetailResponse | null>(null);
+  const [selectedId, setSelectedId] = useState('');
+  const [error, setError] = useState('');
+
+  const search = useMemo(() => {
+    const next = new URLSearchParams();
+    next.set('status', status);
+    next.set('page', '1');
+    next.set('pageSize', '20');
+    return next;
+  }, [status]);
+
+  useEffect(() => {
+    api.listSamples(search).then((value) => {
+      setData(value);
+      setError('');
+    }).catch((err) => setError(String(err)));
+  }, [search]);
+
+  useEffect(() => {
+    if (!selectedId) return;
+    api.getSampleDetail(selectedId).then(setSelected).catch((err) => setError(String(err)));
+  }, [selectedId]);
+
+  async function review(decision: 'approved' | 'rejected') {
+    if (!selected) return;
+    try {
+      await api.reviewSample(selected.sampleId, decision);
+      const [samples, detail] = await Promise.all([
+        api.listSamples(search),
+        api.getSampleDetail(selected.sampleId),
+      ]);
+      setData(samples);
+      setSelected(detail);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Review operation failed');
+    }
+  }
+
+  if (error) return <ErrorState error={error} />;
+  if (!data) return <Loading />;
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h2>{t('samples.pageTitle')}</h2>
+        </div>
+        <div className="filters">
+          <label>
+            {t('samples.statusFilter')}
+            <select value={status} onChange={(event) => setStatus(event.target.value)}>
+              <option value="all">{t('samples.statusAll')}</option>
+              <option value="pending">{t('samples.statusPending')}</option>
+              <option value="approved">{t('samples.statusApproved')}</option>
+              <option value="rejected">{t('samples.statusRejected')}</option>
+            </select>
+          </label>
+        </div>
+      </header>
+
+      <div className="grid two-columns wide-right">
+        <section className="panel">
+          <div className="pill-row">
+            {Object.entries(data.counters).map(([key, value]) => (
+              <span className="badge" key={key}>{key}: {value}</span>
+            ))}
+          </div>
+          <div className="list-table">
+            {data.items.map((item) => (
+              <button className={`table-row ${selectedId === item.sampleId ? 'active' : ''}`} key={item.sampleId} onClick={() => setSelectedId(item.sampleId)}>
+                <div>
+                  <strong>{item.sampleId}</strong>
+                  <span>{item.failureMode}</span>
+                </div>
+                <div>
+                  <span>{item.reviewStatus}</span>
+                  <span>{item.relatedThinkingCount} thinking hits</span>
+                </div>
+                <div className="align-right">
+                  <strong>{item.qualityScore}</strong>
+                  <span>{formatDate(item.createdAt)}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </section>
+
+        <section className="panel">
+          {!selected && <EmptyState title={t('samples.emptyTitle')} description={t('samples.emptyDesc')} />}
+          {selected && (
+            <div className="detail-stack">
+              <div className="detail-header">
+                <button
+                  className="back-button"
+                  onClick={() => setSelected(null)}
+                  title={t('common.back') || 'Back'}
+                >
+                  <ChevronLeft strokeWidth={1.75} size={18} />
+                </button>
+                <div>
+                  <h3>{selected.sampleId}</h3>
+                  <p>{selected.sessionId} | {selected.reviewStatus} | score {selected.qualityScore}</p>
+                </div>
+                <div className="button-row">
+                  <button className="button-primary" onClick={() => review('approved')}>{t('samples.approve')}</button>
+                  <button className="button-ghost" onClick={() => review('rejected')}>{t('samples.reject')}</button>
+                </div>
+              </div>
+              <article>
+                <h4>{t('samples.badAttempt')}</h4>
+                <pre>{selected.badAttempt.rawText || selected.badAttempt.sanitizedText}</pre>
+              </article>
+              <article>
+                <h4>{t('samples.userCorrection')}</h4>
+                <pre>{selected.userCorrection.rawText}</pre>
+              </article>
+              <article>
+                <h4>{t('samples.recoveryToolSpan')}</h4>
+                <div className="pill-row">
+                  {selected.recoveryToolSpan.map((item) => (
+                    <span className="badge" key={item.id}>{item.toolName} #{item.id}</span>
+                  ))}
+                </div>
+              </article>
+              <article>
+                <h4>{t('samples.relatedThinkingHits')}</h4>
+                <div className="stack">
+                  {selected.relatedThinkingHits.map((item) => (
+                    <div className="row-card" key={item.id}>
+                      <div>
+                        <strong>{item.modelName}</strong>
+                        <span>{item.scenarios.join(', ') || 'No scenarios'}</span>
+                      </div>
+                      <span className="badge">{formatDate(item.createdAt)}</span>
+                    </div>
+                  ))}
+                </div>
+              </article>
+              <article>
+                <h4>{t('samples.reviewHistory')}</h4>
+                <div className="stack">
+                  {selected.reviewHistory.map((item, index) => (
+                    <div className="row-card" key={`${item.createdAt}-${index}`}>
+                      <div>
+                        <strong>{item.reviewStatus}</strong>
+                        <span>{item.note || 'No note'}</span>
+                      </div>
+                      <span className="badge">{formatDate(item.createdAt)}</span>
+                    </div>
+                  ))}
+                </div>
+              </article>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+

package/ui/src/pages/ThinkingModelsPage.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { ChevronLeft } from 'lucide-react';
+import { api } from '../api';
+import type { ThinkingOverviewResponse, ThinkingModelDetailResponse } from '../types';
+import { EmptyState } from '../charts';
+import { useI18n } from '../i18n/ui';
+import { formatPercent, formatDate } from '../utils/format';
+import { Loading, ErrorState } from '../components';
+
+export function ThinkingModelsPage() {
+  const { t } = useI18n();
+  const [data, setData] = useState<ThinkingOverviewResponse | null>(null);
+  const [detail, setDetail] = useState<ThinkingModelDetailResponse | null>(null);
+  const [selectedModel, setSelectedModel] = useState('');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    api.getThinkingOverview().then((value) => {
+      setData(value);
+      setSelectedModel(value.topModels[0]?.modelId ?? '');
+    }).catch((err) => setError(String(err)));
+  }, []);
+
+  useEffect(() => {
+    if (!selectedModel) return;
+    api.getThinkingModelDetail(selectedModel).then(setDetail).catch((err) => setError(String(err)));
+  }, [selectedModel]);
+
+  if (error) return <ErrorState error={error} />;
+  if (!data) return <Loading />;
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h2>{t('thinkingModels.pageTitle')}</h2>
+        </div>
+        <div className="pill-row">
+          <span className="badge">{t('thinkingModels.coverage')} {formatPercent(data.summary.coverageRate)}</span>
+          <span className="badge">{t('thinkingModels.active')} {data.summary.activeModels}</span>
+          <span className="badge">{t('thinkingModels.dormant')} {data.summary.dormantModels}</span>
+          <span className="badge">{t('thinkingModels.effective')} {data.summary.effectiveModels}</span>
+        </div>
+      </header>
+
+      <div className="grid two-columns wide-right">
+        <section className="panel">
+          <div className="list-table">
+            {data.topModels.map((item) => (
+              <button className={`table-row ${selectedModel === item.modelId ? 'active' : ''}`} key={item.modelId} onClick={() => setSelectedModel(item.modelId)}>
+                <div>
+                  <strong>{item.name}</strong>
+                  <span>{item.commonScenarios.join(', ') || 'No scenarios yet'}</span>
+                </div>
+                <div>
+                  <span>{item.hits} hits</span>
+                  <span>{item.recommendation}</span>
+                </div>
+                <div className="align-right">
+                  <strong>{formatPercent(item.successRate)}</strong>
+                  <span>{formatPercent(item.failureRate)} failure</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </section>
+
+        <section className="panel">
+          {!detail && <EmptyState title={t('thinkingModels.emptyTitle')} description={t('thinkingModels.emptyDesc')} />}
+          {detail && (
+            <div className="detail-stack">
+              <div className="detail-header">
+                <button
+                  className="back-button"
+                  onClick={() => setDetail(null)}
+                  title={t('common.back') || 'Back'}
+                >
+                  <ChevronLeft strokeWidth={1.75} size={18} />
+                </button>
+                <div>
+                  <h3>{detail.modelMeta.name}</h3>
+                  <p>{detail.modelMeta.description}</p>
+                </div>
+                <span className="badge">{detail.modelMeta.recommendation}</span>
+              </div>
+              <article>
+                <h4>{t('thinkingModels.outcomeStats')}</h4>
+                <div className="pill-row">
+                  <span className="badge">{t('thinkingModels.success')} {formatPercent(detail.outcomeStats.successRate)}</span>
+                  <span className="badge">{t('thinkingModels.failure')} {formatPercent(detail.outcomeStats.failureRate)}</span>
+                  <span className="badge">{t('thinkingModels.pain')} {formatPercent(detail.outcomeStats.painRate)}</span>
+                  <span className="badge">{t('thinkingModels.correction')} {formatPercent(detail.outcomeStats.correctionRate)}</span>
+                </div>
+              </article>
+              <article>
+                <h4>{t('thinkingModels.scenarioDistribution')}</h4>
+                <div className="stack">
+                  {detail.scenarioDistribution.map((item) => (
+                    <div className="row-card" key={item.scenario}>
+                      <strong>{item.scenario}</strong>
+                      <span>{item.hits}</span>
+                    </div>
+                  ))}
+                </div>
+              </article>
+              <article>
+                <h4>{t('thinkingModels.recentEvents')}</h4>
+                <div className="stack">
+                  {detail.recentEvents.map((event) => (
+                    <div className="row-card vertical" key={event.id}>
+                      <div>
+                        <strong>{formatDate(event.createdAt)}</strong>
+                        <span>{event.scenarios.join(', ') || 'No scenarios'}</span>
+                      </div>
+                      <pre>{event.triggerExcerpt}</pre>
+                    </div>
+                  ))}
+                </div>
+              </article>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+