principles-disciple 1.13.0 → 1.14.0

package/ui/src/pages/ThinkingModelsPage.tsx

@@ -1,12 +1,33 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { ChevronLeft, Search, ArrowUpDown, Info } from 'lucide-react';
+import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import { ChevronLeft, Search, ArrowUpDown, X, Columns, Wrench, Zap, ClipboardList, Loader2 } from 'lucide-react';
 import { api } from '../api';
-import type { ThinkingOverviewResponse, ThinkingModelDetailResponse } from '../types';
-import { EmptyState, LineChart, StatusBadge } from '../charts';
+import type { ThinkingOverviewResponse, ThinkingModelDetailResponse, ThinkingModelSummary } from '../types';
+import { EmptyState, LineChart, StatusBadge, CollapsiblePanel, Sparkline, MiniBarChart } from '../charts';
 import { useI18n } from '../i18n/ui';
 import { formatPercent, formatDate } from '../utils/format';
 import { Loading, ErrorState } from '../components';
 
+// ---------------------------------------------------------------------------
+// Design tokens (mirrors CSS custom properties for inline fallback)
+// ---------------------------------------------------------------------------
+
+const TEXT = {
+  xs: '0.65rem',
+  sm: '0.7rem',
+  base: '0.75rem',
+  lg: '0.8rem',
+  xl: '0.85rem',
+} as const;
+
+const SPACE = {
+  1: 'var(--space-1, 4px)',
+  2: 'var(--space-2, 8px)',
+  3: 'var(--space-3, 12px)',
+  4: 'var(--space-4, 16px)',
+  5: 'var(--space-5, 24px)',
+  6: 'var(--space-6, 32px)',
+} as const;
+
 // ---------------------------------------------------------------------------
 // Recommendation badge helper
 // ---------------------------------------------------------------------------
@@ -28,13 +49,43 @@ export function ThinkingModelsPage() {
   const [data, setData] = useState<ThinkingOverviewResponse | null>(null);
   const [detail, setDetail] = useState<ThinkingModelDetailResponse | null>(null);
   const [selectedModel, setSelectedModel] = useState('');
+  const [isLoadingDetail, setIsLoadingDetail] = useState(false);
   const [error, setError] = useState('');
 
+  // Comparison mode state
+  const [selectedForCompare, setSelectedForCompare] = useState<string[]>([]);
+  const [comparisonDetails, setComparisonDetails] = useState<Map<string, ThinkingModelDetailResponse>>(new Map());
+  const [isComparing, setIsComparing] = useState(false);
+  const [comparisonLoadingModels, setComparisonLoadingModels] = useState<Set<string>>(new Set());
+
   // Filters
   const [recFilter, setRecFilter] = useState('all');
   const [search, setSearch] = useState('');
   const [sortBy, setSortBy] = useState<'hits' | 'successRate' | 'name'>('hits');
 
+  // Debounced search
+  const searchTimer = useRef<ReturnType<typeof setTimeout>>();
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+
+  useEffect(() => {
+    if (searchTimer.current) clearTimeout(searchTimer.current);
+    searchTimer.current = setTimeout(() => setDebouncedSearch(search), 200);
+    return () => { if (searchTimer.current) clearTimeout(searchTimer.current); };
+  }, [search]);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => { if (searchTimer.current) clearTimeout(searchTimer.current); };
+  }, []);
+
+  // Cache for detail lookups during comparison
+  const detailCache = useMemo(() => {
+    const cache = new Map<string, ThinkingModelDetailResponse>();
+    if (detail) cache.set(selectedModel, detail);
+    comparisonDetails.forEach((d, id) => cache.set(id, d));
+    return cache;
+  }, [detail, selectedModel, comparisonDetails]);
+
   useEffect(() => {
     api.getThinkingOverview().then((value) => {
       setData(value);
@@ -44,9 +95,57 @@ export function ThinkingModelsPage() {
 
   useEffect(() => {
     if (!selectedModel) return;
-    api.getThinkingModelDetail(selectedModel).then(setDetail).catch((err) => setError(String(err)));
+    setIsLoadingDetail(true);
+    api.getThinkingModelDetail(selectedModel)
+      .then((d) => { setDetail(d); setIsLoadingDetail(false); })
+      .catch((err) => { setError(String(err)); setIsLoadingDetail(false); });
   }, [selectedModel]);
 
+  // Comparison mode handlers
+  const toggleCompareSelection = useCallback((modelId: string) => {
+    setSelectedForCompare(prev => {
+      if (prev.includes(modelId)) {
+        return prev.filter(id => id !== modelId);
+      }
+      if (prev.length >= 4) return prev; // Max 4 for layout
+      return [...prev, modelId];
+    });
+  }, []);
+
+  const startComparison = useCallback(async () => {
+    if (selectedForCompare.length < 2) return;
+    setIsComparing(true);
+    const newDetails = new Map(comparisonDetails);
+    const pending = selectedForCompare.filter(id => !newDetails.has(id));
+
+    // Track per-model loading state
+    setComparisonLoadingModels(new Set(pending));
+
+    const fetches = pending.map(async (id) => {
+      try {
+        const d = await api.getThinkingModelDetail(id);
+        newDetails.set(id, d);
+      } catch {
+        // Skip failed fetches
+      } finally {
+        setComparisonLoadingModels(prev => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+    });
+    await Promise.all(fetches);
+    setComparisonDetails(newDetails);
+  }, [selectedForCompare, comparisonDetails]);
+
+  const exitComparison = useCallback(() => {
+    setIsComparing(false);
+    setSelectedForCompare([]);
+    setComparisonDetails(new Map());
+    setComparisonLoadingModels(new Set());
+  }, []);
+
   // Filtered + sorted model list
   const filteredModels = useMemo(() => {
     if (!data) return [];
@@ -54,8 +153,8 @@ export function ThinkingModelsPage() {
     if (recFilter !== 'all') {
       models = models.filter(m => m.recommendation === recFilter);
     }
-    if (search) {
-      const q = search.toLowerCase();
+    if (debouncedSearch) {
+      const q = debouncedSearch.toLowerCase();
       models = models.filter(m =>
         m.name.toLowerCase().includes(q) ||
         (m.commonScenarios ?? []).some(s => s.toLowerCase().includes(q))
@@ -67,7 +166,20 @@ export function ThinkingModelsPage() {
       return a.name.localeCompare(b.name);
     });
     return models;
-  }, [data, recFilter, search, sortBy]);
+  }, [data, recFilter, debouncedSearch, sortBy]);
+
+  // Scenario heatmap data
+  const heatmapData = useMemo(() => {
+    if (!data || data.scenarioMatrix.length === 0) return null;
+    const allScenarios = [...new Set(data.scenarioMatrix.map(m => m.scenario))].sort();
+    const models = [...data.topModels].sort((a, b) => b.hits - a.hits);
+    const hitMap = new Map<string, number>();
+    for (const entry of data.scenarioMatrix) {
+      hitMap.set(`${entry.modelId}::${entry.scenario}`, entry.hits);
+    }
+    const maxHits = Math.max(...data.scenarioMatrix.map(m => m.hits), 1);
+    return { allScenarios, models, hitMap, maxHits };
+  }, [data]);
 
   if (error) return <ErrorState error={error} />;
   if (!data) return <Loading />;
@@ -81,6 +193,11 @@ export function ThinkingModelsPage() {
       <header className="page-header">
         <div>
           <h2>{t('thinkingModels.pageTitle')}</h2>
+          {data.thinkingSummary?.modelDefinitions && data.thinkingSummary.modelDefinitions.length > 0 && (
+            <p style={{ fontSize: TEXT.sm, color: 'var(--text-secondary)', margin: `${SPACE[1]} 0 0` }}>
+              {t('thinkingModels.thinkingOsSource')}: <code style={{ fontSize: TEXT.xs, background: 'var(--bg-sunken)', padding: '1px 4px', borderRadius: 3 }}>THINKING_OS.md</code>
+            </p>
+          )}
         </div>
         <div className="pill-row">
           <span className="badge">{t('thinkingModels.coverage')} {formatPercent(data.summary.coverageRate)}</span>
@@ -92,20 +209,23 @@ export function ThinkingModelsPage() {
 
       {!hasData ? (
         /* ── No data yet: show model definitions grid ── */
-        <section className="panel" style={{ marginBottom: 'var(--space-4)' }}>
-          <div style={{ textAlign: 'center', padding: 'var(--space-5)', color: 'var(--text-secondary)' }}>
-            <div style={{ fontSize: '2rem', marginBottom: 8 }}>🧠</div>
-            <h3 style={{ marginBottom: 4 }}>{t('thinkingModels.noDataTitle') || '思维模型定义'}</h3>
-            <p style={{ fontSize: '0.85rem', maxWidth: 500, margin: '0 auto 24px' }}>
-              {t('thinkingModels.noDataDesc') || '以下是 10 个思维模型的定义。当 AI 开始使用后，这里会显示每个模型的使用统计。'}
+        <section className="panel" style={{ marginBottom: SPACE[4] }}>
+          <div style={{ textAlign: 'center', padding: SPACE[5], color: 'var(--text-secondary)' }}>
+            <div style={{ fontSize: '2rem', marginBottom: SPACE[2] }}>🧠</div>
+            <h3 style={{ marginBottom: SPACE[1] }}>{t('thinkingModels.noDataTitle')}</h3>
+            <p style={{ fontSize: TEXT.lg, maxWidth: 500, margin: `0 auto ${SPACE[5]}` }}>
+              {t('thinkingModels.noDataDesc')}
             </p>
           </div>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: SPACE[3] }}>
             {data.topModels.map(model => (
               <div
                 key={model.modelId}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedModel(model.modelId); setDetail(null); } }}
                 style={{
-                  padding: 12,
+                  padding: SPACE[3],
                   border: '1px solid var(--border)',
                   borderRadius: 8,
                   background: 'var(--bg-sunken)',
@@ -113,16 +233,16 @@ export function ThinkingModelsPage() {
                 }}
                 onClick={() => { setSelectedModel(model.modelId); setDetail(null); }}
               >
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
-                  <strong style={{ fontSize: '0.85rem' }}>{model.modelId}: {model.name}</strong>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: SPACE[2] }}>
+                  <strong style={{ fontSize: TEXT.xl }}>{model.modelId}: {model.name}</strong>
                 </div>
-                <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', margin: '0 0 8px', lineHeight: 1.4 }}>
+                <p style={{ fontSize: TEXT.base, color: 'var(--text-secondary)', margin: `0 0 ${SPACE[2]}`, lineHeight: 1.4 }}>
                   {model.description}
                 </p>
                 {model.commonScenarios.length > 0 && (
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: SPACE[1] }}>
                     {model.commonScenarios.slice(0, 3).map(s => (
-                      <span key={s} style={{ fontSize: '0.65rem', padding: '1px 6px', background: 'rgba(91,139,160,0.1)', borderRadius: 3, color: 'var(--info)' }}>
+                      <span key={s} style={{ fontSize: TEXT.xs, padding: '1px 6px', background: 'rgba(91,139,160,0.1)', borderRadius: 3, color: 'var(--info)' }}>
                         {s}
                       </span>
                     ))}
@@ -137,8 +257,8 @@ export function ThinkingModelsPage() {
         <>
           {/* Coverage Trend */}
           {data.coverageTrend.length >= 1 && (
-            <section className="panel" style={{ marginBottom: 'var(--space-4)' }}>
-              <h3 style={{ fontSize: '0.85rem', fontWeight: 600, marginBottom: 8 }}>
+            <section className="panel" style={{ marginBottom: SPACE[4] }}>
+              <h3 className="section-title">
                 {t('thinkingModels.coverageTrend')}
               </h3>
               <LineChart
@@ -154,40 +274,32 @@ export function ThinkingModelsPage() {
           )}
 
           {/* Search + Sort + Filter */}
-          <div style={{ display: 'flex', gap: 8, marginBottom: 'var(--space-3)', alignItems: 'center', flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', gap: SPACE[2], marginBottom: SPACE[3], alignItems: 'center', flexWrap: 'wrap' }}>
             <div style={{ position: 'relative', flex: '1 1 200px' }}>
-              <Search size={14} style={{ position: 'absolute', left: 8, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-secondary)' }} />
+              <Search size={14} style={{ position: 'absolute', left: SPACE[2], top: '50%', transform: 'translateY(-50%)', color: 'var(--text-secondary)', pointerEvents: 'none' }} />
               <input
                 type="text"
-                placeholder={t('common.search') || 'Search...'}
+                placeholder={t('thinkingModels.searchPlaceholder')}
                 value={search}
                 onChange={e => setSearch(e.target.value)}
-                style={{ paddingLeft: 28, width: '100%', padding: '6px 8px 6px 28px', border: '1px solid var(--border)', borderRadius: 6, background: 'var(--bg-panel)', color: 'var(--text-primary)', fontSize: '0.8rem' }}
+                style={{ width: '100%', padding: `6px ${SPACE[2]} 6px 28px`, border: '1px solid var(--border)', borderRadius: 6, background: 'var(--bg-panel)', color: 'var(--text-primary)', fontSize: TEXT.lg }}
               />
             </div>
             <button
               onClick={() => setSortBy(prev => prev === 'hits' ? 'successRate' : prev === 'successRate' ? 'name' : 'hits')}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 10px', border: '1px solid var(--border)', borderRadius: 6, background: 'var(--bg-panel)', color: 'var(--text-secondary)', cursor: 'pointer', fontSize: '0.75rem' }}
+              className="sort-button"
             >
               <ArrowUpDown size={14} />
-              {sortBy === 'hits' ? 'Hits' : sortBy === 'successRate' ? 'Success' : 'Name'}
+              {sortBy === 'hits' ? t('thinkingModels.sortByHits') : sortBy === 'successRate' ? t('thinkingModels.sortBySuccessRate') : t('thinkingModels.sortByName')}
             </button>
-            <div style={{ display: 'flex', gap: 4 }}>
+            <div style={{ display: 'flex', gap: SPACE[1] }}>
               {['all', 'reinforce', 'rework', 'archive'].map(key => (
                 <button
                   key={key}
                   onClick={() => setRecFilter(key)}
-                  style={{
-                    padding: '3px 8px',
-                    border: `1px solid ${recFilter === key ? 'var(--accent)' : 'var(--border)'}`,
-                    borderRadius: 4,
-                    background: recFilter === key ? 'rgba(91, 139, 160, 0.15)' : 'transparent',
-                    color: recFilter === key ? 'var(--accent)' : 'var(--text-secondary)',
-                    cursor: 'pointer',
-                    fontSize: '0.7rem',
-                  }}
+                  className={`filter-button ${recFilter === key ? 'active' : ''}`}
                 >
-                  {key === 'all' ? 'All' : REC_BADGE[key]?.label(t)}
+                  {key === 'all' ? t('thinkingModels.filterAll') : REC_BADGE[key]?.label(t)}
                 </button>
               ))}
             </div>
@@ -197,49 +309,166 @@ export function ThinkingModelsPage() {
           <div className="grid two-columns wide-right">
             {/* Left: Model List */}
             <section className="panel">
-              <div className="list-table">
-                {filteredModels.map((item) => (
+              {/* Compare button bar */}
+              {selectedForCompare.length >= 2 && !isComparing && (
+                <div className="compare-bar">
+                  <span style={{ fontSize: TEXT.base, color: 'var(--text-secondary)' }}>
+                    {selectedForCompare.length} {t('thinkingModels.compareSelected')}
+                  </span>
                   <button
-                    className={`table-row ${selectedModel === item.modelId ? 'active' : ''}`}
-                    key={item.modelId}
-                    onClick={() => { setSelectedModel(item.modelId); setDetail(null); }}
+                    onClick={startComparison}
+                    className="compare-button"
                   >
-                    <div>
-                      <strong>{item.name}</strong>
-                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 180, display: 'block' }}>
-                        {item.commonScenarios.join(', ') || '—'}
-                      </span>
-                    </div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                      <span style={{ fontWeight: 600, fontSize: '0.85rem' }}>{item.hits}</span>
-                      {REC_BADGE[item.recommendation] && (
-                        <StatusBadge variant={REC_BADGE[item.recommendation].variant}>
-                          {REC_BADGE[item.recommendation].label(t)}
-                        </StatusBadge>
-                      )}
-                    </div>
+                    <Columns size={14} />
+                    {t('thinkingModels.compare')}
                   </button>
-                ))}
+                </div>
+              )}
+              <div className="list-table">
+                {filteredModels.map((item) => {
+                  const isChecked = selectedForCompare.includes(item.modelId);
+                  return (
+                    <div
+                      key={item.modelId}
+                      className={`table-row ${selectedModel === item.modelId && !isComparing ? 'active' : ''}`}
+                      style={{ display: 'flex', alignItems: 'center', gap: SPACE[2], padding: `${SPACE[2]} ${SPACE[3]}`, ...(item.recommendation === 'reinforce' ? { borderLeft: '3px solid var(--success)', paddingLeft: `calc(${SPACE[2]} - 3px)` } : {}) }}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        onChange={() => toggleCompareSelection(item.modelId)}
+                        onClick={e => e.stopPropagation()}
+                        style={{ accentColor: 'var(--accent)', cursor: 'pointer', flexShrink: 0 }}
+                        aria-label={`${t('thinkingModels.compare')}: ${item.name}`}
+                      />
+                      <button
+                        onClick={() => { setSelectedModel(item.modelId); setDetail(null); setIsComparing(false); }}
+                        className="model-list-button"
+                      >
+                        <div>
+                          <strong className="text-base">{item.name}</strong>
+                          <span className="scenario-ellipsis">
+                            {item.commonScenarios.join(', ') || '—'}
+                          </span>
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: SPACE[2] }}>
+                          <span className="hits-count">{item.hits}</span>
+                          {REC_BADGE[item.recommendation] && (
+                            <StatusBadge variant={REC_BADGE[item.recommendation].variant}>
+                              {REC_BADGE[item.recommendation].label(t)}
+                            </StatusBadge>
+                          )}
+                        </div>
+                      </button>
+                    </div>
+                  );
+                })}
                 {filteredModels.length === 0 && (
-                  <div style={{ padding: 'var(--space-4)', textAlign: 'center', color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
-                    No models match your filters.
-                  </div>
+                  <EmptyState
+                    title={data.topModels.length > 0 ? (t('thinkingModels.noMatches') || 'No models match your filters.') : t('thinkingModels.noModelsYet')}
+                    description={data.topModels.length > 0 ? '' : t('thinkingModels.noModelsYetDesc')}
+                  />
                 )}
               </div>
             </section>
 
-            {/* Right: Detail Panel */}
+            {/* Right: Detail Panel / Comparison View */}
             <section className="panel">
-              {!detail && <EmptyState title={t('thinkingModels.emptyTitle')} description={t('thinkingModels.emptyDesc')} />}
-              {detail && (
+              {isComparing ? (
+                /* ── Comparison View ── */
+                <div className="comparison-view">
+                  <div className="detail-header" style={{ marginBottom: SPACE[4] }}>
+                    <button className="back-button" onClick={exitComparison} title={t('thinkingModels.exitCompare')}>
+                      <X strokeWidth={1.75} size={18} />
+                    </button>
+                    <div>
+                      <h3>{t('thinkingModels.comparisonTitle')}</h3>
+                      <p style={{ fontSize: TEXT.lg, color: 'var(--text-secondary)' }}>
+                        {selectedForCompare.length} {t('thinkingModels.compareSelected')}
+                        {comparisonLoadingModels.size > 0 && (
+                          <span style={{ marginLeft: SPACE[2], color: 'var(--info)' }}>
+                            <Loader2 size={12} className="spin" /> {t('thinkingModels.loadingComparison')}
+                          </span>
+                        )}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Comparison grid: side-by-side metrics */}
+                  <div style={{ display: 'grid', gridTemplateColumns: `repeat(${selectedForCompare.length}, 1fr)`, gap: SPACE[3], marginBottom: SPACE[4] }}>
+                    {selectedForCompare.map(modelId => {
+                      const summary = data.topModels.find(m => m.modelId === modelId);
+                      const det = comparisonDetails.get(modelId);
+                      const isLoading = comparisonLoadingModels.has(modelId);
+                      if (!summary) return null;
+                      return (
+                        <div key={modelId} style={{ padding: SPACE[3], border: '1px solid var(--border)', borderRadius: 8, background: 'var(--bg-sunken)', opacity: isLoading ? 0.6 : 1, position: 'relative' }}>
+                          <strong style={{ fontSize: TEXT.xl, display: 'block', marginBottom: SPACE[2] }}>{summary.name}</strong>
+                          {isLoading && (
+                            <div style={{ position: 'absolute', top: SPACE[2], right: SPACE[2] }}>
+                              <Loader2 size={14} className="spin" style={{ color: 'var(--info)' }} />
+                            </div>
+                          )}
+                          <div className="pill-row" style={{ flexWrap: 'wrap', marginBottom: SPACE[2] }}>
+                            <span className="badge">{t('thinkingModels.hits')}: {summary.hits}</span>
+                            <span className="badge">{t('thinkingModels.successRate')}: {formatPercent(summary.successRate)}</span>
+                            <span className="badge">{t('thinkingModels.failureRate')}: {formatPercent(summary.failureRate)}</span>
+                            <span className="badge">{t('thinkingModels.pain')}: {formatPercent(summary.painRate)}</span>
+                          </div>
+                          {det && det.outcomeStats && (
+                            <div style={{ fontSize: TEXT.sm, color: 'var(--text-secondary)', marginTop: SPACE[1] }}>
+                              <div>{t('thinkingModels.correction')}: {formatPercent(det.outcomeStats.correctionRate)}</div>
+                              <div>{t('thinkingModels.coverage')}: {formatPercent(det.modelMeta.coverageRate)}</div>
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  {/* Usage Trends for each model */}
+                  <div style={{ display: 'grid', gridTemplateColumns: `repeat(${selectedForCompare.length}, 1fr)`, gap: SPACE[3] }}>
+                    {selectedForCompare.map(modelId => {
+                      const summary = data.topModels.find(m => m.modelId === modelId);
+                      const det = comparisonDetails.get(modelId);
+                      if (!det || det.usageTrend.length < 2) return null;
+                      return (
+                        <article key={modelId} style={{ padding: SPACE[2], border: '1px solid var(--border)', borderRadius: 6, background: 'var(--bg-sunken)' }}>
+                          <h4 className="text-sm text-semibold" style={{ marginBottom: SPACE[2] }}>
+                            {summary?.name} — {t('thinkingModels.usageTrend')}
+                          </h4>
+                          <LineChart
+                            data={det.usageTrend.map(d => ({ label: d.day.slice(5), value: d.hits }))}
+                            width="100%"
+                            height={80}
+                            color="var(--accent)"
+                            showGrid={false}
+                            showDots
+                            showArea
+                          />
+                        </article>
+                      );
+                    })}
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {isLoadingDetail && (
+                    <div style={{ textAlign: 'center', padding: SPACE[6], color: 'var(--text-secondary)' }}>
+                      <Loader2 size={24} className="spin" style={{ margin: `0 auto ${SPACE[2]}` }} />
+                      <p style={{ fontSize: TEXT.lg }}>{t('thinkingModels.loadingDetail')}</p>
+                    </div>
+                  )}
+                  {!isLoadingDetail && !detail && <EmptyState title={t('thinkingModels.emptyTitle')} description={t('thinkingModels.emptyDesc')} />}
+                  {!isLoadingDetail && detail && (
                 <div className="detail-stack">
                   <div className="detail-header">
-                    <button className="back-button" onClick={() => setDetail(null)} title="Back">
+                    <button className="back-button" onClick={() => { setDetail(null); setSelectedModel(''); setIsLoadingDetail(true); }} title={t('common.back')}>
                       <ChevronLeft strokeWidth={1.75} size={18} />
                     </button>
                     <div>
                       <h3>{detail.modelMeta.name}</h3>
-                      <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>{detail.modelMeta.description}</p>
+                      <p style={{ fontSize: TEXT.lg, color: 'var(--text-secondary)' }}>{detail.modelMeta.description}</p>
                     </div>
                     {REC_BADGE[detail.modelMeta.recommendation] && (
                       <StatusBadge variant={REC_BADGE[detail.modelMeta.recommendation].variant}>
@@ -248,11 +477,31 @@ export function ThinkingModelsPage() {
                     )}
                   </div>
 
+                  {/* Trigger Conditions */}
+                  {detail.modelMeta.trigger && (
+                    <article>
+                      <h4 className="text-base text-semibold">{t('thinkingModels.trigger')}</h4>
+                      <code className="code-block code-block-trigger">
+                        {detail.modelMeta.trigger}
+                      </code>
+                    </article>
+                  )}
+
+                  {/* Anti-Patterns */}
+                  {detail.modelMeta.antiPattern && (
+                    <article>
+                      <h4 className="text-base text-semibold text-error">{t('thinkingModels.antiPattern')}</h4>
+                      <code className="code-block code-block-antipattern">
+                        {detail.modelMeta.antiPattern}
+                      </code>
+                    </article>
+                  )}
+
                   {/* Usage Trend */}
-                  {detail.usageTrend.length >= 1 && (
+                  {detail.usageTrend.length >= 1 ? (
                     <article>
-                      <h4 style={{ fontSize: '0.8rem', fontWeight: 600, marginBottom: 8 }}>
-                        {t('thinkingModels.usageTrend') || 'Usage Trend'}
+                      <h4 className="text-lg text-semibold" style={{ marginBottom: SPACE[2] }}>
+                        {t('thinkingModels.usageTrend')}
                       </h4>
                       <LineChart
                         data={detail.usageTrend.map(d => ({ label: d.day.slice(5), value: d.hits }))}
@@ -264,11 +513,16 @@ export function ThinkingModelsPage() {
                         showArea
                       />
                     </article>
+                  ) : (
+                    <EmptyState
+                      title={t('thinkingModels.emptyUsageTrend')}
+                      description={t('thinkingModels.emptyUsageTrendDesc')}
+                    />
                   )}
 
                   {/* Outcome Stats */}
                   <article>
-                    <h4>{t('thinkingModels.outcomeStats')}</h4>
+                    <h4 className="text-base text-semibold">{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>
@@ -280,11 +534,11 @@ export function ThinkingModelsPage() {
                   {/* Scenario Distribution */}
                   {detail.scenarioDistribution.length > 0 && (
                     <article>
-                      <h4>{t('thinkingModels.scenarioDistribution')}</h4>
+                      <h4 className="text-base text-semibold">{t('thinkingModels.scenarioDistribution')}</h4>
                       <div className="stack">
                         {detail.scenarioDistribution.map((item) => (
                           <div className="row-card" key={item.scenario}>
-                            <strong>{item.scenario}</strong>
+                            <strong className="text-base">{item.scenario}</strong>
                             <span>{item.hits}</span>
                           </div>
                         ))}
@@ -295,30 +549,39 @@ export function ThinkingModelsPage() {
                   {/* Recent Events */}
                   {detail.recentEvents.length > 0 && (
                     <article>
-                      <h4>{t('thinkingModels.recentEvents')}</h4>
+                      <h4 className="text-base text-semibold">{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(', ') || '—'}</span>
+                              <strong className="text-base">{formatDate(event.createdAt)}</strong>
+                              <span className="text-sm">{event.scenarios.join(', ') || '—'}</span>
                             </div>
-                            {(event as any).toolContext?.length > 0 && (
-                              <div style={{ fontSize: '0.7rem', color: 'var(--text-secondary)' }}>
-                                🛠 {(event as any).toolContext.map((tc: any) => `${tc.toolName} (${tc.outcome})`).join(', ')}
+                            {event.toolContext?.length > 0 && (
+                              <div className="event-context-tool" aria-label={t('thinkingModels.toolContext')}>
+                                <Wrench size={12} aria-hidden /> {event.toolContext.map(tc => (
+                                  `${tc.toolName} (${tc.outcome}${tc.errorType ? `: ${tc.errorType}` : ''})`
+                                )).join(', ')}
                               </div>
                             )}
-                            {(event as any).painContext?.length > 0 && (
-                              <div style={{ fontSize: '0.7rem', color: 'var(--error)' }}>
-                                ⚡ {(event as any).painContext.map((pc: any) => `${pc.source} (${pc.score})`).join(', ')}
+                            {event.painContext?.length > 0 && (
+                              <div className="event-context-pain" aria-label={t('thinkingModels.painContext')}>
+                                <Zap size={12} aria-hidden /> {event.painContext.map(pc => `${pc.source} (${pc.score})`).join(', ')}
                               </div>
                             )}
-                            {(event as any).principleContext?.length > 0 && (
-                              <div style={{ fontSize: '0.7rem', color: 'var(--info)' }}>
-                                📋 {(event as any).principleContext.map((pr: any) => `${pr.principleId}`).join(', ')}
+                            {event.principleContext?.length > 0 && (
+                              <div className="event-context-principle" aria-label={t('thinkingModels.principleContext')}>
+                                <ClipboardList size={12} aria-hidden /> {event.principleContext.map(pr => (
+                                  `${pr.principleId ?? '—'} ${pr.eventType ? `(${pr.eventType})` : ''}`
+                                )).join(', ')}
                               </div>
                             )}
-                            <pre style={{ fontSize: '0.7rem', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                            {event.matchedPattern && (
+                              <code className="matched-pattern">
+                                /{event.matchedPattern}/
+                              </code>
+                            )}
+                            <pre className="event-trigger-excerpt">
                               {event.triggerExcerpt}
                             </pre>
                           </div>
@@ -326,18 +589,104 @@ export function ThinkingModelsPage() {
                       </div>
                     </article>
                   )}
-
-                  {/* No data message for detail */}
-                  {detail.usageTrend.length === 0 && detail.recentEvents.length === 0 && (
-                    <div style={{ textAlign: 'center', padding: 'var(--space-4)', color: 'var(--text-secondary)' }}>
-                      <Info size={20} style={{ marginBottom: 8 }} />
-                      <p style={{ fontSize: '0.8rem' }}>No usage data for this model yet.</p>
-                    </div>
-                  )}
                 </div>
               )}
+                </>
+              )}
             </section>
           </div>
+
+          {/* Dormant Models Section */}
+          {data.dormantModels.length > 0 ? (
+            <CollapsiblePanel
+              title={t('thinkingModels.dormantModels')}
+              badge={`${data.dormantModels.length}`}
+              defaultCollapsed
+            >
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: SPACE[2], padding: `${SPACE[2]} 0` }}>
+                {data.dormantModels.map(model => (
+                  <div
+                    key={model.modelId}
+                    style={{
+                      padding: `${SPACE[2]} ${SPACE[3]}`,
+                      border: '1px solid var(--border)',
+                      borderRadius: 6,
+                      background: 'var(--bg-sunken)',
+                    }}
+                  >
+                    <strong style={{ fontSize: TEXT.lg }}>{model.name}</strong>
+                    <p style={{ fontSize: TEXT.sm, color: 'var(--text-secondary)', margin: `${SPACE[1]} 0 0`, lineHeight: 1.3 }}>
+                      {model.description}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </CollapsiblePanel>
+          ) : (
+            <CollapsiblePanel
+              title={t('thinkingModels.dormantModels')}
+              defaultCollapsed
+            >
+              <EmptyState
+                title={t('thinkingModels.emptyAllActive')}
+                description={t('thinkingModels.emptyAllActiveDesc')}
+              />
+            </CollapsiblePanel>
+          )}
+
+          {/* Scenario Heatmap */}
+          {heatmapData ? (
+            <CollapsiblePanel title={t('thinkingModels.scenarioHeatmap')}>
+              <div style={{ overflowX: 'auto' }}>
+                <table className="heatmap-table">
+                  <thead>
+                    <tr>
+                      <th className="heatmap-header heatmap-sticky">
+                        Model
+                      </th>
+                      {heatmapData.allScenarios.map(sc => (
+                        <th key={sc} className="heatmap-header heatmap-scenario">
+                          {sc}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {heatmapData.models.map(model => (
+                      <tr key={model.modelId}>
+                        <td className="heatmap-model heatmap-sticky">
+                          {model.name}
+                        </td>
+                        {heatmapData.allScenarios.map(sc => {
+                          const hits = heatmapData.hitMap.get(`${model.modelId}::${sc}`) ?? 0;
+                          const intensity = hits / heatmapData.maxHits;
+                          const bgColor = hits === 0
+                            ? 'var(--bg-sunken)'
+                            : `rgba(91, 139, 160, ${Math.max(0.15, intensity * 0.55).toFixed(2)})`;
+                          return (
+                            <td
+                              key={sc}
+                              className="heatmap-cell"
+                              style={{ backgroundColor: bgColor }}
+                            >
+                              {hits}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CollapsiblePanel>
+          ) : (
+            <CollapsiblePanel title={t('thinkingModels.scenarioHeatmap')}>
+              <EmptyState
+                title={t('thinkingModels.emptyScenarioMatrix')}
+                description={t('thinkingModels.emptyScenarioMatrixDesc')}
+              />
+            </CollapsiblePanel>
+          )}
         </>
       )}
     </div>