@yancyyu/openhermit 1.5.8

package/src/renderer/components/report/sections/TokenSection.tsx

@@ -0,0 +1,116 @@
+import { Coins } from 'lucide-react';
+
+import { AssessmentBadge } from '../AssessmentBadge';
+import { ReportSection } from '../ReportSection';
+
+import type { ReportCacheEconomics, ReportTokenUsage } from '@renderer/types/sessionReport';
+
+const fmt = (v: number) => v.toLocaleString();
+const fmtCost = (v: number) => `$${v.toFixed(4)}`;
+
+interface TokenSectionProps {
+  data: ReportTokenUsage;
+  cacheEconomics: ReportCacheEconomics;
+  defaultCollapsed?: boolean;
+}
+
+export const TokenSection = ({ data, cacheEconomics, defaultCollapsed }: TokenSectionProps) => {
+  const modelEntries = Object.entries(data.byModel).sort((a, b) => b[1].costUsd - a[1].costUsd);
+
+  return (
+    <ReportSection title="Token 用量" icon={Coins} defaultCollapsed={defaultCollapsed}>
+      {/* By-model table */}
+      <div className="mb-4 overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="border-b border-border text-left text-text-muted">
+              <th className="pb-2 pr-4">模型</th>
+              <th className="pb-2 pr-4 text-right">API 调用</th>
+              <th className="pb-2 pr-4 text-right">输入</th>
+              <th className="pb-2 pr-4 text-right">输出</th>
+              <th className="pb-2 pr-4 text-right">缓存读取</th>
+              <th className="pb-2 pr-4 text-right">缓存创建</th>
+              <th className="pb-2 text-right">费用</th>
+            </tr>
+          </thead>
+          <tbody>
+            {modelEntries.map(([model, stats]) => (
+              <tr key={model} className="border-border/50 border-b">
+                <td className="py-1.5 pr-4 text-text">{model}</td>
+                <td className="py-1.5 pr-4 text-right text-text">{fmt(stats.apiCalls)}</td>
+                <td className="py-1.5 pr-4 text-right text-text">{fmt(stats.inputTokens)}</td>
+                <td className="py-1.5 pr-4 text-right text-text">{fmt(stats.outputTokens)}</td>
+                <td className="py-1.5 pr-4 text-right text-text">{fmt(stats.cacheRead)}</td>
+                <td className="py-1.5 pr-4 text-right text-text">{fmt(stats.cacheCreation)}</td>
+                <td className="py-1.5 text-right text-text">{fmtCost(stats.costUsd)}</td>
+              </tr>
+            ))}
+            {/* Totals row */}
+            <tr className="border-t border-border font-medium">
+              <td className="py-1.5 pr-4 text-text">总计</td>
+              <td className="py-1.5 pr-4 text-right text-text">
+                {fmt(modelEntries.reduce((s, [, st]) => s + st.apiCalls, 0))}
+              </td>
+              <td className="py-1.5 pr-4 text-right text-text">{fmt(data.totals.inputTokens)}</td>
+              <td className="py-1.5 pr-4 text-right text-text">{fmt(data.totals.outputTokens)}</td>
+              <td className="py-1.5 pr-4 text-right text-text">{fmt(data.totals.cacheRead)}</td>
+              <td className="py-1.5 pr-4 text-right text-text">{fmt(data.totals.cacheCreation)}</td>
+              <td className="py-1.5 text-right text-text">
+                {fmtCost(modelEntries.reduce((s, [, st]) => s + st.costUsd, 0))}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* Cache economics */}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <div>
+          <div className="text-xs text-text-muted">缓存效率</div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-text">
+              {cacheEconomics.cacheEfficiencyPct}%
+            </span>
+            {cacheEconomics.cacheEfficiencyAssessment && (
+              <AssessmentBadge
+                assessment={cacheEconomics.cacheEfficiencyAssessment}
+                metricKey="cacheEfficiency"
+              />
+            )}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs text-text-muted">R/W Ratio</div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-text">
+              {cacheEconomics.cacheReadToWriteRatio}x
+            </span>
+            {cacheEconomics.cacheRatioAssessment && (
+              <AssessmentBadge
+                assessment={cacheEconomics.cacheRatioAssessment}
+                metricKey="cacheRatio"
+              />
+            )}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs text-text-muted">缓存读取占比</div>
+          <div className="text-sm font-medium text-text">{data.totals.cacheReadPct}%</div>
+        </div>
+        <div>
+          <div className="text-xs text-text-muted">冷启动</div>
+          <div
+            className="text-sm font-medium"
+            style={{
+              color: cacheEconomics.coldStartDetected
+                ? 'var(--assess-warning)'
+                : 'var(--assess-good)',
+            }}
+          >
+            {cacheEconomics.coldStartDetected ? '是' : '否'}
+          </div>
+        </div>
+      </div>
+    </ReportSection>
+  );
+};

package/src/renderer/components/report/sections/ToolSection.tsx

@@ -0,0 +1,77 @@
+import { assessmentColor } from '@renderer/utils/reportAssessments';
+import { Wrench } from 'lucide-react';
+
+import { AssessmentBadge } from '../AssessmentBadge';
+import { ReportSection, sectionId } from '../ReportSection';
+
+import type { ReportToolUsage } from '@renderer/types/sessionReport';
+
+interface ToolSectionProps {
+  data: ReportToolUsage;
+  defaultCollapsed?: boolean;
+}
+
+export const ToolSection = ({ data, defaultCollapsed }: ToolSectionProps) => {
+  const toolEntries = Object.entries(data.successRates).sort(
+    (a, b) => b[1].totalCalls - a[1].totalCalls
+  );
+
+  return (
+    <ReportSection title="工具使用" icon={Wrench} defaultCollapsed={defaultCollapsed}>
+      <div className="mb-2 flex items-center gap-2">
+        <span className="text-xs text-text-muted">
+          共 {data.totalCalls.toLocaleString()} 次调用，覆盖 {toolEntries.length} 个工具
+        </span>
+        <AssessmentBadge assessment={data.overallToolHealth} metricKey="toolHealth" />
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="border-b border-border text-left text-text-muted">
+              <th className="pb-2 pr-4">工具</th>
+              <th className="pb-2 pr-4 text-right">调用</th>
+              <th className="pb-2 pr-4 text-right">错误</th>
+              <th className="pb-2 pr-4 text-right">成功率</th>
+              <th className="pb-2 text-right">健康度</th>
+            </tr>
+          </thead>
+          <tbody>
+            {toolEntries.map(([tool, stats]) => {
+              const color = assessmentColor(stats.assessment);
+              return (
+                <tr key={tool} className="border-border/50 border-b">
+                  <td className="py-1.5 pr-4 text-text">{tool}</td>
+                  <td className="py-1.5 pr-4 text-right text-text">
+                    {stats.totalCalls.toLocaleString()}
+                  </td>
+                  <td className="py-1.5 pr-4 text-right text-text">
+                    {stats.errors > 0 ? (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const el = document.getElementById(sectionId('Errors'));
+                          if (el) el.dispatchEvent(new CustomEvent('report-section-expand'));
+                        }}
+                        className="text-red-400 underline decoration-red-400/30 underline-offset-2 hover:decoration-red-400"
+                      >
+                        {stats.errors.toLocaleString()}
+                      </button>
+                    ) : (
+                      stats.errors.toLocaleString()
+                    )}
+                  </td>
+                  <td className="py-1.5 pr-4 text-right" style={{ color }}>
+                    {stats.successRatePct}%
+                  </td>
+                  <td className="py-1.5 text-right">
+                    <AssessmentBadge assessment={stats.assessment} metricKey="toolHealth" />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </ReportSection>
+  );
+};

package/src/renderer/components/runtime/ProviderModelBadges.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+
+import { cn } from '@renderer/lib/utils';
+import {
+  getTeamModelBadgeLabel,
+  getVisibleTeamProviderModels,
+} from '@renderer/utils/teamModelCatalog';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+import type {
+  CliProviderId,
+  CliProviderModelAvailability,
+  CliProviderModelAvailabilityStatus,
+  CliProviderStatus,
+} from '@shared/types';
+
+function formatModelBadgeLabel(providerId: CliProviderId, model: string): string {
+  return getTeamModelBadgeLabel(providerId, model) ?? model;
+}
+
+function getAvailabilityStatus(
+  model: string,
+  modelAvailability: CliProviderModelAvailability[] | undefined
+): CliProviderModelAvailabilityStatus | null {
+  return modelAvailability?.find((item) => item.modelId === model)?.status ?? null;
+}
+
+function getAvailabilityReason(
+  model: string,
+  modelAvailability: CliProviderModelAvailability[] | undefined
+): string | null {
+  return modelAvailability?.find((item) => item.modelId === model)?.reason ?? null;
+}
+
+function getAvailabilityChip(status: CliProviderModelAvailabilityStatus | null): string | null {
+  switch (status) {
+    case 'checking':
+      return 'Checking';
+    case 'unavailable':
+      return 'Unavailable';
+    case 'unknown':
+      return 'Check failed';
+    case 'available':
+    default:
+      return null;
+  }
+}
+
+export const ProviderModelBadges = ({
+  providerId,
+  models,
+  modelAvailability,
+  providerStatus,
+  collapseAfter,
+  expandedMaxHeightPx = 200,
+}: {
+  readonly providerId: CliProviderId;
+  readonly models: string[];
+  readonly modelAvailability?: CliProviderModelAvailability[];
+  readonly providerStatus?: Pick<CliProviderStatus, 'providerId' | 'authMethod' | 'backend'> | null;
+  readonly collapseAfter?: number;
+  readonly expandedMaxHeightPx?: number;
+}): React.JSX.Element => {
+  const [expanded, setExpanded] = useState(false);
+  const visibleModels = getVisibleTeamProviderModels(providerId, models, providerStatus);
+  const displayModelAvailability = providerId === 'opencode' ? undefined : modelAvailability;
+  const shouldCollapse =
+    typeof collapseAfter === 'number' && collapseAfter > 0 && visibleModels.length > collapseAfter;
+  const displayedModels =
+    shouldCollapse && !expanded ? visibleModels.slice(0, collapseAfter) : visibleModels;
+  const hiddenCount = shouldCollapse ? visibleModels.length - collapseAfter : 0;
+
+  const badgeClassName =
+    'inline-flex items-center gap-1 rounded-md border px-1.5 py-px font-mono text-[10px] leading-4';
+  const badgeStyle = {
+    borderColor: 'var(--color-border-subtle)',
+    backgroundColor: 'rgba(255, 255, 255, 0.03)',
+    color: 'var(--color-text-secondary)',
+  };
+  const buttonClassName =
+    'inline-flex items-center gap-1 rounded-full border border-[rgba(59,130,246,0.35)] bg-[rgba(59,130,246,0.12)] px-2 py-px text-[10px] font-medium leading-4 text-[rgb(147,197,253)] transition-colors hover:border-[rgba(59,130,246,0.55)] hover:bg-[rgba(59,130,246,0.18)] hover:text-[rgb(191,219,254)]';
+  const listClassName = cn('flex flex-wrap gap-1.5', expanded && shouldCollapse ? 'pr-1' : null);
+  const listStyle =
+    expanded && shouldCollapse
+      ? ({ maxHeight: expandedMaxHeightPx, overflowY: 'auto' } as const)
+      : undefined;
+
+  const renderModelBadge = (model: string, index: number): React.JSX.Element => {
+    const availabilityStatus = getAvailabilityStatus(model, displayModelAvailability);
+    const availabilityReason = getAvailabilityReason(model, displayModelAvailability);
+    const availabilityChip = getAvailabilityChip(availabilityStatus);
+
+    return (
+      <span
+        key={`${model}-${index}`}
+        className={badgeClassName}
+        style={badgeStyle}
+        title={availabilityReason ?? availabilityChip ?? undefined}
+      >
+        <span>{formatModelBadgeLabel(providerId, model)}</span>
+        {availabilityChip ? (
+          <span
+            className={cn(
+              'rounded px-1 py-0 text-[9px] font-medium uppercase tracking-[0.06em]',
+              availabilityStatus === 'checking'
+                ? 'bg-[rgba(59,130,246,0.12)] text-[var(--color-text-secondary)]'
+                : availabilityStatus === 'unavailable'
+                  ? 'bg-[rgba(239,68,68,0.12)] text-[rgb(248,113,113)]'
+                  : 'bg-[rgba(245,158,11,0.12)] text-[rgb(251,191,36)]'
+            )}
+          >
+            {availabilityChip}
+          </span>
+        ) : null}
+      </span>
+    );
+  };
+
+  if (!shouldCollapse) {
+    return <div className="flex flex-wrap gap-1.5">{displayedModels.map(renderModelBadge)}</div>;
+  }
+
+  return (
+    <div className="flex flex-col items-start gap-1.5">
+      <div className={listClassName} style={listStyle}>
+        {displayedModels.map(renderModelBadge)}
+        {shouldCollapse && !expanded ? (
+          <button type="button" className={buttonClassName} onClick={() => setExpanded(true)}>
+            <ChevronDown className="size-3" />
+            <span>+{hiddenCount} more</span>
+          </button>
+        ) : null}
+      </div>
+      {shouldCollapse && expanded ? (
+        <button type="button" className={buttonClassName} onClick={() => setExpanded(false)}>
+          <ChevronUp className="size-3" />
+          <span>Hide</span>
+        </button>
+      ) : null}
+    </div>
+  );
+};

package/src/renderer/components/runtime/ProviderRuntimeBackendSelector.tsx

@@ -0,0 +1,327 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@renderer/components/ui/select';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@renderer/components/ui/tooltip';
+import { formatProviderBackendLabel } from '@renderer/utils/providerBackendIdentity';
+
+import type { CliProviderStatus } from '@shared/types';
+
+interface Props {
+  provider: CliProviderStatus;
+  disabled?: boolean;
+  onSelect: (providerId: CliProviderStatus['providerId'], backendId: string) => void;
+}
+
+export function getProviderRuntimeBackendStateLabel(
+  option: NonNullable<CliProviderStatus['availableBackends']>[number]
+): string | null {
+  switch (option.state) {
+    case 'ready':
+      return null;
+    case 'locked':
+      return '已锁定';
+    case 'disabled':
+      return '已禁用';
+    case 'authentication-required':
+      return '需要认证';
+    case 'runtime-missing':
+      return '缺少运行时';
+    case 'degraded':
+      return '降级';
+    default:
+      if (!option.available) {
+        return '不可用';
+      }
+      if (option.selectable === false) {
+        return '已锁定';
+      }
+      return null;
+  }
+}
+
+export function getProviderRuntimeBackendAudienceLabel(
+  option: NonNullable<CliProviderStatus['availableBackends']>[number]
+): string | null {
+  return option.audience === 'internal' ? '内部' : null;
+}
+
+export function getVisibleProviderRuntimeBackendOptions(
+  provider: CliProviderStatus
+): NonNullable<CliProviderStatus['availableBackends']> {
+  return provider.availableBackends ?? [];
+}
+
+export function getOptionDisplayLabel(
+  provider: CliProviderStatus,
+  option: NonNullable<CliProviderStatus['availableBackends']>[number],
+  resolvedOption: NonNullable<CliProviderStatus['availableBackends']>[number] | null
+): string {
+  if (provider.providerId === 'codex') {
+    const legacyLabel = formatProviderBackendLabel(provider.providerId, option.id);
+    if (legacyLabel) {
+      return legacyLabel;
+    }
+  }
+
+  if (option.id !== 'auto') {
+    return option.label;
+  }
+
+  if (resolvedOption?.label) {
+    return `自动（当前：${resolvedOption.label}）`;
+  }
+
+  return '自动';
+}
+
+export function getProviderRuntimeBackendSummary(provider: CliProviderStatus): string | null {
+  const options = provider.availableBackends ?? [];
+  if (options.length === 0) {
+    return null;
+  }
+
+  const selectedBackendId = provider.selectedBackendId ?? options[0]?.id ?? '';
+  const selectedOption = options.find((option) => option.id === selectedBackendId) ?? options[0];
+  const resolvedOption = options.find((option) => option.id === provider.resolvedBackendId) ?? null;
+  const parts = [getOptionDisplayLabel(provider, selectedOption, resolvedOption)];
+  const audienceLabel = getProviderRuntimeBackendAudienceLabel(selectedOption);
+  const stateLabel = getProviderRuntimeBackendStateLabel(selectedOption);
+
+  if (audienceLabel) {
+    parts.push(audienceLabel.toLowerCase());
+  }
+  if (stateLabel) {
+    parts.push(stateLabel.toLowerCase());
+  }
+
+  return parts.join(' - ');
+}
+
+export const ProviderRuntimeBackendSelector = ({
+  provider,
+  disabled = false,
+  onSelect,
+}: Props): React.JSX.Element | null => {
+  const options = getVisibleProviderRuntimeBackendOptions(provider);
+  if (options.length === 0) {
+    return null;
+  }
+
+  if (provider.providerId === 'codex' && options.length === 1) {
+    return null;
+  }
+
+  const selectedBackendId = provider.selectedBackendId ?? options[0]?.id ?? '';
+  const selectedOption = options.find((option) => option.id === selectedBackendId) ?? options[0];
+  const resolvedOption = options.find((option) => option.id === provider.resolvedBackendId) ?? null;
+  const selectedLabel = getOptionDisplayLabel(provider, selectedOption, resolvedOption);
+  const selectedStateLabel = getProviderRuntimeBackendStateLabel(selectedOption);
+  const selectedAudienceLabel = getProviderRuntimeBackendAudienceLabel(selectedOption);
+
+  return (
+    <div className="mt-2 space-y-2.5">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[11px] font-medium" style={{ color: 'var(--color-text-muted)' }}>
+          运行时后端
+        </span>
+        {provider.resolvedBackendId &&
+          provider.resolvedBackendId !== provider.selectedBackendId && (
+            <span
+              className="rounded-full px-2 py-0.5 text-[10px]"
+              style={{
+                color: 'var(--color-text-secondary)',
+                backgroundColor: 'rgba(255, 255, 255, 0.04)',
+              }}
+            >
+              已解析：{resolvedOption?.label ?? provider.resolvedBackendId}
+            </span>
+          )}
+      </div>
+      <Select
+        value={selectedBackendId}
+        disabled={disabled}
+        onValueChange={(backendId) => onSelect(provider.providerId, backendId)}
+      >
+        <SelectTrigger className="h-10 text-sm">
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="shrink-0 text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
+              当前
+            </span>
+            <span className="truncate">{selectedLabel}</span>
+          </div>
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem
+              key={option.id}
+              value={option.id}
+              disabled={
+                (!option.available || option.selectable === false) &&
+                option.id !== selectedBackendId
+              }
+              className="py-2.5"
+            >
+              <div className="flex min-w-0 flex-col gap-1">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="truncate">
+                    {getOptionDisplayLabel(provider, option, resolvedOption)}
+                  </span>
+                  {option.recommended ? (
+                    <span
+                      className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px]"
+                      style={{
+                        color: '#86efac',
+                        backgroundColor: 'rgba(74, 222, 128, 0.14)',
+                      }}
+                    >
+                      推荐
+                    </span>
+                  ) : null}
+                  {getProviderRuntimeBackendAudienceLabel(option) ? (
+                    <span
+                      className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px]"
+                      style={{
+                        color: '#93c5fd',
+                        backgroundColor: 'rgba(59, 130, 246, 0.14)',
+                      }}
+                    >
+                      {getProviderRuntimeBackendAudienceLabel(option)}
+                    </span>
+                  ) : null}
+                  {getProviderRuntimeBackendStateLabel(option) ? (
+                    <span
+                      className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px]"
+                      style={{
+                        color:
+                          option.state === 'disabled' ||
+                          option.state === 'authentication-required' ||
+                          option.state === 'runtime-missing' ||
+                          option.state === 'degraded' ||
+                          (!option.available && option.state !== 'locked')
+                            ? '#fca5a5'
+                            : 'var(--color-text-secondary)',
+                        backgroundColor:
+                          option.state === 'disabled' ||
+                          option.state === 'authentication-required' ||
+                          option.state === 'runtime-missing' ||
+                          option.state === 'degraded' ||
+                          (!option.available && option.state !== 'locked')
+                            ? 'rgba(248, 113, 113, 0.14)'
+                            : 'rgba(255, 255, 255, 0.08)',
+                      }}
+                    >
+                      {getProviderRuntimeBackendStateLabel(option)}
+                    </span>
+                  ) : null}
+                </div>
+                <span className="text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
+                  {option.description}
+                </span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {selectedOption && (
+        <div
+          className="rounded-lg border p-3"
+          style={{
+            borderColor: 'var(--color-border-subtle)',
+            backgroundColor: 'rgba(255, 255, 255, 0.025)',
+          }}
+        >
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+              {selectedLabel}
+            </span>
+            {selectedOption.recommended ? (
+              <span
+                className="rounded-full px-1.5 py-0.5 text-[10px]"
+                style={{
+                  color: '#86efac',
+                  backgroundColor: 'rgba(74, 222, 128, 0.14)',
+                }}
+              >
+                推荐
+              </span>
+            ) : null}
+            {selectedAudienceLabel ? (
+              <span
+                className="rounded-full px-1.5 py-0.5 text-[10px]"
+                style={{
+                  color: '#93c5fd',
+                  backgroundColor: 'rgba(59, 130, 246, 0.14)',
+                }}
+              >
+                {selectedAudienceLabel}
+              </span>
+            ) : null}
+            {!selectedStateLabel && !selectedOption.available ? (
+              <TooltipProvider delayDuration={150}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span
+                      className="cursor-help rounded-full px-1.5 py-0.5 text-[10px]"
+                      style={{
+                        color: '#fca5a5',
+                        backgroundColor: 'rgba(248, 113, 113, 0.14)',
+                      }}
+                    >
+                      不可用
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {selectedOption.detailMessage ?? selectedOption.statusMessage ?? '不可用'}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ) : selectedStateLabel ? (
+              <TooltipProvider delayDuration={150}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span
+                      className="cursor-help rounded-full px-1.5 py-0.5 text-[10px]"
+                      style={{
+                        color:
+                          selectedOption.state === 'locked'
+                            ? 'var(--color-text-secondary)'
+                            : '#fca5a5',
+                        backgroundColor:
+                          selectedOption.state === 'locked'
+                            ? 'rgba(255, 255, 255, 0.08)'
+                            : 'rgba(248, 113, 113, 0.14)',
+                      }}
+                    >
+                      {selectedStateLabel}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {selectedOption.detailMessage ??
+                      selectedOption.statusMessage ??
+                      '此后端暂时无法选择。'}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ) : null}
+          </div>
+          <div className="mt-2 space-y-1 text-[11px]" style={{ color: 'var(--color-text-muted)' }}>
+            <div>{selectedOption.description}</div>
+            {selectedOption.statusMessage ? <div>{selectedOption.statusMessage}</div> : null}
+            {selectedOption.detailMessage && selectedOption.available ? (
+              <div className="break-words opacity-80">{selectedOption.detailMessage}</div>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};