plugin-agent-orchestrator 1.0.22 → 1.0.25

package/src/client/TracingTab.tsx

@@ -18,7 +18,8 @@ import {
   Form,
 } from 'antd';
 import { EyeOutlined, CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined } from '@ant-design/icons';
-import { useAPIClient, useRequest } from '@nocobase/client';
+import { useRequest } from 'ahooks';
+import { useApp } from '@nocobase/client-v2';
 import { useAIEmployees } from './AIEmployeesContext';
 
 const { Text, Paragraph } = Typography;
@@ -32,7 +33,7 @@ type FilterState = {
 };
 
 export const TracingTab: React.FC = () => {
-  const api = useAPIClient();
+  const api = useApp().apiClient;
   const [selectedLog, setSelectedLog] = useState<any>(null);
   const [detailLoading, setDetailLoading] = useState(false);
 
@@ -61,10 +62,11 @@ export const TracingTab: React.FC = () => {
   }, [page, pageSize, filters]);
 
   const { data, loading, refresh } = useRequest(
-    {
-      url: 'orchestratorTracing:list',
-      params: requestParams,
-    },
+    () =>
+      api.request({
+        url: 'orchestratorTracing:list',
+        params: requestParams,
+      }),
     {
       refreshDeps: [requestParams],
     },
@@ -269,6 +271,7 @@ export const TracingTab: React.FC = () => {
           dataSource={logs}
           columns={columns}
           size="middle"
+          scroll={{ x: 'max-content' }}
           pagination={{
             current: page,
             pageSize,

package/src/client/plugin.tsx

@@ -1,27 +1,34 @@
-import { Plugin } from '@nocobase/client';
-import { OrchestratorSettings } from './OrchestratorSettings';
-import { InteractionSchemasProvider } from './skill-hub/tools/InteractionSchemasProvider';
-import { registerSkillLoopCards } from './skill-hub/tools/registerSkillLoopCards';
-import { registerOrchestratorCards } from './tools/registerOrchestratorCards';
-
-export class PluginAgentOrchestratorClient extends Plugin {
-  async load() {
-    (this as any).app.use(InteractionSchemasProvider);
-
-    // Register under the "AI" settings group for consistency with other AI plugins
-    (this as any).app.pluginSettingsManager.add('ai.orchestrator', {
-      title: 'Agent Orchestrator',
-      icon: 'ApartmentOutlined',
-      Component: OrchestratorSettings,
-    });
-
-    await this.registerSkillUiCards();
-  }
-
-  private async registerSkillUiCards() {
-    await registerOrchestratorCards((this as any).app);
-    await registerSkillLoopCards((this as any).app);
-  }
-}
-
-export default PluginAgentOrchestratorClient;
+import { Plugin } from '@nocobase/client';
+import { OrchestratorSettings } from './OrchestratorSettings';
+import { InteractionSchemasProvider } from './skill-hub/tools/InteractionSchemasProvider';
+import { registerSkillLoopCards } from './skill-hub/tools/registerSkillLoopCards';
+import { registerOrchestratorCards } from './tools/registerOrchestratorCards';
+
+export class PluginAgentOrchestratorClient extends Plugin {
+  async load() {
+    (this as any).app.use(InteractionSchemasProvider);
+
+    // Register under the "AI" settings group for consistency with other AI plugins
+    (this as any).app.pluginSettingsManager.add('ai.orchestrator', {
+      title: 'Agent Orchestrator',
+      icon: 'ApartmentOutlined',
+      Component: OrchestratorSettings,
+    });
+
+    (this as any).app.eventBus?.addEventListener?.('auth:tokenChanged', (event: Event) => {
+      const token = (event as CustomEvent<{ token?: string | null }>).detail?.token;
+      if (token) {
+        registerSkillLoopCards((this as any).app);
+      }
+    });
+
+    await this.registerSkillUiCards();
+  }
+
+  private async registerSkillUiCards() {
+    await registerOrchestratorCards((this as any).app);
+    await registerSkillLoopCards((this as any).app);
+  }
+}
+
+export default PluginAgentOrchestratorClient;

package/src/client/skill-hub/components/ExecutionHistory.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Card, Table, Tag, Button, Typography, Space, Tooltip, Popconfirm, message } from 'antd';
 import { ReloadOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons';
-import { useAPIClient, Upload } from '@nocobase/client';
-import { useT } from '../locale';
-import { parseJsonText } from '../utils/jsonFields';
+import { Upload } from '@nocobase/client';
+import { useApp } from '@nocobase/client-v2';
+import { useT } from '../locale';
+import { parseJsonText } from '../utils/jsonFields';
 
 const STATUS_COLORS: Record<string, string> = {
   pending: 'default',
@@ -15,7 +16,7 @@ const STATUS_COLORS: Record<string, string> = {
 };
 
 export const ExecutionHistory: React.FC = () => {
-  const api = useAPIClient();
+  const api = useApp().apiClient;
   const t = useT();
   const [executions, setExecutions] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
@@ -96,12 +97,12 @@ export const ExecutionHistory: React.FC = () => {
     },
     {
       title: t('Files'),
-      dataIndex: 'outputFiles',
+      dataIndex: 'outputFiles',
       key: 'files',
       width: 250,
-      render: (files: any[], record: any) => {
-        files = parseJsonText(files, []);
-        if (!Array.isArray(files) || !files.length) return '-';
+      render: (files: any[], record: any) => {
+        files = parseJsonText(files, []);
+        if (!Array.isArray(files) || !files.length) return '-';
         const formattedFiles = files.map((f, i) => ({
           id: `${record.id}-${f.name}-${i}`,
           title: f.name,

package/src/client/skill-hub/components/GitSkillImport.tsx

@@ -25,7 +25,7 @@ import {
   DatabaseOutlined,
   SearchOutlined,
 } from '@ant-design/icons';
-import { useAPIClient } from '@nocobase/client';
+import { useApp } from '@nocobase/client-v2';
 import { useT } from '../locale';
 
 const { Text } = Typography;
@@ -39,7 +39,7 @@ interface GitSkillImportProps {
 export const GitSkillImport: React.FC<GitSkillImportProps> = ({ open, onClose }) => {
   const t = useT();
   const { token } = useToken();
-  const api = useAPIClient();
+  const api = useApp().apiClient;
 
   const [step, setStep] = useState(0);
 
@@ -178,8 +178,7 @@ export const GitSkillImport: React.FC<GitSkillImportProps> = ({ open, onClose })
     const lower = searchText.toLowerCase();
     return skills.filter(
       (s) =>
-        (s.title || s.name || '').toLowerCase().includes(lower) ||
-        (s.description || '').toLowerCase().includes(lower),
+        (s.title || s.name || '').toLowerCase().includes(lower) || (s.description || '').toLowerCase().includes(lower),
     );
   }, [skills, searchText]);
 
@@ -531,6 +530,7 @@ export const GitSkillImport: React.FC<GitSkillImportProps> = ({ open, onClose })
                   selectedRowKeys: selectedSkills,
                   onChange: (keys) => setSelectedSkills(keys as string[]),
                 }}
+                scroll={{ x: 'max-content' }}
               />
             </div>
           )}
@@ -547,7 +547,14 @@ export const GitSkillImport: React.FC<GitSkillImportProps> = ({ open, onClose })
               syncResults.filter((r) => r.status === 'updated').length
             } ${t('updated')}, ${syncResults.filter((r) => r.status === 'skipped').length} ${t('skipped')}`}
           />
-          <Table dataSource={syncResults} columns={resultColumns} rowKey="folder" size="small" pagination={false} />
+          <Table
+            dataSource={syncResults}
+            columns={resultColumns}
+            rowKey="folder"
+            size="small"
+            pagination={false}
+            scroll={{ x: 'max-content' }}
+          />
         </div>
       )}
     </Modal>

package/src/client/skill-hub/components/LoopSettings.tsx

@@ -16,7 +16,7 @@ import {
   Typography,
 } from 'antd';
 import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
-import { useAPIClient, useApp } from '@nocobase/client';
+import { useApp } from '@nocobase/client-v2';
 import { useT } from '../locale';
 import { formatJsonText, parseJsonText, stringifyJsonText } from '../utils/jsonFields';
 import { getLoopTemplate, LOOP_TEMPLATES } from '../tools/loopTemplates';
@@ -30,8 +30,8 @@ const extractList = (data: any) => {
 };
 
 export const LoopSettings: React.FC = () => {
-  const api = useAPIClient();
   const app = useApp();
+  const api = app.apiClient;
   const t = useT();
   const [form] = Form.useForm();
   const [skills, setSkills] = useState<any[]>([]);

package/src/client/skill-hub/components/SkillEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, Form, Input, Select, InputNumber, Switch, message, Upload, Radio, Button, Space, theme } from 'antd';
 import { InboxOutlined, CloseOutlined, SaveOutlined } from '@ant-design/icons';
-import { useAPIClient } from '@nocobase/client';
+import { useApp } from '@nocobase/client-v2';
 import { useT } from '../locale';
 import { formatJsonText, stringifyJsonText, parseJsonText } from '../utils/jsonFields';
 
@@ -14,7 +14,7 @@ interface SkillEditorProps {
 }
 
 export const SkillEditor: React.FC<SkillEditorProps> = ({ skill, onClose }) => {
-  const api = useAPIClient();
+  const api = useApp().apiClient;
   const t = useT();
   const { token } = useToken();
   const [form] = Form.useForm();

package/src/client/skill-hub/components/SkillManager.tsx

@@ -17,7 +17,7 @@ import {
   Tooltip,
 } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, PlayCircleOutlined, BranchesOutlined } from '@ant-design/icons';
-import { useAPIClient } from '@nocobase/client';
+import { useApp } from '@nocobase/client-v2';
 import { useT } from '../locale';
 import { SkillEditor } from './SkillEditor';
 import { SkillTestPanel } from './SkillTestPanel';
@@ -26,7 +26,7 @@ import { GitSkillImport } from './GitSkillImport';
 const { TextArea } = Input;
 
 export const SkillManager: React.FC = () => {
-  const api = useAPIClient();
+  const api = useApp().apiClient;
   const t = useT();
   const [skills, setSkills] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);

package/src/client/skill-hub/components/SkillMetrics.tsx

@@ -1,124 +1,157 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Card, Table, Typography, Space, Row, Col, Statistic, Progress } from 'antd';
-import { SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, ClockCircleOutlined } from '@ant-design/icons';
-import { useAPIClient } from '@nocobase/client';
-import { useT } from '../locale';
-
-const { Title, Text } = Typography;
-
-export const SkillMetrics: React.FC = () => {
-  const api = useAPIClient();
-  const t = useT();
-  const [executions, setExecutions] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const fetchExecutions = useCallback(async () => {
-    setLoading(true);
-    try {
-      // Fetch up to 1000 recent executions to calculate basic metrics
-      const { data } = await api.request({
-        url: 'skillExecutions:list',
-        params: {
-          pageSize: 1000,
-          sort: ['-createdAt'],
-          appends: ['skill'],
-        },
-      });
-      const rawData = data?.data?.data ?? data?.data ?? [];
-      setExecutions(Array.isArray(rawData) ? rawData : []);
-    } catch {
-      // ignore
-    } finally {
-      setLoading(false);
-    }
-  }, [api]);
-
-  useEffect(() => {
-    fetchExecutions();
-  }, [fetchExecutions]);
-
-  const metrics = useMemo(() => {
-    const total = executions.length;
-    const succeeded = executions.filter((e) => e.status === 'succeeded').length;
-    const failed = executions.filter((e) => e.status === 'failed').length;
-    const timeout = executions.filter((e) => e.status === 'timeout').length;
-    const canceled = executions.filter((e) => e.status === 'canceled').length;
-
-    // Group by skill
-    const bySkill: Record<string, any> = {};
-    executions.forEach((e) => {
-      const skillName = e.skill?.title || e.skill?.name || 'Unknown';
-      if (!bySkill[skillName]) {
-        bySkill[skillName] = { name: skillName, total: 0, succeeded: 0, failed: 0, timeout: 0, canceled: 0, totalDuration: 0, durationCount: 0 };
-      }
-      bySkill[skillName].total += 1;
-      bySkill[skillName][e.status] = (bySkill[skillName][e.status] || 0) + 1;
-      if (e.durationMs) {
-        bySkill[skillName].totalDuration += e.durationMs;
-        bySkill[skillName].durationCount += 1;
-      }
-    });
-
-    const skillData = Object.values(bySkill).map((s) => ({
-      ...s,
-      successRate: s.total > 0 ? (s.succeeded / s.total) * 100 : 0,
-      avgDuration: s.durationCount > 0 ? (s.totalDuration / s.durationCount / 1000).toFixed(2) : 0,
-    })).sort((a: any, b: any) => b.total - a.total);
-
-    return { total, succeeded, failed, timeout, canceled, skillData };
-  }, [executions]);
-
-  const columns = [
-    { title: t('Skill'), dataIndex: 'name', key: 'name', width: 200 },
-    { title: t('Total Runs'), dataIndex: 'total', key: 'total', width: 100 },
-    { 
-      title: t('Success Rate'), 
-      dataIndex: 'successRate', 
-      key: 'successRate', 
-      width: 150,
-      render: (val: number) => <Progress percent={Math.round(val)} size="small" status={val === 100 ? 'success' : val > 50 ? 'active' : 'exception'} /> 
-    },
-    { title: t('Success'), dataIndex: 'succeeded', key: 'succeeded', width: 100 },
-    { title: t('Failed'), dataIndex: 'failed', key: 'failed', width: 100 },
-    { title: t('Timeout'), dataIndex: 'timeout', key: 'timeout', width: 100 },
-    { title: t('Avg Duration (s)'), dataIndex: 'avgDuration', key: 'avgDuration', width: 120 },
-  ];
-
-  return (
-    <Space direction="vertical" size="large" style={{ width: '100%', padding: '0 16px' }}>
-      <Row gutter={16}>
-        <Col span={6}>
-          <Card size="small">
-            <Statistic title="Total Executions (Recent)" value={metrics.total} prefix={<SyncOutlined />} />
-          </Card>
-        </Col>
-        <Col span={6}>
-          <Card size="small">
-            <Statistic title="Succeeded" value={metrics.succeeded} valueStyle={{ color: '#3f8600' }} prefix={<CheckCircleOutlined />} />
-          </Card>
-        </Col>
-        <Col span={6}>
-          <Card size="small">
-            <Statistic title="Failed" value={metrics.failed} valueStyle={{ color: '#cf1322' }} prefix={<CloseCircleOutlined />} />
-          </Card>
-        </Col>
-        <Col span={6}>
-          <Card size="small">
-            <Statistic title="Timeout/Canceled" value={metrics.timeout + metrics.canceled} valueStyle={{ color: '#faad14' }} prefix={<ClockCircleOutlined />} />
-          </Card>
-        </Col>
-      </Row>
-
-      <Card title={t('Metrics by Skill (Recent)')}>
-        <Table 
-          dataSource={metrics.skillData} 
-          columns={columns} 
-          rowKey="name" 
-          loading={loading} 
-          pagination={false} 
-          size="middle" 
-        />
-      </Card>
-    </Space>
-  );
-};
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Card, Table, Typography, Space, Row, Col, Statistic, Progress } from 'antd';
+import { SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { useApp } from '@nocobase/client-v2';
+import { useT } from '../locale';
+
+const { Title, Text } = Typography;
+
+export const SkillMetrics: React.FC = () => {
+  const api = useApp().apiClient;
+  const t = useT();
+  const [executions, setExecutions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchExecutions = useCallback(async () => {
+    setLoading(true);
+    try {
+      // Fetch up to 1000 recent executions to calculate basic metrics
+      const { data } = await api.request({
+        url: 'skillExecutions:list',
+        params: {
+          pageSize: 1000,
+          sort: ['-createdAt'],
+          appends: ['skill'],
+        },
+      });
+      const rawData = data?.data?.data ?? data?.data ?? [];
+      setExecutions(Array.isArray(rawData) ? rawData : []);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [api]);
+
+  useEffect(() => {
+    fetchExecutions();
+  }, [fetchExecutions]);
+
+  const metrics = useMemo(() => {
+    const total = executions.length;
+    const succeeded = executions.filter((e) => e.status === 'succeeded').length;
+    const failed = executions.filter((e) => e.status === 'failed').length;
+    const timeout = executions.filter((e) => e.status === 'timeout').length;
+    const canceled = executions.filter((e) => e.status === 'canceled').length;
+
+    // Group by skill
+    const bySkill: Record<string, any> = {};
+    executions.forEach((e) => {
+      const skillName = e.skill?.title || e.skill?.name || 'Unknown';
+      if (!bySkill[skillName]) {
+        bySkill[skillName] = {
+          name: skillName,
+          total: 0,
+          succeeded: 0,
+          failed: 0,
+          timeout: 0,
+          canceled: 0,
+          totalDuration: 0,
+          durationCount: 0,
+        };
+      }
+      bySkill[skillName].total += 1;
+      bySkill[skillName][e.status] = (bySkill[skillName][e.status] || 0) + 1;
+      if (e.durationMs) {
+        bySkill[skillName].totalDuration += e.durationMs;
+        bySkill[skillName].durationCount += 1;
+      }
+    });
+
+    const skillData = Object.values(bySkill)
+      .map((s) => ({
+        ...s,
+        successRate: s.total > 0 ? (s.succeeded / s.total) * 100 : 0,
+        avgDuration: s.durationCount > 0 ? (s.totalDuration / s.durationCount / 1000).toFixed(2) : 0,
+      }))
+      .sort((a: any, b: any) => b.total - a.total);
+
+    return { total, succeeded, failed, timeout, canceled, skillData };
+  }, [executions]);
+
+  const columns = [
+    { title: t('Skill'), dataIndex: 'name', key: 'name', width: 200 },
+    { title: t('Total Runs'), dataIndex: 'total', key: 'total', width: 100 },
+    {
+      title: t('Success Rate'),
+      dataIndex: 'successRate',
+      key: 'successRate',
+      width: 150,
+      render: (val: number) => (
+        <Progress
+          percent={Math.round(val)}
+          size="small"
+          status={val === 100 ? 'success' : val > 50 ? 'active' : 'exception'}
+        />
+      ),
+    },
+    { title: t('Success'), dataIndex: 'succeeded', key: 'succeeded', width: 100 },
+    { title: t('Failed'), dataIndex: 'failed', key: 'failed', width: 100 },
+    { title: t('Timeout'), dataIndex: 'timeout', key: 'timeout', width: 100 },
+    { title: t('Avg Duration (s)'), dataIndex: 'avgDuration', key: 'avgDuration', width: 120 },
+  ];
+
+  return (
+    <Space direction="vertical" size="large" style={{ width: '100%', padding: '0 16px' }}>
+      <Row gutter={16}>
+        <Col span={6}>
+          <Card size="small">
+            <Statistic title="Total Executions (Recent)" value={metrics.total} prefix={<SyncOutlined />} />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card size="small">
+            <Statistic
+              title="Succeeded"
+              value={metrics.succeeded}
+              valueStyle={{ color: '#3f8600' }}
+              prefix={<CheckCircleOutlined />}
+            />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card size="small">
+            <Statistic
+              title="Failed"
+              value={metrics.failed}
+              valueStyle={{ color: '#cf1322' }}
+              prefix={<CloseCircleOutlined />}
+            />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card size="small">
+            <Statistic
+              title="Timeout/Canceled"
+              value={metrics.timeout + metrics.canceled}
+              valueStyle={{ color: '#faad14' }}
+              prefix={<ClockCircleOutlined />}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      <Card title={t('Metrics by Skill (Recent)')}>
+        <Table
+          dataSource={metrics.skillData}
+          columns={columns}
+          rowKey="name"
+          loading={loading}
+          pagination={false}
+          size="middle"
+          scroll={{ x: 'max-content' }}
+        />
+      </Card>
+    </Space>
+  );
+};

package/src/client/skill-hub/components/SkillTestPanel.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { Modal, Input, Button, Alert, Typography, Space, Spin } from 'antd';
-import { useAPIClient, Upload } from '@nocobase/client';
-import { useT } from '../locale';
-import { parseJsonText } from '../utils/jsonFields';
+import { Upload } from '@nocobase/client';
+import { useApp } from '@nocobase/client-v2';
+import { useT } from '../locale';
+import { parseJsonText } from '../utils/jsonFields';
 
 const { TextArea } = Input;
 
@@ -11,16 +12,16 @@ interface SkillTestPanelProps {
   onClose: () => void;
 }
 
-export const SkillTestPanel: React.FC<SkillTestPanelProps> = ({ skill, onClose }) => {
-  const api = useAPIClient();
-  const t = useT();
-  const inputSchema = parseJsonText(skill.inputSchema, null);
-  const [input, setInput] = useState(
-    inputSchema?.properties
-      ? JSON.stringify(
-          Object.fromEntries(
-            Object.keys(inputSchema.properties).map((k) => [k, '']),
-          ),
+export const SkillTestPanel: React.FC<SkillTestPanelProps> = ({ skill, onClose }) => {
+  const api = useApp().apiClient;
+  const t = useT();
+  const inputSchema = parseJsonText(skill.inputSchema, null);
+  const [input, setInput] = useState(
+    inputSchema?.properties
+      ? JSON.stringify(
+          Object.fromEntries(
+            Object.keys(inputSchema.properties).map((k) => [k, '']),
+          ),
           null,
           2,
         )