@loom-framework/core 0.1.0-alpha.19 → 0.1.0-alpha.191

package/dist/cli/templates/system-settings-page.js

@@ -0,0 +1,768 @@
+/**
+ * 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().
+ */
+// ── Model Management ──
+export function modelManagementPageTemplate() {
+    return `import React, { useState, useEffect, useCallback } from 'react';
+import { Card, Table, Button, Modal, Form, Input, Switch, Tag, Space, Typography, message, theme, Breadcrumb, Flex } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, RobotOutlined, HomeOutlined, AppstoreAddOutlined } from '@ant-design/icons';
+import { useLocale, useAppShell, registerMessages } from '@loom-framework/frontend-antd';
+
+registerMessages('zh-CN', {
+  'model.title': '模型管理',
+  'model.addModel': '添加模型',
+  'model.addEngine': '添加AI引擎',
+  'model.editModel': '编辑模型',
+  'model.modelName': '模型名',
+  'model.authToken': '认证令牌',
+  'model.baseUrl': 'API 地址',
+  'model.setDefault': '设为默认',
+  'model.default': '默认',
+  'model.engine': 'AI 引擎',
+  'model.configured': '已配置',
+  'model.notSet': '未设置',
+  'model.deleteConfirm': '确认删除模型 "{name}"？',
+  'model.deleteSuccess': '模型已删除',
+  'model.addSuccess': '模型已添加',
+  'model.updateSuccess': '模型已更新',
+  'model.saveFailed': '保存模型失败',
+  'model.loadFailed': '加载模型失败',
+  'model.nameRequired': '请输入模型名称',
+  'model.baseUrlRequired': '请输入 API 地址',
+  'model.tokenMasked': '留空保持当前值不变',
+  'model.enterToken': '输入认证令牌',
+});
+
+registerMessages('en-US', {
+  'model.title': 'Model Management',
+  'model.addModel': 'Add Model',
+  'model.addEngine': 'Add AI Engine',
+  'model.editModel': 'Edit Model',
+  'model.modelName': 'Model Name',
+  'model.authToken': 'Auth Token',
+  'model.baseUrl': 'API Base URL',
+  'model.setDefault': 'Set as Default',
+  'model.default': 'Default',
+  'model.engine': 'AI Engine',
+  'model.configured': 'Configured',
+  'model.notSet': 'Not Set',
+  'model.deleteConfirm': 'Delete model "{name}"?',
+  'model.deleteSuccess': 'Model deleted',
+  'model.addSuccess': 'Model added',
+  'model.updateSuccess': 'Model updated',
+  'model.saveFailed': 'Failed to save model',
+  'model.loadFailed': 'Failed to load models',
+  'model.nameRequired': 'Model name is required',
+  'model.baseUrlRequired': 'Base URL is required',
+  'model.tokenMasked': 'Leave empty to keep current',
+  'model.enterToken': 'Enter auth token',
+});
+
+interface ModelItem {
+  name: string;
+  authToken?: string;
+  hasAuthToken?: boolean;
+  baseUrl?: string;
+  isDefault: boolean;
+}
+
+const API = '/api/v1/ai/models';
+
+export default function ModelManagementPage(): React.ReactElement {
+  const { token } = theme.useToken();
+  const { t } = useLocale();
+  const { breadcrumbs, onNavClick } = useAppShell();
+  const [models, setModels] = useState<ModelItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingModel, setEditingModel] = useState<ModelItem | null>(null);
+  const [form] = Form.useForm();
+
+  const fetchModels = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(API);
+      const data = await res.json();
+      setModels(Array.isArray(data) ? data : []);
+    } catch {
+      message.error(t('model.loadFailed') || 'Failed to load models');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchModels(); }, [fetchModels]);
+
+  const handleSave = async () => {
+    try {
+      const values = await form.validateFields();
+      let updatedModels = models.map(m => ({ ...m, isDefault: false }));
+
+      if (editingModel) {
+        updatedModels = updatedModels.map(m =>
+          m.name === editingModel.name ? { ...m, ...values, hasAuthToken: values.authToken ? true : m.hasAuthToken } : m
+        );
+      } else {
+        updatedModels.push({ ...values, hasAuthToken: !!values.authToken });
+      }
+
+      if (values.isDefault) {
+        updatedModels = updatedModels.map(m => ({ ...m, isDefault: m.name === values.name }));
+      } else if (!updatedModels.some(m => m.isDefault)) {
+        updatedModels[0].isDefault = true;
+      }
+
+      const res = await fetch(API, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ models: updatedModels }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setModels(Array.isArray(data) ? data : []);
+        message.success(editingModel ? (t('model.updateSuccess') || 'Model updated') : (t('model.addSuccess') || 'Model added'));
+      } else {
+        message.error(t('model.saveFailed') || 'Failed to save model');
+      }
+
+      setModalOpen(false);
+      setEditingModel(null);
+      form.resetFields();
+    } catch { /* validation error */ }
+  };
+
+  const handleDelete = async (name: string) => {
+    Modal.confirm({
+      title: t('model.deleteConfirm')?.replace('{name}', name) || \`Delete model "\${name}"?\`,
+      onOk: async () => {
+        const updatedModels = models.filter(m => m.name !== name);
+        if (updatedModels.length > 0 && !updatedModels.some(m => m.isDefault)) {
+          updatedModels[0].isDefault = true;
+        }
+
+        const res = await fetch(API, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ models: updatedModels }),
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+          setModels(Array.isArray(data) ? data : []);
+          message.success(t('model.deleteSuccess') || 'Model deleted');
+        }
+      },
+    });
+  };
+
+  const openEditModal = (model: ModelItem) => {
+    setEditingModel(model);
+    form.setFieldsValue({
+      name: model.name,
+      authToken: model.authToken,
+      baseUrl: model.baseUrl,
+      isDefault: model.isDefault,
+    });
+    setModalOpen(true);
+  };
+
+  const openAddModal = () => {
+    setEditingModel(null);
+    form.resetFields();
+    form.setFieldsValue({ isDefault: models.length === 0 });
+    setModalOpen(true);
+  };
+
+  const columns = [
+    {
+      title: t('model.modelName') || 'Model Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (name: string, record: ModelItem) => (
+        <Space>
+          <span style={{ fontWeight: token.fontWeightStrong }}>{name}</span>
+          {record.isDefault && <Tag color="blue">{t('model.default') || 'Default'}</Tag>}
+        </Space>
+      ),
+    },
+    {
+      title: t('model.baseUrl') || 'API Base URL',
+      dataIndex: 'baseUrl',
+      key: 'baseUrl',
+      render: (url: string) => url ? <Typography.Text copyable={{ text: url }} style={{ fontSize: token.fontSizeSM }}>{url}</Typography.Text> : <Typography.Text type="secondary">—</Typography.Text>,
+    },
+    {
+      title: t('model.authToken') || 'Auth Token',
+      dataIndex: 'hasAuthToken',
+      key: 'hasAuthToken',
+      width: 120,
+      render: (has: boolean) => has ? <Tag color="green">{t('model.configured') || 'Configured'}</Tag> : <Tag>{t('model.notSet') || 'Not Set'}</Tag>,
+    },
+    {
+      title: t('common.action') || 'Action',
+      key: 'action',
+      width: 120,
+      render: (_: unknown, record: ModelItem) => (
+        <Space size={0}>
+          <Button type="text" size="small" icon={<EditOutlined />} onClick={() => openEditModal(record)} />
+          {!record.isDefault && (
+            <Button type="text" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.name)} />
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  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 }))]} />
+        <Button type="primary" icon={<AppstoreAddOutlined />} disabled>
+          {t('model.addEngine') || 'Add AI Engine'}
+        </Button>
+      </Flex>
+      <Card
+        title={
+          <Space>
+            <RobotOutlined />
+            <span>Claude Code</span>
+            <Typography.Text type="secondary" style={{ fontWeight: 'normal' }}>
+              {t('model.engine') || 'AI Engine'}
+            </Typography.Text>
+          </Space>
+        }
+        extra={
+          <Button type="primary" size="small" icon={<PlusOutlined />} onClick={openAddModal}>
+            {t('model.addModel') || 'Add Model'}
+          </Button>
+        }
+      >
+        <Table
+          dataSource={models}
+          columns={columns}
+          rowKey="name"
+          loading={loading}
+          pagination={false}
+          size="small"
+        />
+      </Card>
+
+      <Modal
+        title={editingModel ? (t('model.editModel') || 'Edit Model') : (t('model.addModel') || 'Add Model')}
+        open={modalOpen}
+        onOk={handleSave}
+        onCancel={() => { setModalOpen(false); setEditingModel(null); form.resetFields(); }}
+        okText={t('common.save') || 'Save'}
+        cancelText={t('common.cancel') || 'Cancel'}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical" style={{ marginTop: token.marginMD }}>
+          <Form.Item
+            name="name"
+            label={t('model.modelName') || 'Model Name'}
+            rules={[{ required: true, message: t('model.nameRequired') || 'Model name is required' }]}
+          >
+            <Input disabled={!!editingModel} placeholder="e.g. GLM-5.1, Kimi-K2.5" />
+          </Form.Item>
+          <Form.Item
+            name="baseUrl"
+            label={t('model.baseUrl') || 'API Base URL'}
+            rules={[{ required: true, message: t('model.baseUrlRequired') || 'Base URL is required' }]}
+          >
+            <Input placeholder="https://api.example.com" />
+          </Form.Item>
+          <Form.Item
+            name="authToken"
+            label={t('model.authToken') || 'Auth Token'}
+          >
+            <Input.Password placeholder={editingModel?.hasAuthToken ? t('model.tokenMasked') || 'Leave empty to keep current' : t('model.enterToken') || 'Enter auth token'} />
+          </Form.Item>
+          <Form.Item
+            name="isDefault"
+            label={t('model.setDefault') || 'Set as Default'}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+}
+`;
+}
+// ── Skill Management ──
+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=system-settings-page.js.map