Update BossAI workflow and workspace experience

src/web/components/charts/SiteDistributionChart.tsx

@@ -4,10 +4,13 @@ import { useThemeLabelColor } from '../useThemeLabelColor.js';
 
 interface SiteDistributionData {
   siteName: string;
-  platform: string;
-  totalBalance: number;
-  totalSpend: number;
-  accountCount: number;
+  platform?: string | null;
+  totalBalance?: number;
+  totalSpend?: number;
+  accountCount?: number;
+  spend?: number;
+  calls?: number;
+  tokens?: number;
 }
 
 interface SiteDistributionChartProps {
@@ -26,6 +29,13 @@ function safeNumber(value: unknown): number {
   return value;
 }
 
+function formatPercentLabel(datum: unknown): string {
+  const item = coerceDatumRecord(datum);
+  const percent = safeNumber(item._percent_);
+  if (percent <= 0) return '';
+  return `${percent.toFixed(percent >= 10 ? 0 : 1)}%`;
+}
+
 function SkeletonCircle() {
   return (
     <div
@@ -98,8 +108,11 @@ export default function SiteDistributionChart({ data, loading }: SiteDistributio
     return data.map((item) => ({
       siteName: item.siteName,
       platform: item.platform,
-      value: safeNumber(viewMode === 'balance' ? item.totalBalance : item.totalSpend),
+      value: safeNumber(viewMode === 'balance'
+        ? item.totalBalance
+        : item.totalSpend ?? item.spend),
       accountCount: safeNumber(item.accountCount),
+      calls: safeNumber(item.calls),
     }));
   }, [data, viewMode]);
 
@@ -118,7 +131,12 @@ export default function SiteDistributionChart({ data, loading }: SiteDistributio
       outerRadius: 0.8,
       innerRadius: 0.55,
       pie: { style: { cornerRadius: 4, padAngle: 0.02 } },
-      label: { visible: true, position: 'outside', formatter: '{_percent_}%', style: { fill: labelColor } },
+      label: {
+        visible: true,
+        position: 'outside',
+        formatMethod: (_text: unknown, datum: unknown) => formatPercentLabel(datum),
+        style: { fill: labelColor, fontSize: 12, stroke: 'transparent' },
+      },
       legends: { visible: false },
       tooltip: {
         mark: {
@@ -149,6 +167,13 @@ export default function SiteDistributionChart({ data, loading }: SiteDistributio
                 return String(item.accountCount || 0);
               },
             },
+            {
+              key: '调用',
+              value: (datum: unknown) => {
+                const item = coerceDatumRecord(datum);
+                return String(item.calls || 0);
+              },
+            },
           ] as any,
         },
       },
@@ -159,6 +184,7 @@ export default function SiteDistributionChart({ data, loading }: SiteDistributio
   }, [chartData, hasData, labelColor]);
 
   const formatValue = (value: number): string => {
+    if (viewMode === 'balance' && value === 0) return '$0.00';
     if (value >= 1000) return `$${value.toFixed(2)}`;
     if (value >= 1) return `$${value.toFixed(3)}`;
     return `$${value.toFixed(6)}`;