@loom-framework/core 0.1.0-alpha.15 → 0.1.0-alpha.150

package/dist/cli/templates/skill-management-page.js

@@ -0,0 +1,476 @@
+/**
+ * Skill Management page template
+ *
+ * Generates SkillManagement page as a local source file.
+ * Page imports sub-components from @loom-framework/frontend-antd and
+ * registers its own i18n keys via registerMessages().
+ */
+export function skillManagementPageTemplate() {
+    return `import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  Card,
+  Tree,
+  Button,
+  Modal,
+  Spin,
+  Dropdown,
+  Segmented,
+  Flex,
+  Breadcrumb,
+  Space,
+  theme,
+} from 'antd';
+import {
+  FolderOutlined,
+  ReloadOutlined,
+  UploadOutlined,
+  DownloadOutlined,
+  DeleteOutlined,
+  MoreOutlined,
+  EyeOutlined,
+  CodeOutlined,
+  HomeOutlined,
+} from '@ant-design/icons';
+import {
+  useLocale, useLoomTheme, useAppShell, registerMessages,
+  SkillFileViewer, SkillUploadModal,
+  fetchSkillsList, fetchSkillDetail, fetchSkillFile, deleteSkill, downloadSkill,
+  getFileIcon,
+} from '@loom-framework/frontend-antd';
+import type { SkillInfo, SkillDetail, FileContent, SkillTreeNode } from '@loom-framework/frontend-antd';
+
+registerMessages('zh-CN', {
+  'skill.title': '技能管理',
+  'skill.upload': '上传技能',
+  'skill.delete': '删除',
+  'skill.detail': '详情',
+  'skill.files': '文件',
+  'skill.content': '内容',
+  'skill.noSelection': '请选择一个 Skill 查看详情',
+  'skill.uploadArchive': '上传压缩包',
+  'skill.uploadFile': '上传文件',
+  'skill.refresh': '刷新',
+  'skill.download': '下载',
+  'skill.more': '更多',
+  'skill.confirmDelete': '确认删除',
+  'skill.confirmDeleteContent': '确定要删除 Skill "{name}" 吗？',
+  'skill.deleteSuccess': 'Skill "{name}" 已删除',
+  'skill.deleteFailed': '删除失败',
+  'skill.loadFailed': '加载 Skill 列表失败',
+  'skill.loadFileFailed': '加载文件内容失败',
+  'skill.createSuccess': 'Skill 创建成功',
+  'skill.parseSuccess': '压缩包解析成功',
+  'skill.parseFailed': '解析压缩包失败',
+  'skill.uploadFirst': '请先上传压缩包',
+  'skill.downloadFailed': '下载失败',
+  'skill.skillDetail': 'Skill 详情',
+  'skill.contentPreview': '内容预览',
+  'skill.selectToView': '选择左侧 Skill 或文件以查看详情',
+  'skill.preview': '预览',
+  'skill.source': '源码',
+  'skill.uploadNew': '上传新 Skill',
+  'skill.manualCreate': '手动创建',
+  'skill.archiveUpload': '上传压缩包',
+  'skill.skillName': 'Skill 名称',
+  'skill.skillNameRequired': '请输入 Skill 名称',
+  'skill.skillNamePattern': '只能包含字母、数字、中划线和下划线',
+  'skill.skillContent': 'SKILL.md 内容',
+  'skill.referencesFiles': 'References 文件',
+  'skill.dragOrClick': '拖拽文件到此处，或点击选择文件',
+  'skill.referencesHint': '文件将存入 references/ 目录，支持 .md, .json, .yaml 等文本文件',
+  'skill.scriptsFiles': 'Scripts 文件',
+  'skill.scriptsHint': '文件将存入 scripts/ 目录，支持 .sh, .py, .js 等脚本文件',
+  'skill.archiveNameAuto': '从压缩包自动识别，可修改',
+  'skill.uploadZip': '上传 ZIP 压缩包',
+  'skill.dragZip': '拖拽 .zip 文件到此处，或点击选择',
+  'skill.archiveHint': '压缩包必须包含 SKILL.md，支持任意子目录（references/、scripts/ 等）',
+  'skill.parsing': '正在解析压缩包...',
+  'skill.parseSuccessTitle': '解析成功',
+  'skill.detectedName': '检测到 Skill 名称',
+  'skill.identified': '已识别',
+  'skill.fileCount': '{count} 个文件',
+  'skill.fileCountLabel': '文件数量',
+  'skill.fileStructure': '文件结构：',
+});
+
+registerMessages('en-US', {
+  'skill.title': 'Skill Management',
+  'skill.upload': 'Upload Skill',
+  'skill.delete': 'Delete',
+  'skill.detail': 'Detail',
+  'skill.files': 'Files',
+  'skill.content': 'Content',
+  'skill.noSelection': 'Select a skill to view details',
+  'skill.uploadArchive': 'Upload archive',
+  'skill.uploadFile': 'Upload file',
+  'skill.refresh': 'Refresh',
+  'skill.download': 'Download',
+  'skill.more': 'More',
+  'skill.confirmDelete': 'Confirm Delete',
+  'skill.confirmDeleteContent': 'Are you sure you want to delete Skill "{name}"?',
+  'skill.deleteSuccess': 'Skill "{name}" deleted',
+  'skill.deleteFailed': 'Delete failed',
+  'skill.loadFailed': 'Failed to load skill list',
+  'skill.loadFileFailed': 'Failed to load file content',
+  'skill.createSuccess': 'Skill created successfully',
+  'skill.parseSuccess': 'Archive parsed successfully',
+  'skill.parseFailed': 'Failed to parse archive',
+  'skill.uploadFirst': 'Please upload an archive first',
+  'skill.downloadFailed': 'Download failed',
+  'skill.skillDetail': 'Skill Details',
+  'skill.contentPreview': 'Content Preview',
+  'skill.selectToView': 'Select a skill or file to view details',
+  'skill.preview': 'Preview',
+  'skill.source': 'Source',
+  'skill.uploadNew': 'Upload New Skill',
+  'skill.manualCreate': 'Manual',
+  'skill.archiveUpload': 'Archive',
+  'skill.skillName': 'Skill Name',
+  'skill.skillNameRequired': 'Please enter skill name',
+  'skill.skillNamePattern': 'Only letters, numbers, hyphens and underscores',
+  'skill.skillContent': 'SKILL.md Content',
+  'skill.referencesFiles': 'References Files',
+  'skill.dragOrClick': 'Drag files here or click to select',
+  'skill.referencesHint': 'Files will be stored in references/ directory',
+  'skill.scriptsFiles': 'Scripts Files',
+  'skill.scriptsHint': 'Files will be stored in scripts/ directory',
+  'skill.archiveNameAuto': 'Auto-detected from archive, editable',
+  'skill.uploadZip': 'Upload ZIP Archive',
+  'skill.dragZip': 'Drag .zip file here or click to select',
+  'skill.archiveHint': 'Archive must contain SKILL.md, supports subdirectories',
+  'skill.parsing': 'Parsing archive...',
+  'skill.parseSuccessTitle': 'Parse Successful',
+  'skill.detectedName': 'Detected Skill Name',
+  'skill.identified': 'Identified',
+  'skill.fileCount': '{count} files',
+  'skill.fileCountLabel': 'File Count',
+  'skill.fileStructure': 'File structure:',
+});
+
+export default function SkillManagementPage(): React.ReactElement {
+  const { mode } = useLoomTheme();
+  const { t } = useLocale();
+  const { breadcrumbs, onNavClick } = useAppShell();
+  const { token } = theme.useToken();
+
+  const [skills, setSkills] = useState<SkillInfo[]>([]);
+  const [treeData, setTreeData] = useState<SkillTreeNode[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [skillDetail, setSkillDetail] = useState<SkillDetail | null>(null);
+  const [fileContent, setFileContent] = useState<FileContent | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [viewMode, setViewMode] = useState<'preview' | 'source'>('preview');
+  const [uploadModalOpen, setUploadModalOpen] = useState(false);
+
+  const buildTreeData = useCallback((skillList: SkillInfo[]): SkillTreeNode[] => {
+    return skillList.map((skill) => {
+      const children: SkillTreeNode[] = [
+        {
+          key: \`\${skill.name}/SKILL.md\`,
+          title: 'SKILL.md',
+          icon: <FolderOutlined style={{ color: token.colorPrimary }} />,
+          isLeaf: true,
+          isFile: true,
+          filePath: 'SKILL.md',
+          skillName: skill.name,
+        },
+      ];
+
+      for (const dir of skill.subDirs) {
+        children.push({
+          key: \`\${skill.name}/\${dir}\`,
+          title: \`\${dir}/\`,
+          icon: <FolderOutlined style={{ color: token.colorWarning }} />,
+          isLeaf: false,
+          isFile: false,
+          isDir: true,
+          filePath: dir,
+          children: [],
+          skillName: skill.name,
+        });
+      }
+
+      return {
+        key: skill.name,
+        title: skill.name,
+        icon: <FolderOutlined />,
+        isLeaf: false,
+        isFile: false,
+        isSkill: true,
+        children,
+        skillName: skill.name,
+      };
+    });
+  }, [token]);
+
+  const loadDirChildren = useCallback(async (skillName: string, dirName: string): Promise<SkillTreeNode[]> => {
+    const detail = await fetchSkillDetail(skillName);
+    const files = detail.files.filter((f) => f.path.startsWith(\`\${dirName}/\`));
+
+    const dirChildren: SkillTreeNode[] = [];
+    for (const f of files) {
+      const relativePath = f.path.slice(dirName.length + 1);
+      const parts = relativePath.split('/');
+
+      let currentLevel = dirChildren;
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i]!;
+        const isLast = i === parts.length - 1;
+        const partialPath = \`\${dirName}/\${parts.slice(0, i + 1).join('/')}\`;
+
+        if (isLast) {
+          currentLevel.push({
+            key: \`\${skillName}/\${f.path}\`,
+            title: part,
+            icon: getFileIcon(part, { primary: token.colorPrimary, warning: token.colorWarning, success: token.colorSuccess }),
+            isLeaf: true,
+            isFile: true,
+            filePath: f.path,
+            skillName,
+          });
+        } else {
+          let dirNode = currentLevel.find((n) => n.isDir && n.filePath === partialPath);
+          if (!dirNode) {
+            dirNode = {
+              key: \`\${skillName}/\${partialPath}\`,
+              title: \`\${part}/\`,
+              icon: <FolderOutlined style={{ color: token.colorWarning }} />,
+              isLeaf: false,
+              isFile: false,
+              isDir: true,
+              filePath: partialPath,
+              children: [],
+              skillName,
+            };
+            currentLevel.push(dirNode);
+          }
+          currentLevel = dirNode.children!;
+        }
+      }
+    }
+
+    return dirChildren;
+  }, [token]);
+
+  const refreshSkills = useCallback(async () => {
+    setLoading(true);
+    try {
+      const list = await fetchSkillsList();
+      setSkills(list);
+      setTreeData(buildTreeData(list));
+      setExpandedKeys(list.map((s) => s.name));
+    } catch {
+      // message handled by api
+    } finally {
+      setLoading(false);
+    }
+  }, [buildTreeData]);
+
+  useEffect(() => {
+    refreshSkills();
+  }, [refreshSkills]);
+
+  const handleTreeExpand = useCallback(
+    async (keys: React.Key[], info: { node: SkillTreeNode; expanded: boolean }) => {
+      setExpandedKeys(keys);
+      if (!info.expanded) return;
+      const node = info.node;
+      if (node.skillName && node.isDir) {
+        if (node.children && node.children.length > 0) return;
+        const dirName = node.filePath || node.title.replace(/\\/$/, '');
+        const dirChildren = await loadDirChildren(node.skillName, dirName);
+
+        const updateNode = (nodes: SkillTreeNode[]): SkillTreeNode[] =>
+          nodes.map((n) => {
+            if (n.key === node.key) {
+              return { ...n, children: dirChildren };
+            }
+            if (n.children) {
+              return { ...n, children: updateNode(n.children) };
+            }
+            return n;
+          });
+
+        setTreeData((prev) => updateNode(prev));
+      }
+    },
+    [loadDirChildren],
+  );
+
+  const handleTreeSelect = useCallback(
+    async (keys: React.Key[], info: { node: SkillTreeNode }) => {
+      setSelectedKeys(keys);
+      if (keys.length === 0) {
+        setSkillDetail(null);
+        setFileContent(null);
+        return;
+      }
+      const node = info.node;
+      if (!node.isFile) {
+        setSkillDetail(null);
+        setFileContent(null);
+        return;
+      }
+      setLoading(true);
+      try {
+        if (node.filePath === 'SKILL.md') {
+          const detail = await fetchSkillDetail(node.skillName!);
+          setSkillDetail(detail);
+          setFileContent(null);
+        } else {
+          const content = await fetchSkillFile(node.skillName!, node.filePath!);
+          setFileContent(content);
+          setSkillDetail(null);
+        }
+      } catch {
+        // error handled silently
+      } finally {
+        setLoading(false);
+      }
+    },
+    [],
+  );
+
+  const handleDelete = useCallback(
+    async (skillName: string) => {
+      try {
+        await deleteSkill(skillName);
+        setSkillDetail(null);
+        setFileContent(null);
+        setSelectedKeys([]);
+        refreshSkills();
+      } catch {
+        // error handled silently
+      }
+    },
+    [refreshSkills],
+  );
+
+  const rightTitle = useMemo(() => {
+    if (skillDetail) return \`SKILL.md — \${skillDetail.name}\`;
+    if (fileContent) return fileContent.path;
+    return t('skill.skillDetail');
+  }, [skillDetail, fileContent, t]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      <Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
+        <Breadcrumb items={[{ title: <HomeOutlined onClick={() => onNavClick?.('')} style={{ cursor: 'pointer' }} /> }, ...(breadcrumbs || []).map(b => ({ title: b.path ? <a onClick={() => onNavClick?.(b.path!)}>{b.title}</a> : b.title }))]} />
+        <Space>
+          <Button icon={<ReloadOutlined />} onClick={refreshSkills} loading={loading}>
+            {t('skill.refresh')}
+          </Button>
+          <Button type="primary" icon={<UploadOutlined />} onClick={() => setUploadModalOpen(true)}>
+            {t('skill.uploadNew')}
+          </Button>
+          <Dropdown
+            menu={{
+              items: selectedKeys.length > 0
+                ? [
+                    {
+                      key: 'download',
+                      label: t('skill.download'),
+                      icon: <DownloadOutlined />,
+                      onClick: () => {
+                        const key = String(selectedKeys[0]);
+                        const skillName = key.includes('/') ? key.split('/')[0] : key;
+                        downloadSkill(skillName).catch(() => {});
+                      },
+                    },
+                    {
+                      key: 'delete',
+                      label: t('skill.delete'),
+                      icon: <DeleteOutlined />,
+                      danger: true,
+                      onClick: () => {
+                        const key = String(selectedKeys[0]);
+                        const skillName = key.includes('/') ? key.split('/')[0] : key;
+                        Modal.confirm({
+                          title: t('skill.confirmDelete'),
+                          content: t('skill.confirmDeleteContent', { name: skillName }),
+                          okType: 'danger',
+                          onOk: () => handleDelete(skillName),
+                        });
+                      },
+                    },
+                  ]
+                : [],
+            }}
+          >
+            <Button icon={<MoreOutlined />} disabled={selectedKeys.length === 0}>
+              {t('skill.more')}
+            </Button>
+          </Dropdown>
+        </Space>
+      </Flex>
+      <Spin spinning={loading && !skillDetail && !fileContent}>
+        <div style={{ display: 'flex', height: '100%', padding: 16, gap: 16, overflow: 'hidden' }}>
+          <div style={{ width: 300, minWidth: 240, maxWidth: 500, overflow: 'auto', flexShrink: 0 }}>
+            <Tree<SkillTreeNode>
+              treeData={treeData as unknown as any}
+              selectedKeys={selectedKeys}
+              expandedKeys={expandedKeys}
+              showLine={{ showLeafIcon: false }}
+              blockNode
+              onSelect={handleTreeSelect}
+              onExpand={handleTreeExpand}
+              style={{ fontSize: 14 }}
+              titleRender={(node: any) => (
+                <Flex align="center" gap={4}>
+                  {node.icon}
+                  <span>{node.title}</span>
+                </Flex>
+              )}
+            />
+          </div>
+
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
+            <Card
+              size="small"
+              style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}
+              styles={{ body: { padding: 16, flex: 1, overflow: 'auto', minHeight: 0 } }}
+              title={
+                <Flex align="center" gap="small">
+                  <span>{rightTitle}</span>
+                  {(skillDetail || fileContent) && (
+                    <Segmented
+                      size="small"
+                      options={[
+                        { label: t('skill.preview'), value: 'preview', icon: <EyeOutlined /> },
+                        { label: t('skill.source'), value: 'source', icon: <CodeOutlined /> },
+                      ]}
+                      value={viewMode}
+                      onChange={(v) => setViewMode(v as 'preview' | 'source')}
+                    />
+                  )}
+                </Flex>
+              }
+            >
+              <SkillFileViewer
+                skillDetail={skillDetail}
+                fileContent={fileContent}
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+                mode={mode}
+                token={token}
+                t={t}
+              />
+            </Card>
+          </div>
+        </div>
+      </Spin>
+
+      <SkillUploadModal
+        open={uploadModalOpen}
+        onClose={() => setUploadModalOpen(false)}
+        onSuccess={refreshSkills}
+        token={token}
+        t={t}
+      />
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=skill-management-page.js.map

package/dist/cli/templates/skill-management-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-management-page.js","sourceRoot":"","sources":["../../../src/cli/templates/skill-management-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,UAAU,2BAA2B;IACzC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAidR,CAAC;AACF,CAAC"}

package/dist/cli/templates/system-settings-page.d.ts

@@ -0,0 +1,10 @@
+/**
+ * System settings page templates
+ *
+ * Generates ModelManagement and SkillManagement pages as local source files.
+ * Pages import sub-components from @loom-framework/frontend-antd and
+ * register their own i18n keys via registerMessages().
+ */
+export declare function modelManagementPageTemplate(): string;
+export declare function skillManagementPageTemplate(): string;
+//# sourceMappingURL=system-settings-page.d.ts.map

package/dist/cli/templates/system-settings-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-settings-page.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/system-settings-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,wBAAgB,2BAA2B,IAAI,MAAM,CAiSpD;AAID,wBAAgB,2BAA2B,IAAI,MAAM,CAmdpD"}