plugin-agent-orchestrator 1.0.16 → 1.0.18

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

@@ -0,0 +1,331 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  List,
+  message,
+  Modal,
+  Popconfirm,
+  Select,
+  Space,
+  Switch,
+  Tag,
+  Tooltip,
+  Typography,
+} from 'antd';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { useAPIClient, useApp } from '@nocobase/client';
+import { useT } from '../locale';
+import { formatJsonText, parseJsonText, stringifyJsonText } from '../utils/jsonFields';
+import { getLoopTemplate, LOOP_TEMPLATES } from '../tools/loopTemplates';
+import { registerSkillLoopCards } from '../tools/registerSkillLoopCards';
+
+const { TextArea } = Input;
+
+const extractList = (data: any) => {
+  const value = data?.data?.data ?? data?.data ?? data ?? [];
+  return Array.isArray(value) ? value : [];
+};
+
+export const LoopSettings: React.FC = () => {
+  const api = useAPIClient();
+  const app = useApp();
+  const t = useT();
+  const [form] = Form.useForm();
+  const [skills, setSkills] = useState<any[]>([]);
+  const [configs, setConfigs] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [editorVisible, setEditorVisible] = useState(false);
+  const [editingConfig, setEditingConfig] = useState<any>(null);
+
+  const skillsById = useMemo(() => new Map(skills.map((skill) => [String(skill.id), skill])), [skills]);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [skillsResponse, configsResponse] = await Promise.all([
+        api.request({
+          url: 'skillDefinitions:list',
+          params: {
+            filter: { enabled: true },
+            fields: ['id', 'name', 'title', 'language', 'autoCall'],
+            pageSize: 500,
+          },
+        }),
+        api.request({
+          url: 'skillLoopConfigs:list',
+          params: {
+            fields: ['id', 'skillId', 'enabled', 'title', 'templateKey', 'prompt', 'schema', 'config', 'updatedAt'],
+            sort: ['-updatedAt'],
+            pageSize: 500,
+          },
+        }),
+      ]);
+      setSkills(extractList(skillsResponse.data));
+      setConfigs(extractList(configsResponse.data));
+    } catch {
+      message.error(t('Failed to load skill review settings'));
+    } finally {
+      setLoading(false);
+    }
+  }, [api, t]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const openCreate = () => {
+    const template = getLoopTemplate('confirm');
+    setEditingConfig(null);
+    form.resetFields();
+    form.setFieldsValue({
+      enabled: true,
+      templateKey: template.key,
+      prompt: template.schema.prompt,
+      schema: formatJsonText(template.schema),
+      config: '',
+    });
+    setEditorVisible(true);
+  };
+
+  const openEdit = (record: any) => {
+    const template = getLoopTemplate(record.templateKey);
+    setEditingConfig(record);
+    form.setFieldsValue({
+      ...record,
+      templateKey: record.templateKey || template.key,
+      prompt: record.prompt || template.schema.prompt,
+      schema: formatJsonText(record.schema || template.schema),
+      config: formatJsonText(record.config, null),
+    });
+    setEditorVisible(true);
+  };
+
+  const closeEditor = () => {
+    setEditorVisible(false);
+    setEditingConfig(null);
+    form.resetFields();
+  };
+
+  const notifyLoopSettingsChanged = useCallback(async () => {
+    await registerSkillLoopCards(app);
+    window.dispatchEvent(new Event('skill-hub-loop-settings-changed'));
+  }, [app]);
+
+  const handleTemplateChange = (templateKey: string) => {
+    const template = getLoopTemplate(templateKey);
+    form.setFieldsValue({
+      prompt: template.schema.prompt,
+      schema: formatJsonText(template.schema),
+    });
+  };
+
+  const handleSave = async () => {
+    try {
+      const values = await form.validateFields();
+      const schema = parseJsonText<any>(values.schema, undefined);
+      if (!schema || typeof schema !== 'object') {
+        message.error(t('Invalid JSON in Review Schema'));
+        return;
+      }
+
+      const config = parseJsonText<any>(values.config, undefined);
+      if (values.config && config === undefined) {
+        message.error(t('Invalid JSON in Review Config'));
+        return;
+      }
+
+      const schemaWithPrompt = {
+        ...schema,
+        prompt: values.prompt || schema.prompt,
+      };
+      const data = {
+        ...values,
+        schema: stringifyJsonText(schemaWithPrompt),
+        config: values.config ? stringifyJsonText(config) : null,
+      };
+
+      if (editingConfig) {
+        await api.request({
+          url: 'skillLoopConfigs:update',
+          method: 'POST',
+          params: { filterByTk: editingConfig.id },
+          data,
+        });
+      } else {
+        await api.request({
+          url: 'skillLoopConfigs:create',
+          method: 'POST',
+          data,
+        });
+      }
+
+      message.success(t(editingConfig ? 'Skill review setting updated' : 'Skill review setting created'));
+      closeEditor();
+      fetchData();
+      void notifyLoopSettingsChanged();
+    } catch (err: any) {
+      if (err?.errorFields) return;
+      message.error(t('Failed to save skill review setting'));
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    try {
+      await api.request({ url: 'skillLoopConfigs:destroy', method: 'POST', params: { filterByTk: id } });
+      message.success(t('Deleted'));
+      fetchData();
+      void notifyLoopSettingsChanged();
+    } catch {
+      message.error(t('Failed to delete'));
+    }
+  };
+
+  const handleToggleEnabled = async (record: any) => {
+    try {
+      await api.request({
+        url: 'skillLoopConfigs:update',
+        method: 'POST',
+        params: { filterByTk: record.id },
+        data: { enabled: !record.enabled },
+      });
+      fetchData();
+      void notifyLoopSettingsChanged();
+    } catch {
+      message.error(t('Failed to update'));
+    }
+  };
+
+  return (
+    <Card
+      title={t('Skill Review Settings')}
+      extra={
+        <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          {t('New Review')}
+        </Button>
+      }
+    >
+      <List
+        loading={loading}
+        dataSource={configs}
+        grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
+        renderItem={(config) => {
+          const skill = skillsById.get(String(config.skillId));
+          const template = getLoopTemplate(config.templateKey);
+          return (
+            <List.Item>
+              <Card
+                size="small"
+                title={
+                  <Typography.Text ellipsis>
+                    {config.title || skill?.title || skill?.name || t('Unknown skill')}
+                  </Typography.Text>
+                }
+                extra={
+                  <Tag color={config.enabled ? 'green' : 'default'}>
+                    {config.enabled ? t('Enabled') : t('Disabled')}
+                  </Tag>
+                }
+                actions={[
+                  <Tooltip key="edit" title={t('Edit')}>
+                    <EditOutlined onClick={() => openEdit(config)} />
+                  </Tooltip>,
+                  <Popconfirm key="delete" title={t('Delete?')} onConfirm={() => handleDelete(config.id)}>
+                    <Tooltip title={t('Delete')}>
+                      <DeleteOutlined style={{ color: 'red' }} />
+                    </Tooltip>
+                  </Popconfirm>,
+                ]}
+                style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.05)', borderRadius: 8 }}
+              >
+                <Space direction="vertical" size={8} style={{ width: '100%' }}>
+                  <Typography.Text type="secondary" style={{ fontSize: 13 }}>
+                    {skill?.name || `skillId=${config.skillId}`}
+                  </Typography.Text>
+                  <Tag color="blue" style={{ width: 'fit-content' }}>
+                    {template.title}
+                  </Tag>
+                  <Typography.Paragraph
+                    type="secondary"
+                    ellipsis={{ rows: 2 }}
+                    style={{ minHeight: 44, marginBottom: 0, fontSize: 13 }}
+                  >
+                    {config.prompt || template.schema.prompt}
+                  </Typography.Paragraph>
+                  <Space size={4}>
+                    <Switch checked={config.enabled} onChange={() => handleToggleEnabled(config)} size="small" />
+                    <span style={{ fontSize: 12 }}>{config.enabled ? t('Enabled') : t('Disabled')}</span>
+                  </Space>
+                </Space>
+              </Card>
+            </List.Item>
+          );
+        }}
+      />
+
+      <Modal
+        open={editorVisible}
+        title={editingConfig ? t('Edit Skill Review Setting') : t('New Skill Review Setting')}
+        onCancel={closeEditor}
+        onOk={handleSave}
+        width={760}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item name="enabled" valuePropName="checked" label={t('Enabled')}>
+            <Switch />
+          </Form.Item>
+
+          <Form.Item name="skillId" label={t('Skill')} rules={[{ required: true }]}>
+            <Select
+              showSearch
+              optionFilterProp="label"
+              placeholder={t('Select a skill')}
+              options={skills.map((skill) => ({
+                value: skill.id,
+                label: `${skill.title || skill.name} (${skill.name})`,
+              }))}
+            />
+          </Form.Item>
+
+          <Form.Item name="title" label={t('Title')}>
+            <Input placeholder={t('Optional display title')} />
+          </Form.Item>
+
+          <Form.Item name="templateKey" label={t('Review Template')} rules={[{ required: true }]}>
+            <Select onChange={handleTemplateChange}>
+              {LOOP_TEMPLATES.map((template) => (
+                <Select.Option key={template.key} value={template.key}>
+                  {template.title} - {template.description}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Form.Item name="prompt" label={t('Prompt')} rules={[{ required: true }]}>
+            <TextArea rows={3} />
+          </Form.Item>
+
+          <Form.Item
+            name="schema"
+            label={t('Review Schema (JSON)')}
+            rules={[{ required: true }]}
+            extra={t('Standard interaction schema. Supported types: confirm, form, select.')}
+          >
+            <TextArea rows={10} style={{ fontFamily: 'monospace', fontSize: 13 }} />
+          </Form.Item>
+
+          <Form.Item name="config" label={t('Review Config (optional JSON)')}>
+            <TextArea
+              rows={4}
+              style={{ fontFamily: 'monospace', fontSize: 13 }}
+              placeholder={'{\n  "maxRetries": 1\n}'}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Card>
+  );
+};

package/src/client/skill-hub/index.tsx

@@ -1,75 +1,51 @@
-import { Plugin } from '@nocobase/client';
-import { SkillManager } from './components/SkillManager';
-import { ExecutionHistory } from './components/ExecutionHistory';
-
-import { SkillMetrics } from './components/SkillMetrics';
-import { InteractionSchemasProvider } from './tools/InteractionSchemasProvider';
-import { SkillHubCard } from './tools/SkillHubCard';
-import { parseJsonText } from './utils/jsonFields';
-
-const sanitize = (name: string) =>
-  name
-    .toLowerCase()
-    .replace(/[^a-z0-9_]/g, '_')
-    .replace(/_+/g, '_')
-    .replace(/^_|_$/g, '');
-
-export class PluginSkillHubClient extends Plugin {
-  async load() {
-    (this as any).app.use(InteractionSchemasProvider);
-
-    (this as any).app.pluginSettingsManager.add('skill-hub', {
-      title: (this as any).t('Skill Hub'),
-      icon: 'CodeOutlined',
-    });
-
-    (this as any).app.pluginSettingsManager.add('skill-hub.definitions', {
-      title: (this as any).t('Skill Definitions'),
-      Component: SkillManager,
-      aclSnippet: 'pm.skill-hub',
-    });
-
-    (this as any).app.pluginSettingsManager.add('skill-hub.executions', {
-      title: (this as any).t('Execution History'),
-      Component: ExecutionHistory,
-      aclSnippet: 'pm.skill-hub',
-    });
-
-    (this as any).app.pluginSettingsManager.add('skill-hub.metrics', {
-      title: (this as any).t('Dashboard Metrics'),
-      Component: SkillMetrics,
-      aclSnippet: 'pm.skill-hub',
-    });
-
-
-
-    await this.registerSkillUiCards();
-  }
-
-  private async registerSkillUiCards() {
-    const toolsManager = (this as any).app.aiManager?.toolsManager;
-    if (!toolsManager) return;
-
-    try {
-      const { data } = await (this as any).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
-    }
-  }
-}
-
-export { SkillManager, ExecutionHistory, SkillMetrics };
-export default PluginSkillHubClient;
+import { Plugin } from '@nocobase/client';
+import { SkillManager } from './components/SkillManager';
+import { ExecutionHistory } from './components/ExecutionHistory';
+import { SkillMetrics } from './components/SkillMetrics';
+import { LoopSettings } from './components/LoopSettings';
+import { InteractionSchemasProvider } from './tools/InteractionSchemasProvider';
+import { registerSkillLoopCards } from './tools/registerSkillLoopCards';
+
+export class PluginSkillHubClient extends Plugin {
+  async load() {
+    (this as any).app.use(InteractionSchemasProvider);
+
+    (this as any).app.pluginSettingsManager.add('skill-hub', {
+      title: (this as any).t('Skill Hub'),
+      icon: 'CodeOutlined',
+    });
+
+    (this as any).app.pluginSettingsManager.add('skill-hub.definitions', {
+      title: (this as any).t('Skill Definitions'),
+      Component: SkillManager,
+      aclSnippet: 'pm.skill-hub',
+    });
+
+    (this as any).app.pluginSettingsManager.add('skill-hub.loop-settings', {
+      title: (this as any).t('Skill Review Settings'),
+      Component: LoopSettings,
+      aclSnippet: 'pm.skill-hub',
+    });
+
+    (this as any).app.pluginSettingsManager.add('skill-hub.executions', {
+      title: (this as any).t('Execution History'),
+      Component: ExecutionHistory,
+      aclSnippet: 'pm.skill-hub',
+    });
+
+    (this as any).app.pluginSettingsManager.add('skill-hub.metrics', {
+      title: (this as any).t('Dashboard Metrics'),
+      Component: SkillMetrics,
+      aclSnippet: 'pm.skill-hub',
+    });
+
+    await this.registerSkillUiCards();
+  }
+
+  private async registerSkillUiCards() {
+    await registerSkillLoopCards((this as any).app);
+  }
+}
+
+export { SkillManager, ExecutionHistory, SkillMetrics, LoopSettings };
+export default PluginSkillHubClient;

package/src/client/skill-hub/tools/InteractionSchemasProvider.tsx

@@ -1,13 +1,7 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { useAPIClient } from '@nocobase/client';
 import { parseJsonText } from '../utils/jsonFields';
-
-export type InteractionSchema = {
-  type: 'form' | 'select' | 'confirm';
-  prompt: string;
-  options?: { label: string; value: string | number }[];
-  fields?: Record<string, { type?: string; title?: string; required?: boolean; enum?: any[] }>;
-};
+import { InteractionSchema } from './loopTemplates';
 
 const Ctx = createContext<Map<string, InteractionSchema>>(new Map());
 
@@ -23,28 +17,74 @@ const sanitize = (name: string) =>
 export const InteractionSchemasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const api = useAPIClient();
   const [map, setMap] = useState<Map<string, InteractionSchema>>(new Map());
+  const [version, setVersion] = useState(0);
+
+  useEffect(() => {
+    const refresh = () => setVersion((current) => current + 1);
+    window.addEventListener('skill-hub-loop-settings-changed', refresh);
+    return () => window.removeEventListener('skill-hub-loop-settings-changed', refresh);
+  }, []);
 
   useEffect(() => {
     let cancelled = false;
-    api
-      .request({
+    const extractList = (data: any) => {
+      const value = data?.data?.data ?? data?.data ?? data ?? [];
+      return Array.isArray(value) ? value : [];
+    };
+    const schemaFromLoopConfig = (config: any): InteractionSchema | null => {
+      const schema = parseJsonText<InteractionSchema | null>(config.schema, null);
+      if (schema) {
+        return config.prompt && !schema.prompt ? { ...schema, prompt: config.prompt } : schema;
+      }
+      if (config.prompt) {
+        return {
+          type: 'confirm',
+          prompt: config.prompt,
+        };
+      }
+      return null;
+    };
+
+    Promise.all([
+      api.request({
         url: 'skillDefinitions:list',
         params: {
           filter: { enabled: true },
-          fields: ['name', 'autoCall', 'interactionSchema'],
-          pageSize: 200,
+          fields: ['id', 'name', 'autoCall', 'interactionSchema'],
+          pageSize: 500,
         },
-      })
-      .then(({ data }) => {
+      }),
+      api.request({
+        url: 'skillLoopConfigs:list',
+        params: {
+          filter: { enabled: true },
+          fields: ['skillId', 'enabled', 'schema', 'prompt', 'templateKey'],
+          pageSize: 500,
+        },
+      }).catch(() => ({ data: [] })),
+    ])
+      .then(([skillsResponse, loopConfigsResponse]) => {
         if (cancelled) return;
         const next = new Map<string, InteractionSchema>();
-        const list = data?.data ?? [];
-        for (const s of list) {
+        const skills = extractList(skillsResponse.data);
+        const loopConfigs = extractList(loopConfigsResponse.data);
+        const skillsById = new Map(skills.map((skill: any) => [String(skill.id), skill]));
+
+        for (const s of skills) {
           if (s.autoCall) continue;
           const schema = parseJsonText<InteractionSchema | null>(s.interactionSchema, null);
           if (!schema) continue;
           next.set(sanitize(s.name), schema);
         }
+
+        for (const config of loopConfigs) {
+          const skill = skillsById.get(String(config.skillId));
+          if (!skill?.name) continue;
+          const schema = schemaFromLoopConfig(config);
+          if (!schema) continue;
+          next.set(sanitize(skill.name), schema);
+        }
+
         setMap(next);
       })
       .catch(() => {
@@ -53,7 +93,7 @@ export const InteractionSchemasProvider: React.FC<{ children?: React.ReactNode }
     return () => {
       cancelled = true;
     };
-  }, [api]);
+  }, [api, version]);
 
   return <Ctx.Provider value={map}>{children}</Ctx.Provider>;
 };

package/src/client/skill-hub/tools/SkillHubCard.tsx

@@ -7,17 +7,48 @@ export const SkillHubCard: React.FC<ToolsUIProperties> = ({ toolCall, decisions
   const schemas = useInteractionSchemas();
   const [form] = Form.useForm();
 
-  const skillKey = toolCall.name.replace(/^skill_hub_/, '');
+  const sanitize = (name: string) =>
+    name
+      .toLowerCase()
+      .replace(/[^a-z0-9_]/g, '_')
+      .replace(/_+/g, '_')
+      .replace(/^_|_$/g, '');
+  const isGenericExecutor = toolCall.name === 'skill_hub_execute';
+  const rawArgs = (toolCall.args as Record<string, any>) || {};
+  const skillKey = isGenericExecutor ? sanitize(rawArgs.skillName || '') : toolCall.name.replace(/^skill_hub_/, '');
   const schema = schemas.get(skillKey);
 
   const interrupted = toolCall.invokeStatus === 'init' || toolCall.invokeStatus === 'interrupted';
-  if (!schema || !interrupted) {
+  if (!interrupted) {
     return null;
   }
 
+  if (!schema) {
+    return (
+      <Card size="small" style={{ marginTop: 8 }}>
+        <Typography.Paragraph style={{ marginBottom: 12 }}>
+          Review this Skill Hub tool call before execution.
+        </Typography.Paragraph>
+        <Space>
+          <Button type="primary" onClick={() => decisions.approve()}>
+            Run
+          </Button>
+          <Button onClick={() => decisions.reject('user_cancel')}>Cancel</Button>
+        </Space>
+      </Card>
+    );
+  }
+
   const onSubmit = async () => {
     const values = await form.validateFields();
-    const args = schema.type === 'select' ? values : { ...(toolCall.args as any), ...values };
+    const args = isGenericExecutor
+      ? {
+          ...rawArgs,
+          input: schema.type === 'select' ? values : { ...(rawArgs.input || {}), ...values },
+        }
+      : schema.type === 'select'
+        ? values
+        : { ...rawArgs, ...values };
     await decisions.edit(args);
   };
 
@@ -39,7 +70,7 @@ export const SkillHubCard: React.FC<ToolsUIProperties> = ({ toolCall, decisions
         <Form
           form={form}
           layout="vertical"
-          initialValues={(toolCall.args as Record<string, any>) || {}}
+          initialValues={(isGenericExecutor ? rawArgs.input : rawArgs) || {}}
           style={{ marginBottom: 8 }}
         >
           {schema.type === 'select' && (

package/src/client/skill-hub/tools/loopTemplates.ts

@@ -0,0 +1,52 @@
+export type InteractionSchema = {
+  type: 'form' | 'select' | 'confirm';
+  prompt: string;
+  options?: { label: string; value: string | number }[];
+  fields?: Record<string, { type?: string; title?: string; required?: boolean; enum?: any[] }>;
+};
+
+export type LoopTemplate = {
+  key: string;
+  title: string;
+  description: string;
+  schema: InteractionSchema;
+};
+
+export const LOOP_TEMPLATES: LoopTemplate[] = [
+  {
+    key: 'confirm',
+    title: 'Confirm before run',
+    description: 'Ask the user to approve or cancel the skill call.',
+    schema: {
+      type: 'confirm',
+      prompt: 'Review this skill call before execution.',
+    },
+  },
+  {
+    key: 'review-input',
+    title: 'Review editable input',
+    description: 'Show selected input fields so the user can edit them before running.',
+    schema: {
+      type: 'form',
+      prompt: 'Review and edit the skill input before execution.',
+      fields: {},
+    },
+  },
+  {
+    key: 'choose-option',
+    title: 'Choose one option',
+    description: 'Ask the user to choose one option before running.',
+    schema: {
+      type: 'select',
+      prompt: 'Choose how to run this skill.',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Careful', value: 'careful' },
+      ],
+    },
+  },
+];
+
+export function getLoopTemplate(key?: string) {
+  return LOOP_TEMPLATES.find((template) => template.key === key) || LOOP_TEMPLATES[0];
+}