@baimingtao/lbs-agent 1.0.0

package/interfaces/web/frontend/src/pages/WorkersPage.tsx

@@ -0,0 +1,198 @@
+import { useMemo } from 'react';
+import { Bar, Doughnut } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+} from 'chart.js';
+import { PagePanel, Card, TableWrap, Th, Td, Badge } from '../components/PagePanel';
+import type { Worker } from '../types';
+
+ChartJS.register(ArcElement, CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+interface Props {
+  workers: Worker[];
+  usage: { input: number; output: number; cache: number; cost: string };
+}
+
+const fmt = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(Math.round(n));
+const palette = { sakura: '#FFB7C5', mint: '#98D8C8', violet: '#6E5AA8', honey: '#FFB86B', berry: '#2B1828' };
+
+export function WorkersPage({ workers, usage }: Props) {
+  const inputTokens = Number(usage.input || 0) * 1000;
+  const outputTokens = Number(usage.output || 0) * 1000;
+  const cacheTokens = Number(usage.cache || 0) * 1000;
+
+  // Stats by status
+  const statusStats = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const w of workers) {
+      const key = w.statusLabel || w.status;
+      counts[key] = (counts[key] || 0) + 1;
+    }
+    return Object.entries(counts);
+  }, [workers]);
+
+  // Stats by agent
+  const agentStats = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const w of workers) counts[w.name] = (counts[w.name] || 0) + 1;
+    return Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 10);
+  }, [workers]);
+
+  const statusDoughnut = useMemo(() => ({
+    labels: statusStats.map(([label]) => label),
+    datasets: [{
+      data: statusStats.map(([, count]) => count),
+      backgroundColor: statusStats.map(([label]) =>
+        label.includes('完成') || label.includes('活跃') ? palette.mint + 'dd' :
+        label.includes('失败') || label.includes('错误') ? palette.sakura + 'dd' :
+        palette.honey + 'dd'
+      ),
+      borderColor: '#fff',
+      borderWidth: 3,
+      hoverOffset: 6,
+    }],
+  }), [statusStats]);
+
+  const statusDoughnutOpts: ChartOptions<'doughnut'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { position: 'bottom', labels: { font: { size: 11, weight: 600 }, color: palette.berry, padding: 10, usePointStyle: true, pointStyle: 'circle' } },
+    },
+    cutout: '58%',
+  };
+
+  const agentBar = useMemo(() => ({
+    labels: agentStats.map(([name]) => name),
+    datasets: [{
+      label: '执行次数',
+      data: agentStats.map(([, count]) => count),
+      backgroundColor: agentStats.map((_, i) => [palette.sakura, palette.mint, palette.violet, palette.honey][i % 4] + 'cc'),
+      borderColor: agentStats.map((_, i) => [palette.sakura, palette.mint, palette.violet, palette.honey][i % 4]),
+      borderWidth: 2,
+      borderRadius: 8,
+    }],
+  }), [agentStats]);
+
+  const agentBarOpts: ChartOptions<'bar'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { display: false } },
+    scales: {
+      x: { ticks: { font: { size: 10, weight: 600 }, color: palette.berry }, grid: { display: false } },
+      y: { beginAtZero: true, ticks: { font: { size: 10 }, color: palette.berry + '88', stepSize: 1 }, grid: { color: 'rgba(43,24,40,0.04)' } },
+    },
+  };
+
+  const tokenBar = useMemo(() => ({
+    labels: ['输入', '输出', '缓存'],
+    datasets: [{
+      label: 'Token',
+      data: [inputTokens, outputTokens, cacheTokens],
+      backgroundColor: [palette.sakura + 'cc', palette.mint + 'cc', palette.violet + 'cc'],
+      borderColor: [palette.sakura, palette.mint, palette.violet],
+      borderWidth: 2,
+      borderRadius: 10,
+      barThickness: 44,
+    }],
+  }), [inputTokens, outputTokens, cacheTokens]);
+
+  const tokenBarOpts: ChartOptions<'bar'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ` ${fmt(Number(ctx.raw))} tokens` } } },
+    scales: {
+      x: { ticks: { font: { size: 11, weight: 600 }, color: palette.berry }, grid: { display: false } },
+      y: { ticks: { font: { size: 10 }, color: palette.berry + '88', callback: v => fmt(Number(v)) }, grid: { color: 'rgba(43,24,40,0.04)' } },
+    },
+  };
+
+  return (
+    <PagePanel title="执行记录" subtitle="Worker 执行历史、状态分布、Agent 活跃度与 Token 用量">
+      <div className="space-y-4">
+        {/* Token summary */}
+        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+          <Card>
+            <div className="text-center">
+              <span className="text-[11px] font-semibold text-slate-400">输入 Token</span>
+              <b className="mt-2 block text-2xl" style={{ color: palette.sakura }}>{fmt(inputTokens)}</b>
+            </div>
+          </Card>
+          <Card>
+            <div className="text-center">
+              <span className="text-[11px] font-semibold text-slate-400">输出 Token</span>
+              <b className="mt-2 block text-2xl" style={{ color: palette.mint }}>{fmt(outputTokens)}</b>
+            </div>
+          </Card>
+          <Card>
+            <div className="text-center">
+              <span className="text-[11px] font-semibold text-slate-400">缓存命中</span>
+              <b className="mt-2 block text-2xl" style={{ color: palette.violet }}>{fmt(cacheTokens)}</b>
+            </div>
+          </Card>
+          <Card>
+            <div className="text-center">
+              <span className="text-[11px] font-semibold text-slate-400">估算费用</span>
+              <b className="mt-2 block text-2xl text-violet">{usage.cost}</b>
+            </div>
+          </Card>
+        </div>
+
+        {/* Charts */}
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Card title="执行状态分布" badge="Doughnut">
+            <div style={{ height: '260px' }}>
+              {statusStats.length ? <Doughnut data={statusDoughnut} options={statusDoughnutOpts} /> : <div className="flex h-full items-center justify-center text-sm text-slate-400">暂无数据</div>}
+            </div>
+          </Card>
+          <Card title="Agent 活跃度 TOP 10" badge="Bar">
+            <div style={{ height: '260px' }}>
+              {agentStats.length ? <Bar data={agentBar} options={agentBarOpts} /> : <div className="flex h-full items-center justify-center text-sm text-slate-400">暂无数据</div>}
+            </div>
+          </Card>
+        </div>
+
+        <Card title="Token 对比" badge="Bar">
+          <div style={{ height: '220px' }}>
+            <Bar data={tokenBar} options={tokenBarOpts} />
+          </div>
+        </Card>
+
+        {/* Execution table */}
+        <Card title="最近执行记录" badge={`${workers.length} 条`}>
+          {!workers.length ? <p className="py-8 text-center text-sm text-slate-400">暂无执行记录</p> : (
+            <TableWrap>
+              <thead>
+                <tr>
+                  <Th>Agent</Th>
+                  <Th>状态</Th>
+                  <Th>详情</Th>
+                </tr>
+              </thead>
+              <tbody>
+                {workers.map((w, i) => (
+                  <tr key={`${w.name}-${i}`}>
+                    <Td mono>{w.name}</Td>
+                    <Td>
+                      <Badge color={w.status === 'active' ? 'green' : w.status === 'error' ? 'red' : 'slate'}>
+                        {w.statusLabel}
+                      </Badge>
+                    </Td>
+                    <Td mono>{w.detail || '—'}</Td>
+                  </tr>
+                ))}
+              </tbody>
+            </TableWrap>
+          )}
+        </Card>
+      </div>
+    </PagePanel>
+  );
+}

package/interfaces/web/frontend/src/types/index.ts

@@ -0,0 +1,138 @@
+// 前后端共享的界面类型
+
+export type AgentStatus = 'idle' | 'running' | 'success' | 'error' | 'waiting';
+
+export interface Command {
+  icon: string;
+  name: string;
+  label: string;
+  description: string;
+  requiresTask?: boolean;
+}
+
+export type CommandConfig = Command;
+export interface TimelineItem {
+  attachments?: Array<{ name: string; url: string; size?: number; isImage?: boolean; path?: string }>;
+  attachments_used?: Array<{ name: string; path?: string; size?: number; preview?: string; is_image?: boolean }>;
+  thinking?: string;
+  thinkingSteps?: ThinkingStep[];
+  streaming?: boolean;
+  duration?: number;
+  id: string;
+  type: 'command' | 'step' | 'result' | 'error';
+  title: string;
+  content: string;
+  time: string;
+}
+
+export interface CommandGroupItem {
+  key: string;
+  title: string;
+  commands: Command[];
+}
+
+export interface AgentOption {
+  name: string;
+  displayName: string;
+  model: string;
+  provider: string;
+  tools: string[];
+  fallbackModels?: string[];
+  guardrails?: string[];
+  verification?: string;
+  verificationRules?: string[];
+  verificationLevel?: string;
+  errorStrategy?: string;
+  timeout?: number;
+  maxIterations?: number;
+  maxRetries?: number;
+  promptFile?: string;
+}
+
+export interface ChatMessage {
+  id: string;
+  type: 'user' | 'agent';
+  text: string;
+  timestamp: number;
+  cmd?: string;
+  toolTimeline?: ToolTimelineNode[];
+  terminalOutput?: string;
+  duration?: number;
+  success?: boolean;
+  streaming?: boolean;
+  thinking?: string;
+  thinkingSteps?: ThinkingStep[];
+  attachments_used?: Array<{ name: string; path?: string; size?: number; preview?: string; is_image?: boolean }>;
+}
+
+export interface ToolTimelineNode {
+  phase: 'thinking' | 'tool_call' | 'streaming';
+  label: string;
+  desc: string;
+  tag?: string;
+}
+
+export interface ThinkingStep {
+  type: 'thinking' | 'tool_call' | 'result' | 'iteration' | 'error' | 'verify';
+  label: string;
+  desc: string;
+  tag?: string;
+  time?: string;
+}
+
+export interface ModelHealth {
+  name: string;
+  provider: string;
+  health: 'excellent' | 'good' | 'warn';
+  statusLabel: string;
+  isDefault: boolean;
+}
+
+export interface Worker {
+  name: string;
+  status: 'active' | 'idle' | 'error';
+  statusLabel: string;
+  detail?: string;
+}
+
+export interface Session {
+  name: string;
+  status: string;
+  statusLabel: string;
+  id: string;
+  metrics: string;
+  title?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface CronItem {
+  jobId: string;
+  schedule: string;
+  name: string;
+  nextRun: string;
+  enabled: boolean;
+  task?: string;
+  agentName?: string;
+}
+
+export interface SoulProfile {
+  name: string;
+  tags: string[];
+  desc: string;
+}
+
+export interface Usage {
+  input: number;
+  output: number;
+  cache: number;
+  cost: string;
+}
+
+export interface CatState {
+  status: AgentStatus;
+  iteration?: string;
+  worker?: string;
+  latency?: string;
+  tokens?: string;
+}

package/interfaces/web/frontend/tailwind.config.js

@@ -0,0 +1,52 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        sakura: {
+          DEFAULT: '#FFB7C5',
+          light: '#FFD4DE',
+          dark: '#E89AA8',
+        },
+        mint: {
+          DEFAULT: '#98D8C8',
+          light: '#B8E8DC',
+          dark: '#6FC4B0',
+        },
+        cream: '#FFF7FA',
+        berry: {
+          DEFAULT: '#2B1828',
+          light: '#4A2F45',
+        },
+        violet: {
+          DEFAULT: '#6E5AA8',
+          light: '#9080C8',
+        },
+        honey: '#FFB86B',
+        green: '#45D6A3',
+      },
+      fontFamily: {
+        display: ['ZCOOL KuaiLe', 'Microsoft YaHei', 'sans-serif'],
+        body: ['Inter', 'MiSans', 'Microsoft YaHei', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'],
+      },
+      borderRadius: {
+        'card': '24px',
+        'btn': '14px',
+        'input': '16px',
+      },
+      boxShadow: {
+        'soft': '0 4px 20px rgba(255,183,197,0.15)',
+        'mint': '0 4px 20px rgba(152,216,200,0.2)',
+        'glow-sakura': '0 0 16px rgba(255,183,197,0.4)',
+        'glow-mint': '0 0 16px rgba(152,216,200,0.4)',
+      },
+    },
+  },
+  plugins: [],
+}

package/interfaces/web/frontend/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/interfaces/web/frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/interfaces/web/frontend/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/interfaces/web/frontend/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://127.0.0.1:8199',
+      '/ws': {
+        target: 'ws://127.0.0.1:8199',
+        ws: true,
+      },
+    },
+  },
+})