plugin-agent-orchestrator 1.0.6 → 1.0.14

package/src/client/TracingTab.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   Table,
   Card,
@@ -9,29 +9,119 @@ import {
   Alert,
   Button,
   Empty,
+  Space,
+  Timeline,
+  Collapse,
+  Spin,
+  Select,
+  DatePicker,
+  Form,
 } from 'antd';
-import {
-  EyeOutlined,
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-} from '@ant-design/icons';
-import { useRequest } from '@nocobase/client';
+import { EyeOutlined, CheckCircleOutlined, CloseCircleOutlined, ReloadOutlined } from '@ant-design/icons';
+import { useAPIClient, useRequest } from '@nocobase/client';
 import { useAIEmployees } from './AIEmployeesContext';
 
 const { Text, Paragraph } = Typography;
+const { RangePicker } = DatePicker;
+
+type FilterState = {
+  leader?: string;
+  subAgent?: string;
+  status?: string;
+  range?: [any, any] | null;
+};
 
 export const TracingTab: React.FC = () => {
+  const api = useAPIClient();
   const [selectedLog, setSelectedLog] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [filters, setFilters] = useState<FilterState>({});
+
+  const { employees, employeeMap } = useAIEmployees();
 
-  const { data, loading, refresh } = useRequest({
-    url: 'orchestratorTracing:list',
-    params: {
+  const requestParams = useMemo(() => {
+    const filter: any = {};
+    if (filters.leader) filter.leaderUsername = filters.leader;
+    if (filters.subAgent) filter.subAgentUsername = filters.subAgent;
+    if (filters.status) filter.status = filters.status;
+    if (filters.range && (filters.range[0] || filters.range[1])) {
+      filter.createdAt = {};
+      if (filters.range[0]) filter.createdAt.$gte = filters.range[0].toDate().toISOString();
+      if (filters.range[1]) filter.createdAt.$lte = filters.range[1].toDate().toISOString();
+    }
+    return {
       sort: ['-createdAt'],
-      pageSize: 50,
+      page,
+      pageSize,
+      filter,
+    };
+  }, [page, pageSize, filters]);
+
+  const { data, loading, refresh } = useRequest(
+    {
+      url: 'orchestratorTracing:list',
+      params: requestParams,
+    },
+    {
+      refreshDeps: [requestParams],
     },
-  });
+  );
+
+  // Server returns { data: rows, meta: { count } }; useRequest unwraps to that shape.
+  const logs = useMemo(() => {
+    const rows = (data as any)?.data;
+    return Array.isArray(rows) ? rows : [];
+  }, [data]);
+
+  const total = useMemo(() => {
+    const count = (data as any)?.meta?.count;
+    return typeof count === 'number' ? count : 0;
+  }, [data]);
+
+  const formatDuration = (ms: number) => {
+    if (!ms) return '-';
+    return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`;
+  };
+
+  const handleOpenLog = async (record: any) => {
+    setSelectedLog(record);
+    setDetailLoading(true);
+    try {
+      const res = await api.request({
+        url: 'orchestratorTracing:get',
+        params: { filterByTk: record.id, source: record.hasUnifiedTrace ? 'span' : 'log' },
+      });
+      setSelectedLog((res as any)?.data?.data || (res as any)?.data || record);
+    } finally {
+      setDetailLoading(false);
+    }
+  };
 
-  const { employeeMap } = useAIEmployees();
+  const updateFilter = (patch: Partial<FilterState>) => {
+    setFilters((prev) => ({ ...prev, ...patch }));
+    setPage(1);
+  };
+
+  const resetFilters = () => {
+    setFilters({});
+    setPage(1);
+  };
+
+  const employeeOptions = useMemo(
+    () =>
+      employees.map((e) => ({
+        label: e.nickname || e.username,
+        value: e.username,
+      })),
+    [employees],
+  );
+
+  const hasFilters = Boolean(
+    filters.leader || filters.subAgent || filters.status || (filters.range && (filters.range[0] || filters.range[1])),
+  );
 
   const columns = [
     {
@@ -39,15 +129,19 @@ export const TracingTab: React.FC = () => {
       dataIndex: 'createdAt',
       key: 'createdAt',
       width: 170,
-      render: (v: string) => v ? new Date(v).toLocaleString() : '-',
+      render: (v: string) => (v ? new Date(v).toLocaleString() : '-'),
+    },
+    {
+      title: 'Leader',
+      dataIndex: 'leaderUsername',
+      key: 'leaderUsername',
+      render: (username: string) => <Tag color="blue">{employeeMap.get(username) || username}</Tag>,
     },
     {
       title: 'Sub-Agent',
       dataIndex: 'subAgentUsername',
       key: 'subAgentUsername',
-      render: (username: string) => (
-        <Tag color="green">{employeeMap.get(username) || username}</Tag>
-      ),
+      render: (username: string) => <Tag color="green">{employeeMap.get(username) || username}</Tag>,
     },
     {
       title: 'Task',
@@ -78,10 +172,7 @@ export const TracingTab: React.FC = () => {
       dataIndex: 'durationMs',
       key: 'durationMs',
       width: 90,
-      render: (ms: number) => {
-        if (!ms) return '-';
-        return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`;
-      },
+      render: formatDuration,
     },
     {
       title: 'Depth',
@@ -95,12 +186,7 @@ export const TracingTab: React.FC = () => {
       key: 'actions',
       width: 80,
       render: (_: any, record: any) => (
-        <Button
-          type="link"
-          size="small"
-          icon={<EyeOutlined />}
-          onClick={() => setSelectedLog(record)}
-        >
+        <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => handleOpenLog(record)}>
           Detail
         </Button>
       ),
@@ -113,103 +199,231 @@ export const TracingTab: React.FC = () => {
         type="info"
         showIcon
         style={{ marginBottom: 16 }}
-        message="Swarm Tracing"
+        message="Execution Tracing"
         description={
           <Text type="secondary">
-            View delegation execution logs. Each row represents one sub-agent invocation
-            triggered by a Leader's tool call.
+            View orchestration execution logs. Each row represents one sub-agent invocation, with child tool and Skill
+            Hub executions shown in the detail flow.
           </Text>
         }
       />
 
       <Card bordered={false}>
-        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end' }}>
-          <Button onClick={refresh}>Refresh</Button>
-        </div>
+        <Form layout="inline" style={{ marginBottom: 16, rowGap: 8, flexWrap: 'wrap' }}>
+          <Form.Item label="Leader">
+            <Select
+              allowClear
+              placeholder="Any leader"
+              style={{ minWidth: 180 }}
+              options={employeeOptions}
+              value={filters.leader}
+              onChange={(v) => updateFilter({ leader: v })}
+              showSearch
+              optionFilterProp="label"
+            />
+          </Form.Item>
+          <Form.Item label="Sub-Agent">
+            <Select
+              allowClear
+              placeholder="Any sub-agent"
+              style={{ minWidth: 180 }}
+              options={employeeOptions}
+              value={filters.subAgent}
+              onChange={(v) => updateFilter({ subAgent: v })}
+              showSearch
+              optionFilterProp="label"
+            />
+          </Form.Item>
+          <Form.Item label="Status">
+            <Select
+              allowClear
+              placeholder="Any status"
+              style={{ minWidth: 140 }}
+              options={[
+                { label: 'Success', value: 'success' },
+                { label: 'Error', value: 'error' },
+                { label: 'Running', value: 'running' },
+              ]}
+              value={filters.status}
+              onChange={(v) => updateFilter({ status: v })}
+            />
+          </Form.Item>
+          <Form.Item label="Time">
+            <RangePicker showTime value={filters.range as any} onChange={(v) => updateFilter({ range: v as any })} />
+          </Form.Item>
+          <Form.Item>
+            <Space>
+              <Button onClick={resetFilters} disabled={!hasFilters}>
+                Reset
+              </Button>
+              <Button icon={<ReloadOutlined />} onClick={refresh}>
+                Refresh
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+
         <Table
           rowKey="id"
           loading={loading}
-          dataSource={Array.isArray((data as any)?.data) ? (data as any).data : (Array.isArray(data) ? data : [])}
+          dataSource={logs}
           columns={columns}
-          pagination={{ hideOnSinglePage: true, pageSize: 20 }}
           size="middle"
-          locale={{ emptyText: <Empty description="No delegation executions yet" /> }}
+          pagination={{
+            current: page,
+            pageSize,
+            total,
+            showSizeChanger: true,
+            pageSizeOptions: [10, 20, 50, 100],
+            showTotal: (count) => `${count} execution${count === 1 ? '' : 's'}`,
+            onChange: (nextPage, nextSize) => {
+              setPage(nextPage);
+              if (nextSize && nextSize !== pageSize) setPageSize(nextSize);
+            },
+          }}
+          locale={{
+            emptyText: (
+              <Empty
+                description={hasFilters ? 'No executions match the current filters' : 'No delegation executions yet'}
+              />
+            ),
+          }}
         />
       </Card>
 
-      <Drawer
-        title="Delegation Detail"
-        width={640}
-        onClose={() => setSelectedLog(null)}
-        open={!!selectedLog}
-      >
+      <Drawer title="Execution Detail" width={820} 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>
+          <Spin spinning={detailLoading}>
+            <>
+              <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="Leader">
+                  <Tag color="blue">{employeeMap.get(selectedLog.leaderUsername) || selectedLog.leaderUsername}</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">{formatDuration(selectedLog.durationMs)}</Descriptions.Item>
+                <Descriptions.Item label="Time">
+                  {selectedLog.createdAt ? new Date(selectedLog.createdAt).toLocaleString() : '-'}
+                </Descriptions.Item>
+              </Descriptions>
 
-            {selectedLog.error && (
-              <Card title="Error" size="small" style={{ borderColor: '#ffa39e' }}>
+              <Card title="Task" size="small" style={{ marginBottom: 16 }}>
+                <Paragraph style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 13 }}>
+                  {selectedLog.task || 'No task description'}
+                </Paragraph>
+              </Card>
+
+              {selectedLog.context && (
+                <Card title="Context" size="small" style={{ marginBottom: 16 }}>
+                  <Paragraph style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 13 }}>
+                    {selectedLog.context}
+                  </Paragraph>
+                </Card>
+              )}
+
+              <Card title="Execution Flow" size="small" style={{ marginBottom: 16 }}>
+                {Array.isArray(selectedLog.trace) && selectedLog.trace.length ? (
+                  <Timeline
+                    items={selectedLog.trace.map((item: any, index: number) => ({
+                      key: index,
+                      color: item.status === 'error' ? 'red' : item.type === 'tool_call' ? 'blue' : 'green',
+                      children: (
+                        <div>
+                          <Space direction="vertical" size={2} style={{ width: '100%' }}>
+                            <Text strong>{item.title || item.type}</Text>
+                            <Text type="secondary">{item.at ? new Date(item.at).toLocaleString() : ''}</Text>
+                            {item.toolName && <Text code>{item.toolName}</Text>}
+                            {item.skillExecutionId && (
+                              <Text type="secondary">Skill execution #{item.skillExecutionId}</Text>
+                            )}
+                            {item.content && (
+                              <Paragraph style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 13 }}>
+                                {item.content}
+                              </Paragraph>
+                            )}
+                            {item.args && (
+                              <Paragraph style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 12 }}>
+                                {JSON.stringify(item.args, null, 2)}
+                              </Paragraph>
+                            )}
+                          </Space>
+                        </div>
+                      ),
+                    }))}
+                  />
+                ) : (
+                  <Empty description="No execution flow captured" />
+                )}
+              </Card>
+
+              {Array.isArray(selectedLog.messages) && selectedLog.messages.length > 0 && (
+                <Collapse
+                  style={{ marginBottom: 16 }}
+                  items={[
+                    {
+                      key: 'messages',
+                      label: `Raw messages (${selectedLog.messages.length})`,
+                      children: (
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                          {selectedLog.messages.map((message: any) => (
+                            <Card key={message.index} size="small" title={`${message.index + 1}. ${message.type}`}>
+                              <Paragraph style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 12 }}>
+                                {message.content || JSON.stringify(message.toolCalls || message, null, 2)}
+                              </Paragraph>
+                              {message.toolCalls?.length > 0 && (
+                                <Paragraph style={{ whiteSpace: 'pre-wrap', margin: '8px 0 0', fontSize: 12 }}>
+                                  {JSON.stringify(message.toolCalls, null, 2)}
+                                </Paragraph>
+                              )}
+                            </Card>
+                          ))}
+                        </Space>
+                      ),
+                    },
+                  ]}
+                />
+              )}
+
+              <Card
+                title="Result"
+                size="small"
+                style={{
+                  marginBottom: 16,
+                  borderColor: selectedLog.status === 'success' ? '#b7eb8f' : '#ffa39e',
+                }}
+              >
                 <Paragraph
-                  type="danger"
                   style={{ whiteSpace: 'pre-wrap', margin: 0, fontSize: 13 }}
+                  ellipsis={{ rows: 20, expandable: true }}
                 >
-                  {selectedLog.error}
+                  {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>
+              )}
+            </>
+          </Spin>
         )}
       </Drawer>
     </div>

package/src/client/plugin.tsx

@@ -1,14 +1,53 @@
 import { Plugin } from '@nocobase/client';
 import { OrchestratorSettings } from './OrchestratorSettings';
 
+import { InteractionSchemasProvider } from './skill-hub/tools/InteractionSchemasProvider';
+import { SkillHubCard } from './skill-hub/tools/SkillHubCard';
+import { parseJsonText } from './skill-hub/utils/jsonFields';
+
+const sanitize = (name: string) =>
+  name
+    .toLowerCase()
+    .replace(/[^a-z0-9_]/g, '_')
+    .replace(/_+/g, '_')
+    .replace(/^_|_$/g, '');
+
 export class PluginAgentOrchestratorClient extends Plugin {
   async load() {
+    this.app.use(InteractionSchemasProvider);
+
     // 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,
     });
+
+    await this.registerSkillUiCards();
+  }
+
+  private async registerSkillUiCards() {
+    const toolsManager = this.app.aiManager?.toolsManager;
+    if (!toolsManager) return;
+
+    try {
+      const { data } = await this.app.apiClient.request({
+        url: 'skillDefinitions:list',
+        params: {
+          filter: { enabled: true },
+          fields: ['name', 'autoCall', 'interactionSchema'],
+          pageSize: 200,
+        },
+      });
+      const list = (data as any)?.data ?? [];
+      for (const s of list) {
+        if (s.autoCall) continue;
+        if (!parseJsonText(s.interactionSchema, null)) continue;
+        toolsManager.registerTools(`skill_hub_${sanitize(s.name)}`, { ui: { card: SkillHubCard } });
+      }
+    } catch {
+      // user without ACL or backend unavailable — skip silently
+    }
   }
 }