ai-agent-router 0.2.2 → 0.2.4

package/src/app/tokenizer/page.tsx

@@ -0,0 +1,813 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import Nav from '../components/Nav';
+import { useToast } from '../components/ToastProvider';
+
+interface ModelOption {
+  id: number;
+  provider_id: number;
+  name: string;
+  model_id: string;
+  enabled: boolean;
+  provider_name?: string;
+  protocol?: string;
+}
+
+interface Usage {
+  input_tokens: number;
+  output_tokens: number;
+  total_tokens: number;
+  estimated: boolean;
+}
+
+interface TestResult {
+  text: string;
+  usage: Usage;
+  response_time_ms?: number;
+}
+
+interface HistoryItem {
+  id: number;
+  created_at: string;
+  status: number;
+  response_time_ms: number | null;
+  mode: 'measure' | 'translate' | null;
+  source_language: string | null;
+  target_language: string | null;
+  source_text: string;
+  result_text: string;
+  usage: Usage | null;
+  model_name: string | null;
+  model_id: string | null;
+  provider_name: string | null;
+}
+
+const LANGUAGES = [
+  { value: '简体中文', label: '简体中文' },
+  { value: '英文', label: '英文' },
+  { value: '繁体中文', label: '繁体中文' },
+  { value: '日语', label: '日语' },
+  { value: '法语', label: '法语' },
+  { value: '西班牙语', label: '西班牙语' },
+];
+
+export default function TokenizerPage() {
+  const [activeTab, setActiveTab] = useState<'test' | 'history'>('test');
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState<'test' | 'translate' | null>(null);
+  const [selectedModelId, setSelectedModelId] = useState('');
+  const [sourceLanguage, setSourceLanguage] = useState('简体中文');
+  const [targetLanguage, setTargetLanguage] = useState('英文');
+  const [testScope, setTestScope] = useState<'both' | 'source' | 'target'>('both');
+  const [temperature, setTemperature] = useState('0');
+  const [topP, setTopP] = useState('1');
+  const [sourceText, setSourceText] = useState('');
+  const [targetText, setTargetText] = useState('');
+  const [sourceResult, setSourceResult] = useState<TestResult | null>(null);
+  const [targetResult, setTargetResult] = useState<TestResult | null>(null);
+  const [translationUsage, setTranslationUsage] = useState<Usage | null>(null);
+  const [translationTimeMs, setTranslationTimeMs] = useState<number | null>(null);
+  const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const { showToast } = useToast();
+
+  useEffect(() => {
+    loadModels();
+  }, []);
+
+  useEffect(() => {
+    if (activeTab === 'history') {
+      loadHistory();
+    }
+  }, [activeTab]);
+
+  const selectedModel = useMemo(
+    () => models.find((model) => model.id === Number(selectedModelId)) || null,
+    [models, selectedModelId]
+  );
+
+  const loadModels = async () => {
+    try {
+      const res = await fetch('/api/models?enabled=true');
+      const data = await res.json();
+      setModels(Array.isArray(data) ? data : []);
+    } catch (error) {
+      console.error('Failed to load tokenizer models:', error);
+      showToast('模型加载失败', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadHistory = async () => {
+    setHistoryLoading(true);
+    try {
+      const res = await fetch('/api/tokenizer/history?limit=50');
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || '历史记录加载失败');
+      }
+      setHistoryItems(Array.isArray(data.logs) ? data.logs : []);
+    } catch (error: any) {
+      console.error('Failed to load tokenizer history:', error);
+      showToast(error.message || '历史记录加载失败', 'error');
+    } finally {
+      setHistoryLoading(false);
+    }
+  };
+
+  const canSubmit = Boolean(selectedModelId);
+  const parsedTemperature = Number(temperature);
+  const parsedTopP = Number(topP);
+
+  const createRequestBody = (payload: {
+    mode: 'measure' | 'translate';
+    text: string;
+    sourceLanguage: string;
+    targetLanguage?: string;
+  }) => ({
+    model_id: Number(selectedModelId),
+    mode: payload.mode,
+    source_language: payload.sourceLanguage,
+    target_language: payload.targetLanguage,
+    text: payload.text,
+    temperature: Number.isFinite(parsedTemperature) ? parsedTemperature : 0,
+    top_p: Number.isFinite(parsedTopP) ? parsedTopP : 1,
+  });
+
+  const runMeasure = async (side: 'source' | 'target', text: string, language: string) => {
+    if (!canSubmit) {
+      showToast('请先选择模型', 'error');
+      return null;
+    }
+
+    if (!text.trim()) {
+      showToast(side === 'source' ? '请输入源语言文本' : '请输入目标语言文本', 'error');
+      return null;
+    }
+
+    try {
+      const res = await fetch('/api/tokenizer/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(
+          createRequestBody({
+            mode: 'measure',
+            sourceLanguage: language,
+            text,
+          })
+        ),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || '测试失败');
+      }
+
+      const result = {
+        text: data.text || '',
+        usage: data.usage,
+        response_time_ms: data.response_time_ms,
+      } satisfies TestResult;
+
+      if (side === 'source') {
+        setSourceResult(result);
+      } else {
+        setTargetResult(result);
+      }
+
+      showToast(side === 'source' ? '源语言测试完成' : '目标语言测试完成', 'success');
+      return result;
+    } catch (error: any) {
+      console.error('Tokenizer measure failed:', error);
+      showToast(error.message || '测试失败', 'error');
+      return null;
+    }
+  };
+
+  const handleTranslate = async () => {
+    if (!canSubmit) {
+      showToast('请先选择模型', 'error');
+      return;
+    }
+
+    if (!sourceText.trim()) {
+      showToast('请输入源语言文本', 'error');
+      return;
+    }
+
+    setSubmitting('translate');
+    try {
+      const res = await fetch('/api/tokenizer/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(
+          createRequestBody({
+            mode: 'translate',
+            sourceLanguage,
+            targetLanguage,
+            text: sourceText,
+          })
+        ),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || '翻译失败');
+      }
+
+      setTargetText(data.text || '');
+      setTranslationUsage(data.usage || null);
+      setTranslationTimeMs(data.response_time_ms || null);
+      setTargetResult(null);
+      await loadHistory();
+      showToast('翻译完成，已填入目标语言文本', 'success');
+    } catch (error: any) {
+      console.error('Tokenizer translate failed:', error);
+      showToast(error.message || '翻译失败', 'error');
+    } finally {
+      setSubmitting(null);
+    }
+  };
+
+  const handleRunTests = async () => {
+    if (!canSubmit) {
+      showToast('请先选择模型', 'error');
+      return;
+    }
+
+    if (testScope !== 'target' && !sourceText.trim()) {
+      showToast('请输入源语言文本', 'error');
+      return;
+    }
+
+    if (testScope !== 'source' && !targetText.trim()) {
+      showToast('请输入目标语言文本', 'error');
+      return;
+    }
+
+    setSubmitting('test');
+    try {
+      if (testScope === 'source') {
+        await runMeasure('source', sourceText, sourceLanguage);
+        setTargetResult(null);
+        await loadHistory();
+        return;
+      }
+
+      if (testScope === 'target') {
+        await runMeasure('target', targetText, targetLanguage);
+        setSourceResult(null);
+        await loadHistory();
+        return;
+      }
+
+      const sourcePromise = fetch('/api/tokenizer/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(
+          createRequestBody({
+            mode: 'measure',
+            sourceLanguage,
+            text: sourceText,
+          })
+        ),
+      });
+
+      const targetPromise = fetch('/api/tokenizer/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(
+          createRequestBody({
+            mode: 'measure',
+            sourceLanguage: targetLanguage,
+            text: targetText,
+          })
+        ),
+      });
+
+      const [sourceRes, targetRes] = await Promise.all([sourcePromise, targetPromise]);
+      const [sourceData, targetData] = await Promise.all([sourceRes.json(), targetRes.json()]);
+
+      if (!sourceRes.ok) {
+        throw new Error(sourceData.error || '源语言测试失败');
+      }
+
+      if (!targetRes.ok) {
+        throw new Error(targetData.error || '目标语言测试失败');
+      }
+
+      setSourceResult({
+        text: sourceData.text || '',
+        usage: sourceData.usage,
+        response_time_ms: sourceData.response_time_ms,
+      });
+      setTargetResult({
+        text: targetData.text || '',
+        usage: targetData.usage,
+        response_time_ms: targetData.response_time_ms,
+      });
+      await loadHistory();
+      showToast('双语言测试完成', 'success');
+    } catch (error: any) {
+      console.error('Tokenizer compare failed:', error);
+      showToast(error.message || '测试失败', 'error');
+    } finally {
+      setSubmitting(null);
+    }
+  };
+
+  const usageDelta =
+    sourceResult && targetResult
+      ? targetResult.usage.total_tokens - sourceResult.usage.total_tokens
+      : null;
+  const compareTimeMs =
+    (sourceResult?.response_time_ms || 0) + (targetResult?.response_time_ms || 0);
+
+  if (loading) {
+    return (
+      <>
+        <Nav />
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-lg">加载中...</div>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Nav />
+      <main className="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-4 sm:px-0 space-y-5">
+          <div className="inline-flex rounded-xl border border-slate-200 bg-white/80 p-1 shadow-sm">
+            <button
+              onClick={() => setActiveTab('test')}
+              className={`rounded-lg px-4 py-2 text-xs font-semibold transition-colors ${
+                activeTab === 'test'
+                  ? 'bg-emerald-600 text-white'
+                  : 'text-slate-600 hover:bg-slate-100'
+              }`}
+            >
+              开始测试
+            </button>
+            <button
+              onClick={() => setActiveTab('history')}
+              className={`rounded-lg px-4 py-2 text-xs font-semibold transition-colors ${
+                activeTab === 'history'
+                  ? 'bg-emerald-600 text-white'
+                  : 'text-slate-600 hover:bg-slate-100'
+              }`}
+            >
+              历史记录
+            </button>
+          </div>
+
+          {activeTab === 'test' ? (
+            <>
+          <section className="bg-white/75 backdrop-blur-sm shadow-md rounded-2xl border border-emerald-100/60 p-6">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+              <div>
+                <h1 className="text-lg font-bold text-slate-800">Tokenizer</h1>
+                <p className="text-xs text-slate-500 mt-1">
+                  选择模型后，可以先翻译，再默认一键测试两种语言的 token 消耗。
+                </p>
+              </div>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 lg:min-w-[620px]">
+                <Field label="模型">
+                  <select
+                    value={selectedModelId}
+                    onChange={(e) => setSelectedModelId(e.target.value)}
+                    className="block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400"
+                  >
+                    <option value="">请选择模型</option>
+                    {models.map((model) => (
+                      <option key={model.id} value={model.id}>
+                        {model.provider_name ? `${model.provider_name} / ` : ''}
+                        {model.name}
+                      </option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="源语言">
+                  <select
+                    value={sourceLanguage}
+                    onChange={(e) => setSourceLanguage(e.target.value)}
+                    className="block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400"
+                  >
+                    {LANGUAGES.map((language) => (
+                      <option key={language.value} value={language.value}>
+                        {language.label}
+                      </option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="目标语言">
+                  <select
+                    value={targetLanguage}
+                    onChange={(e) => setTargetLanguage(e.target.value)}
+                    className="block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400"
+                  >
+                    {LANGUAGES.map((language) => (
+                      <option key={language.value} value={language.value}>
+                        {language.label}
+                      </option>
+                    ))}
+                  </select>
+                </Field>
+              </div>
+            </div>
+
+            {selectedModel && (
+              <div className="mt-4 flex flex-wrap items-center gap-2 text-[11px] text-slate-500">
+                <span className="rounded-full bg-emerald-50 px-2.5 py-1 font-medium text-emerald-700">
+                  {selectedModel.provider_name || 'Provider'}
+                </span>
+                <span className="rounded-full bg-slate-100 px-2.5 py-1 font-medium text-slate-600">
+                  {selectedModel.model_id}
+                </span>
+              </div>
+            )}
+
+            <div className="mt-5 rounded-2xl border border-slate-200 bg-gradient-to-r from-emerald-50/80 via-white to-amber-50/60 p-5">
+              <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
+                <div>
+                  <h2 className="text-sm font-bold text-slate-800">翻译与对比</h2>
+                  <p className="text-xs text-slate-500 mt-1">
+                    测试模式默认是全部测试；如果只想测一侧，可以先切换范围再执行。
+                  </p>
+                </div>
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 xl:min-w-[520px]">
+                  <Field label="测试范围">
+                    <select
+                      value={testScope}
+                      onChange={(e) => setTestScope(e.target.value as 'both' | 'source' | 'target')}
+                      className="block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400"
+                    >
+                      <option value="both">全部测试</option>
+                      <option value="source">仅源语言</option>
+                      <option value="target">仅目标语言</option>
+                    </select>
+                  </Field>
+                  <Field label="Temperature">
+                    <input
+                      type="number"
+                      step="0.1"
+                      min="0"
+                      max="2"
+                      value={temperature}
+                      onChange={(e) => setTemperature(e.target.value)}
+                      className="block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400"
+                    />
+                  </Field>
+                  <Field label="Top P">
+                    <input
+                      type="number"
+                      step="0.1"
+                      min="0"
+                      max="1"
+                      value={topP}
+                      onChange={(e) => setTopP(e.target.value)}
+                      className="block w-full rounded-lg border border-slate-200 bg-white/90 px-3 py-2 text-xs shadow-sm focus:border-emerald-400"
+                    />
+                  </Field>
+                </div>
+              </div>
+
+              <div className="mt-4 flex flex-wrap gap-2">
+                <button
+                  onClick={handleTranslate}
+                  disabled={!canSubmit || submitting !== null}
+                  className="inline-flex items-center px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white bg-emerald-600 hover:bg-emerald-700 shadow-sm"
+                >
+                  {submitting === 'translate' ? '翻译中...' : `翻译为${targetLanguage}`}
+                </button>
+                <button
+                  onClick={handleRunTests}
+                  disabled={!canSubmit || submitting !== null}
+                  className="inline-flex items-center px-3.5 py-1.5 rounded-lg text-xs font-semibold text-emerald-700 bg-white hover:bg-emerald-50 border border-emerald-200 shadow-sm"
+                >
+                  {submitting === 'test'
+                    ? '测试中...'
+                    : testScope === 'both'
+                      ? '开始全部测试'
+                      : testScope === 'source'
+                        ? '开始源语言测试'
+                        : '开始目标语言测试'}
+                </button>
+              </div>
+
+              <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-3">
+                <CompareCard
+                  title="源语言总计"
+                  value={sourceResult?.usage.total_tokens}
+                  note={buildUsageNote(sourceResult)}
+                  signed={false}
+                />
+                <CompareCard
+                  title="目标语言总计"
+                  value={targetResult?.usage.total_tokens}
+                  note={buildUsageNote(targetResult)}
+                  signed={false}
+                />
+                <CompareCard
+                  title="差值"
+                  value={usageDelta}
+                  note={usageDelta === null ? '等待两侧结果' : usageDelta >= 0 ? '目标语言更高' : '源语言更高'}
+                  signed
+                />
+              </div>
+
+              {translationUsage && (
+                <div className="mt-4 rounded-xl border border-slate-200 bg-slate-50/80 p-4">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <div className="text-xs font-semibold text-slate-700">最近一次翻译消耗</div>
+                      <div className="text-[11px] text-slate-500 mt-1">
+                        {translationUsage.estimated ? 'Estimated token usage' : 'Exact usage from provider response'}
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-lg font-bold text-slate-800">{translationUsage.total_tokens}</div>
+                      <div className="text-[11px] text-slate-500">
+                        Total tokens{translationTimeMs !== null ? ` · ${translationTimeMs} ms` : ''}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </section>
+
+          <section className="grid grid-cols-1 gap-5 xl:grid-cols-2">
+            <LanguagePanel
+              title="源语言输入"
+              subtitle="原文输入区"
+              language={sourceLanguage}
+              text={sourceText}
+              onChange={setSourceText}
+              result={sourceResult}
+              accent="emerald"
+            />
+
+            <LanguagePanel
+              title="目标语言输入"
+              subtitle="可手动输入，或使用翻译结果"
+              language={targetLanguage}
+              text={targetText}
+              onChange={setTargetText}
+              result={targetResult}
+              accent="amber"
+            />
+          </section>
+            </>
+          ) : (
+            <section className="bg-white/75 backdrop-blur-sm shadow-md rounded-2xl border border-emerald-100/60 p-6">
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <h2 className="text-sm font-bold text-slate-800">历史记录</h2>
+                  <p className="text-xs text-slate-500 mt-1">
+                    展示最近 50 条 Tokenizer 调用记录，包括模式、token、耗时和文本摘要。
+                  </p>
+                </div>
+                <button
+                  onClick={loadHistory}
+                  disabled={historyLoading}
+                  className="inline-flex items-center px-3.5 py-1.5 rounded-lg text-xs font-semibold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 border border-emerald-200"
+                >
+                  {historyLoading ? '刷新中...' : '刷新'}
+                </button>
+              </div>
+
+              <div className="mt-5 space-y-3">
+                {historyItems.length === 0 ? (
+                  <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50/60 px-4 py-10 text-center text-xs text-slate-400">
+                    暂无测试记录
+                  </div>
+                ) : (
+                  historyItems.map((item) => (
+                    <article key={item.id} className="rounded-xl border border-slate-200 bg-white/90 p-4">
+                      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+                        <div className="space-y-2">
+                          <div className="flex flex-wrap items-center gap-2 text-[11px]">
+                            <span className="rounded-full bg-emerald-50 px-2.5 py-1 font-medium text-emerald-700">
+                              {item.mode === 'translate' ? '翻译' : '测试'}
+                            </span>
+                            {item.provider_name && (
+                              <span className="rounded-full bg-slate-100 px-2.5 py-1 font-medium text-slate-600">
+                                {item.provider_name}
+                              </span>
+                            )}
+                            {item.model_id && (
+                              <span className="rounded-full bg-slate-100 px-2.5 py-1 font-medium text-slate-600">
+                                {item.model_id}
+                              </span>
+                            )}
+                            <span className="text-slate-400">{formatDateTime(item.created_at)}</span>
+                          </div>
+                          <div className="text-xs text-slate-600">
+                            {item.source_language || '--'}
+                            {item.target_language ? ` -> ${item.target_language}` : ''}
+                            {item.response_time_ms !== null ? ` · ${item.response_time_ms} ms` : ''}
+                            {item.usage?.estimated ? ' · estimated' : ' · exact'}
+                          </div>
+                        </div>
+                        <div className="grid grid-cols-3 gap-2 min-w-[220px]">
+                          <MiniMetric label="输入" value={item.usage?.input_tokens} />
+                          <MiniMetric label="输出" value={item.usage?.output_tokens} />
+                          <MiniMetric label="总计" value={item.usage?.total_tokens} />
+                        </div>
+                      </div>
+
+                      <div className="mt-4 grid grid-cols-1 gap-3 xl:grid-cols-2">
+                        <HistoryTextBlock title="请求文本" content={item.source_text} />
+                        <HistoryTextBlock title="返回文本" content={item.result_text} />
+                      </div>
+                    </article>
+                  ))
+                )}
+              </div>
+            </section>
+          )}
+        </div>
+      </main>
+    </>
+  );
+}
+
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <label className="block">
+      <span className="block text-xs font-semibold text-slate-700 mb-1.5">{label}</span>
+      {children}
+    </label>
+  );
+}
+
+function LanguagePanel({
+  title,
+  subtitle,
+  language,
+  text,
+  onChange,
+  result,
+  accent,
+}: {
+  title: string;
+  subtitle: string;
+  language: string;
+  text: string;
+  onChange: (value: string) => void;
+  result: TestResult | null;
+  accent: 'emerald' | 'amber';
+}) {
+  const accentClass =
+    accent === 'emerald'
+      ? 'border-emerald-100/60 bg-white/75'
+      : 'border-amber-100/60 bg-white/75';
+
+  const buttonClass =
+    accent === 'emerald'
+      ? 'bg-emerald-600 hover:bg-emerald-700 text-white'
+      : 'bg-amber-500 hover:bg-amber-600 text-white';
+
+  return (
+    <section className={`backdrop-blur-sm shadow-md rounded-2xl border p-6 ${accentClass}`}>
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h2 className="text-sm font-bold text-slate-800">{title}</h2>
+          <p className="text-xs text-slate-500 mt-1">
+            {language} · {subtitle}
+          </p>
+        </div>
+        <div className={`inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-semibold shadow-sm ${buttonClass}`}>
+          {accent === 'emerald' ? 'Source' : 'Target'}
+        </div>
+      </div>
+
+      <textarea
+        value={text}
+        onChange={(e) => onChange(e.target.value)}
+        rows={8}
+        placeholder={`请输入${language}文本`}
+        className="mt-4 block w-full rounded-xl border border-slate-200 bg-white/90 px-3 py-3 text-sm shadow-sm focus:border-emerald-400"
+      />
+
+      {result ? (
+        <div className="mt-4 rounded-xl border border-slate-200 bg-slate-50/80 p-4 space-y-4">
+          <div className="grid grid-cols-3 gap-3">
+            <MetricCard label="输入" value={result.usage.input_tokens} />
+            <MetricCard label="输出" value={result.usage.output_tokens} />
+            <MetricCard label="总计" value={result.usage.total_tokens} />
+          </div>
+          <div className="flex items-center justify-between gap-2 text-[11px]">
+            <span className="font-medium text-slate-600">
+              {result.usage.estimated ? 'Estimated token usage' : 'Exact usage from provider response'}
+            </span>
+            <span className="text-slate-400">
+              {result.response_time_ms !== undefined ? `${result.response_time_ms} ms` : 'LLM 返回文本'}
+            </span>
+          </div>
+          <pre className="whitespace-pre-wrap break-words rounded-lg bg-white px-3 py-3 text-xs text-slate-700 border border-slate-200">
+            {result.text || '无返回文本'}
+          </pre>
+        </div>
+      ) : (
+        <div className="mt-4 rounded-xl border border-dashed border-slate-200 bg-slate-50/60 px-4 py-6 text-xs text-slate-400">
+          这里会展示 token 消耗和模型返回文本。
+        </div>
+      )}
+    </section>
+  );
+}
+
+function MiniMetric({ label, value }: { label: string; value: number | undefined }) {
+  return (
+    <div className="rounded-lg bg-slate-50 border border-slate-200 px-3 py-2">
+      <div className="text-[10px] text-slate-500">{label}</div>
+      <div className="mt-1 text-sm font-bold text-slate-800">{value ?? '--'}</div>
+    </div>
+  );
+}
+
+function HistoryTextBlock({ title, content }: { title: string; content: string }) {
+  return (
+    <div className="rounded-lg border border-slate-200 bg-slate-50/70 p-3">
+      <div className="text-[11px] font-semibold text-slate-600">{title}</div>
+      <pre className="mt-2 whitespace-pre-wrap break-words text-xs text-slate-700 max-h-40 overflow-auto">
+        {content || '无内容'}
+      </pre>
+    </div>
+  );
+}
+
+function formatDateTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
+
+function buildUsageNote(result: TestResult | null) {
+  if (!result) {
+    return '等待结果';
+  }
+
+  const base = result.usage.estimated ? 'estimated' : 'exact';
+  return result.response_time_ms !== undefined
+    ? `${base} · ${result.response_time_ms} ms`
+    : base;
+}
+
+function MetricCard({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-lg bg-white border border-slate-200 px-3 py-3">
+      <div className="text-[11px] text-slate-500">{label} token</div>
+      <div className="mt-1 text-lg font-bold text-slate-800">{value}</div>
+    </div>
+  );
+}
+
+function CompareCard({
+  title,
+  value,
+  note,
+  signed = false,
+  suffix,
+}: {
+  title: string;
+  value: number | null | undefined;
+  note: string;
+  signed?: boolean;
+  suffix?: string;
+}) {
+  const renderedValue =
+    value === null || value === undefined
+      ? '--'
+      : signed && value > 0
+        ? `+${value}${suffix ? ` ${suffix}` : ''}`
+        : `${value}${suffix ? ` ${suffix}` : ''}`;
+
+  return (
+    <div className="rounded-xl border border-slate-200 bg-slate-50/80 p-4">
+      <div className="text-xs font-semibold text-slate-600">{title}</div>
+      <div className="mt-2 text-2xl font-bold text-slate-800">{renderedValue}</div>
+      <div className="mt-1 text-[11px] text-slate-400">{note}</div>
+    </div>
+  );
+}