plugin-agent-orchestrator 1.0.0

package/src/client/AIEmployeesContext.tsx

@@ -0,0 +1,58 @@
+import React, { createContext, useContext } from 'react';
+import { useRequest } from '@nocobase/client';
+
+interface AIEmployeeInfo {
+  username: string;
+  nickname: string;
+  about?: string;
+}
+
+interface AIEmployeesContextType {
+  employees: AIEmployeeInfo[];
+  employeeMap: Map<string, string>;
+  loading: boolean;
+}
+
+const AIEmployeesContext = createContext<AIEmployeesContextType>({
+  employees: [],
+  employeeMap: new Map(),
+  loading: false,
+});
+
+/**
+ * P3 FIX: Shared context provider that fetches aiEmployees once
+ * and shares the data across RulesTab, TracingTab, and AIEmployeeSelect.
+ */
+export const AIEmployeesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { data, loading } = useRequest({
+    url: 'aiEmployees:list',
+    params: { pageSize: 200 },
+  });
+
+  const value = React.useMemo(() => {
+    const rawEmployees = (data as any)?.data || [];
+    const employees: AIEmployeeInfo[] = rawEmployees.map((emp: any) => ({
+      username: emp.username,
+      nickname: emp.nickname || emp.username,
+      about: emp.about?.substring(0, 80),
+    }));
+
+    const employeeMap = new Map<string, string>();
+    for (const emp of employees) {
+      employeeMap.set(emp.username, emp.nickname);
+    }
+
+    return { employees, employeeMap, loading };
+  }, [data, loading]);
+
+  return (
+    <AIEmployeesContext.Provider value={value}>
+      {children}
+    </AIEmployeesContext.Provider>
+  );
+};
+
+/**
+ * Hook to access shared AI employees data.
+ */
+export const useAIEmployees = () => useContext(AIEmployeesContext);

package/src/client/OrchestratorSettings.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Tabs } from 'antd';
+import { ApartmentOutlined, MonitorOutlined } from '@ant-design/icons';
+import { RulesTab } from './RulesTab';
+import { TracingTab } from './TracingTab';
+import { AIEmployeesProvider } from './AIEmployeesContext';
+
+/**
+ * Main settings page for the Agent Orchestrator plugin.
+ * Contains two tabs:
+ * - Rules: Configure which AI Employees can delegate tasks to others
+ * - Tracing: View and debug delegation execution logs
+ *
+ * P3 FIX: Wraps with AIEmployeesProvider so both tabs share one API call.
+ */
+export const OrchestratorSettings: React.FC = () => {
+  return (
+    <AIEmployeesProvider>
+      <div style={{ padding: '0 24px 24px' }}>
+        <Tabs
+          defaultActiveKey="rules"
+          items={[
+            {
+              key: 'rules',
+              label: (
+                <span>
+                  <ApartmentOutlined /> Orchestration Rules
+                </span>
+              ),
+              children: <RulesTab />,
+            },
+            {
+              key: 'tracing',
+              label: (
+                <span>
+                  <MonitorOutlined /> Swarm Tracing
+                </span>
+              ),
+              children: <TracingTab />,
+            },
+          ]}
+        />
+      </div>
+    </AIEmployeesProvider>
+  );
+};

package/src/client/RulesTab.tsx

@@ -0,0 +1,272 @@
+import React, { useState } from 'react';
+import {
+  Table,
+  Button,
+  Drawer,
+  Form,
+  InputNumber,
+  Switch,
+  Space,
+  Popconfirm,
+  Card,
+  message,
+  Tag,
+  Typography,
+  Alert,
+} from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, SwapRightOutlined } from '@ant-design/icons';
+import { useAPIClient, useRequest } from '@nocobase/client';
+import { AIEmployeeSelect } from './AIEmployeeSelect';
+import { useAIEmployees } from './AIEmployeesContext';
+
+const { Text } = Typography;
+
+export const RulesTab: React.FC = () => {
+  const api = useAPIClient();
+  const [visible, setVisible] = useState(false);
+  const [editingRecord, setEditingRecord] = useState<any>(null);
+  const [form] = Form.useForm();
+
+  const { data, loading, refresh } = useRequest({
+    url: 'orchestratorConfig:list',
+    params: {
+      sort: ['-createdAt'],
+    },
+  });
+
+  // P3 FIX: Use shared context instead of duplicate API call
+  const { employeeMap } = useAIEmployees();
+
+  const handleOpen = (record?: any) => {
+    setEditingRecord(record);
+    if (record) {
+      form.setFieldsValue(record);
+    } else {
+      form.resetFields();
+      form.setFieldsValue({ enabled: true, maxDepth: 1, timeout: 120000 });
+    }
+    setVisible(true);
+  };
+
+  const handleClose = () => {
+    setVisible(false);
+    setEditingRecord(null);
+  };
+
+  const handleSave = async (values: any) => {
+    // Validate: leader !== subAgent
+    if (values.leaderUsername === values.subAgentUsername) {
+      message.error('Leader and Sub-Agent cannot be the same employee.');
+      return;
+    }
+
+    try {
+      if (editingRecord) {
+        await api.request({
+          url: 'orchestratorConfig:update',
+          method: 'put',
+          params: { filterByTk: editingRecord.id },
+          data: values,
+        });
+        message.success('Rule updated');
+      } else {
+        await api.request({
+          url: 'orchestratorConfig:create',
+          method: 'post',
+          data: values,
+        });
+        message.success('Rule created');
+      }
+      handleClose();
+      refresh();
+    } catch (e: any) {
+      const msg = e?.response?.data?.errors?.[0]?.message || e.message;
+      message.error(`Save failed: ${msg}`);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await api.request({
+        url: 'orchestratorConfig:destroy',
+        method: 'delete',
+        params: { filterByTk: id },
+      });
+      message.success('Rule deleted');
+      refresh();
+    } catch (e: any) {
+      message.error(`Delete failed: ${e.message}`);
+    }
+  };
+
+  const columns = [
+    {
+      title: 'Leader (Orchestrator)',
+      dataIndex: 'leaderUsername',
+      key: 'leaderUsername',
+      render: (username: string) => (
+        <Tag color="blue">{employeeMap.get(username) || username}</Tag>
+      ),
+    },
+    {
+      title: '',
+      key: 'arrow',
+      width: 50,
+      render: () => <SwapRightOutlined style={{ color: '#999', fontSize: 18 }} />,
+    },
+    {
+      title: 'Sub-Agent',
+      dataIndex: 'subAgentUsername',
+      key: 'subAgentUsername',
+      render: (username: string) => (
+        <Tag color="green">{employeeMap.get(username) || username}</Tag>
+      ),
+    },
+    {
+      title: 'Max Depth',
+      dataIndex: 'maxDepth',
+      key: 'maxDepth',
+      width: 100,
+      render: (v: number) => v ?? 1,
+    },
+    {
+      title: 'Timeout',
+      dataIndex: 'timeout',
+      key: 'timeout',
+      width: 100,
+      render: (v: number) => `${((v ?? 120000) / 1000).toFixed(0)}s`,
+    },
+    {
+      title: 'Enabled',
+      dataIndex: 'enabled',
+      key: 'enabled',
+      width: 80,
+      render: (enabled: boolean, record: any) => (
+        <Switch
+          checked={enabled}
+          size="small"
+          onChange={async (checked) => {
+            await api.request({
+              url: 'orchestratorConfig:update',
+              method: 'put',
+              params: { filterByTk: record.id },
+              data: { enabled: checked },
+            });
+            refresh();
+          }}
+        />
+      ),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      width: 160,
+      render: (_: any, record: any) => (
+        <Space>
+          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => handleOpen(record)}>
+            Edit
+          </Button>
+          <Popconfirm title="Delete this rule?" onConfirm={() => handleDelete(record.id)}>
+            <Button type="link" size="small" danger icon={<DeleteOutlined />}>
+              Delete
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  const leaderUsername = Form.useWatch('leaderUsername', form);
+
+  return (
+    <div>
+      <Alert
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+        message="Orchestration Rules"
+        description={
+          <Text type="secondary">
+            Configure which AI Employees can act as Leaders (Orchestrators) and which ones they can delegate tasks to.
+            Each rule creates a callable tool for the Leader to invoke the Sub-Agent.
+          </Text>
+        }
+      />
+
+      <Card bordered={false}>
+        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end' }}>
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => handleOpen()}>
+            New Rule
+          </Button>
+        </div>
+        <Table
+          rowKey="id"
+          loading={loading}
+          dataSource={(data as any)?.data || []}
+          columns={columns}
+          pagination={{ hideOnSinglePage: true, pageSize: 20 }}
+          size="middle"
+        />
+      </Card>
+
+      <Drawer
+        title={editingRecord ? 'Edit Orchestration Rule' : 'New Orchestration Rule'}
+        width={480}
+        onClose={handleClose}
+        open={visible}
+        styles={{ body: { paddingBottom: 80 } }}
+        extra={
+          <Space>
+            <Button onClick={handleClose}>Cancel</Button>
+            <Button onClick={() => form.submit()} type="primary">
+              Save
+            </Button>
+          </Space>
+        }
+      >
+        <Form form={form} layout="vertical" onFinish={handleSave}>
+          <Form.Item
+            name="leaderUsername"
+            label="Leader (Orchestrator)"
+            rules={[{ required: true, message: 'Please select a Leader' }]}
+            tooltip="The AI Employee that will be able to delegate tasks to the Sub-Agent"
+          >
+            <AIEmployeeSelect placeholder="Select Leader AI Employee..." />
+          </Form.Item>
+
+          <Form.Item
+            name="subAgentUsername"
+            label="Sub-Agent"
+            rules={[{ required: true, message: 'Please select a Sub-Agent' }]}
+            tooltip="The AI Employee that will receive delegated tasks"
+          >
+            <AIEmployeeSelect
+              placeholder="Select Sub-Agent AI Employee..."
+              exclude={leaderUsername}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="maxDepth"
+            label="Max Delegation Depth"
+            tooltip="How many layers of delegation are allowed (1 = leader calls sub-agent, sub-agent cannot delegate further)"
+          >
+            <InputNumber min={1} max={3} style={{ width: '100%' }} />
+          </Form.Item>
+
+          <Form.Item
+            name="timeout"
+            label="Timeout (ms)"
+            tooltip="Maximum time in milliseconds for the sub-agent to complete its task"
+          >
+            <InputNumber min={10000} max={600000} step={10000} style={{ width: '100%' }} />
+          </Form.Item>
+
+          <Form.Item name="enabled" label="Enabled" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        </Form>
+      </Drawer>
+    </div>
+  );
+};

package/src/client/TracingTab.tsx

@@ -0,0 +1,227 @@
+import React, { useState } from 'react';
+import {
+  Table,
+  Card,
+  Tag,
+  Typography,
+  Drawer,
+  Descriptions,
+  Alert,
+  Button,
+  Empty,
+} from 'antd';
+import {
+  EyeOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ClockCircleOutlined,
+} from '@ant-design/icons';
+import { useRequest } from '@nocobase/client';
+import { useAIEmployees } from './AIEmployeesContext';
+
+const { Text, Paragraph } = Typography;
+
+/**
+ * Phase 5: Swarm Tracing page.
+ * Displays delegation execution logs from the orchestratorLogs collection.
+ */
+export const TracingTab: React.FC = () => {
+  const [selectedLog, setSelectedLog] = useState<any>(null);
+
+  // Fetch delegation logs
+  const { data, loading, refresh } = useRequest({
+    url: 'orchestratorTracing:list',
+    params: {
+      sort: ['-createdAt'],
+      pageSize: 50,
+    },
+  });
+
+  // P3 FIX: Use shared context instead of duplicate API call
+  const { employeeMap } = useAIEmployees();
+
+  const columns = [
+    {
+      title: 'Time',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      width: 170,
+      render: (v: string) => v ? new Date(v).toLocaleString() : '-',
+    },
+    {
+      title: 'Sub-Agent',
+      dataIndex: 'subAgentUsername',
+      key: 'subAgentUsername',
+      render: (username: string) => (
+        <Tag color="green">{employeeMap.get(username) || username}</Tag>
+      ),
+    },
+    {
+      title: 'Task',
+      dataIndex: 'task',
+      key: 'task',
+      render: (task: string) => (
+        <Text ellipsis style={{ maxWidth: 280 }}>
+          {task?.substring(0, 100) || '-'}
+        </Text>
+      ),
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      key: 'status',
+      width: 90,
+      render: (status: string) => (
+        <Tag
+          icon={status === 'success' ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+          color={status === 'success' ? 'success' : 'error'}
+        >
+          {status}
+        </Tag>
+      ),
+    },
+    {
+      title: 'Duration',
+      dataIndex: 'durationMs',
+      key: 'durationMs',
+      width: 90,
+      render: (ms: number) => {
+        if (!ms) return '-';
+        return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`;
+      },
+    },
+    {
+      title: 'Depth',
+      dataIndex: 'depth',
+      key: 'depth',
+      width: 60,
+      render: (v: number) => v ?? 0,
+    },
+    {
+      title: '',
+      key: 'actions',
+      width: 80,
+      render: (_: any, record: any) => (
+        <Button
+          type="link"
+          size="small"
+          icon={<EyeOutlined />}
+          onClick={() => setSelectedLog(record)}
+        >
+          Detail
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <Alert
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+        message="Swarm Tracing"
+        description={
+          <Text type="secondary">
+            View delegation execution logs. Each row represents one sub-agent invocation
+            triggered by a Leader's tool call.
+          </Text>
+        }
+      />
+
+      <Card bordered={false}>
+        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end' }}>
+          <Button onClick={refresh}>Refresh</Button>
+        </div>
+        <Table
+          rowKey="id"
+          loading={loading}
+          dataSource={(data as any)?.data || []}
+          columns={columns}
+          pagination={{ hideOnSinglePage: true, pageSize: 20 }}
+          size="middle"
+          locale={{ emptyText: <Empty description="No delegation executions yet" /> }}
+        />
+      </Card>
+
+      {/* Detail drawer */}
+      <Drawer
+        title="Delegation Detail"
+        width={640}
+        onClose={() => setSelectedLog(null)}
+        open={!!selectedLog}
+      >
+        {selectedLog && (
+          <>
+            <Descriptions column={1} bordered size="small" style={{ marginBottom: 16 }}>
+              <Descriptions.Item label="Status">
+                <Tag
+                  icon={selectedLog.status === 'success' ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+                  color={selectedLog.status === 'success' ? 'success' : 'error'}
+                >
+                  {selectedLog.status}
+                </Tag>
+              </Descriptions.Item>
+              <Descriptions.Item label="Sub-Agent">
+                <Tag color="green">
+                  {employeeMap.get(selectedLog.subAgentUsername) || selectedLog.subAgentUsername}
+                </Tag>
+              </Descriptions.Item>
+              <Descriptions.Item label="Tool">
+                <Text code>{selectedLog.toolName}</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="Depth">
+                {selectedLog.depth ?? 0}
+              </Descriptions.Item>
+              <Descriptions.Item label="Duration">
+                {selectedLog.durationMs
+                  ? selectedLog.durationMs >= 1000
+                    ? `${(selectedLog.durationMs / 1000).toFixed(1)}s`
+                    : `${selectedLog.durationMs}ms`
+                  : '-'}
+              </Descriptions.Item>
+              <Descriptions.Item label="Time">
+                {selectedLog.createdAt ? new Date(selectedLog.createdAt).toLocaleString() : '-'}
+              </Descriptions.Item>
+            </Descriptions>
+
+            <Card title="Task" size="small" style={{ marginBottom: 16 }}>
+              <Paragraph
+                style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 13 }}
+              >
+                {selectedLog.task || 'No task description'}
+              </Paragraph>
+            </Card>
+
+            <Card
+              title="Result"
+              size="small"
+              style={{
+                marginBottom: 16,
+                borderColor: selectedLog.status === 'success' ? '#b7eb8f' : '#ffa39e',
+              }}
+            >
+              <Paragraph
+                style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 13 }}
+                ellipsis={{ rows: 20, expandable: true }}
+              >
+                {selectedLog.result || selectedLog.error || 'No result'}
+              </Paragraph>
+            </Card>
+
+            {selectedLog.error && (
+              <Card title="Error" size="small" style={{ borderColor: '#ffa39e' }}>
+                <Paragraph
+                  type="danger"
+                  style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 13 }}
+                >
+                  {selectedLog.error}
+                </Paragraph>
+              </Card>
+            )}
+          </>
+        )}
+      </Drawer>
+    </div>
+  );
+};

package/src/client/index.tsx

@@ -0,0 +1 @@
+export { default } from './plugin';

package/src/client/plugin.tsx

@@ -0,0 +1,15 @@
+import { Plugin } from '@nocobase/client';
+import { OrchestratorSettings } from './OrchestratorSettings';
+
+export class PluginAgentOrchestratorClient extends Plugin {
+  async load() {
+    // Register under the "AI" settings group for consistency with other AI plugins
+    this.app.pluginSettingsManager.add('ai.orchestrator', {
+      title: 'Agent Orchestrator',
+      icon: 'ApartmentOutlined',
+      Component: OrchestratorSettings,
+    });
+  }
+}
+
+export default PluginAgentOrchestratorClient;

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './server';
+export { default } from './server';

package/src/locale/en-US.json

@@ -0,0 +1,20 @@
+{
+  "Agent Orchestrator": "Agent Orchestrator",
+  "Orchestration Rules": "Orchestration Rules",
+  "Swarm Tracing": "Swarm Tracing",
+  "Leader (Orchestrator)": "Leader (Orchestrator)",
+  "Sub-Agent": "Sub-Agent",
+  "Max Delegation Depth": "Max Delegation Depth",
+  "Timeout (ms)": "Timeout (ms)",
+  "Enabled": "Enabled",
+  "New Rule": "New Rule",
+  "Edit Orchestration Rule": "Edit Orchestration Rule",
+  "New Orchestration Rule": "New Orchestration Rule",
+  "Rule created": "Rule created",
+  "Rule updated": "Rule updated",
+  "Rule deleted": "Rule deleted",
+  "Sub-Agent Conversation": "Sub-Agent Conversation",
+  "Task Summary": "Task Summary",
+  "Parent Session": "Parent Session",
+  "No sub-agent executions yet": "No sub-agent executions yet"
+}

package/src/locale/vi-VN.json

@@ -0,0 +1,20 @@
+{
+  "Agent Orchestrator": "Điều phối Agent",
+  "Orchestration Rules": "Quy tắc điều phối",
+  "Swarm Tracing": "Truy vết Swarm",
+  "Leader (Orchestrator)": "Leader (Điều phối viên)",
+  "Sub-Agent": "Agent con",
+  "Max Delegation Depth": "Độ sâu ủy quyền tối đa",
+  "Timeout (ms)": "Thời gian chờ (ms)",
+  "Enabled": "Bật",
+  "New Rule": "Quy tắc mới",
+  "Edit Orchestration Rule": "Sửa quy tắc điều phối",
+  "New Orchestration Rule": "Quy tắc điều phối mới",
+  "Rule created": "Đã tạo quy tắc",
+  "Rule updated": "Đã cập nhật quy tắc",
+  "Rule deleted": "Đã xóa quy tắc",
+  "Sub-Agent Conversation": "Hội thoại Agent con",
+  "Task Summary": "Tóm tắt nhiệm vụ",
+  "Parent Session": "Phiên gốc",
+  "No sub-agent executions yet": "Chưa có lượt thực thi agent con nào"
+}