fix: import github skill directories

2026-06-11 00:06:04 +00:00 · 2026-05-18 17:26:35 +08:00
parent bf8b51569f
commit 651904a5d4
6 changed files with 144 additions and 100 deletions
--- a/web/src/app/home/add-extension/page.tsx
+++ b/web/src/app/home/add-extension/page.tsx
@@ -24,8 +24,14 @@ import {
  Loader2,
  CheckCircle2,
  XCircle,
+  CircleHelp,
 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { httpClient, systemInfo } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
@@ -855,9 +861,23 @@ function AddExtensionContent() {
              <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">
                {githubInstallStatus === GithubInstallStatus.WAIT_INPUT && (
                  <div className="space-y-2">
-                    <p className="text-xs text-muted-foreground">
-                      {t('addExtension.githubUrlHelp')}
-                    </p>
+                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <span>{t('addExtension.githubUrlHelp')}</span>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button
+                            type="button"
+                            className="inline-flex size-4 items-center justify-center rounded-full transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                            aria-label={t('addExtension.githubUrlTooltip')}
+                          >
+                            <CircleHelp className="size-3.5" />
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="top" className="max-w-[280px]">
+                          {t('addExtension.githubUrlTooltip')}
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
                    <Input
                      placeholder={t('addExtension.githubUrlPlaceholder')}
                      value={githubURL}
@@ -866,9 +886,6 @@ function AddExtensionContent() {
                        if (e.key === 'Enter') handleGithubAddressSubmit();
                      }}
                    />
-                    <p className="text-[11px] leading-relaxed text-muted-foreground">
-                      {t('addExtension.skillMdUrlHelp')}
-                    </p>
                    <Button
                      className="w-full"
                      onClick={handleGithubAddressSubmit}
--- a/web/src/app/home/skills/components/skill-form/SkillForm.tsx
+++ b/web/src/app/home/skills/components/skill-form/SkillForm.tsx
@@ -214,7 +214,7 @@ const FileTree = forwardRef<FileTreeHandle, FileTreeProps>(function FileTree(

  return (
    <div className="space-y-2">
-      <div className="max-h-48 space-y-1 overflow-y-auto">
+      <div className="max-h-[min(46vh,32rem)] space-y-1 overflow-y-auto overscroll-contain pr-1">
        {rootEntries.length === 0 && !loading && (
          <div className="text-sm text-muted-foreground py-2">
            {t('skills.noFiles')}
@@ -330,24 +330,9 @@ export default function SkillForm({
    }
  };

-  const handleContentChange = (content: string) => {
+  const handleInstructionDraftChange = (content: string) => {
    setFileContent(content);
-    // If editing SKILL.md, sync to skill.instructions
-    if (selectedFile === 'SKILL.md' || selectedFile?.endsWith('/SKILL.md')) {
-      setSkill((prev) => ({ ...prev, instructions: content }));
-    }
-  };
-
-  const handleSaveFile = async () => {
-    if (!initSkillName || !selectedFile) return;
-
-    try {
-      await httpClient.writeSkillFile(initSkillName, selectedFile, fileContent);
-      toast.success(t('skills.saveFileSuccess'));
-    } catch (error) {
-      console.error('Failed to save file:', error);
-      toast.error(t('skills.saveFileError') + String(error));
-    }
+    setSkill((prev) => ({ ...prev, instructions: content }));
  };

  const handleSubmit = async (e: FormEvent) => {
@@ -462,23 +447,12 @@ export default function SkillForm({
      <Textarea
        id="instructions"
        value={fileContent}
-        onChange={(e) => handleContentChange(e.target.value)}
+        onChange={(e) => handleInstructionDraftChange(e.target.value)}
+        readOnly={Boolean(initSkillName)}
        placeholder={t('skills.instructionsPlaceholder')}
        rows={16}
-        className="min-h-[360px] resize-y font-mono text-sm lg:min-h-[calc(100vh-220px)]"
+        className="min-h-[360px] resize-y font-mono text-sm read-only:cursor-default read-only:bg-muted/30 lg:min-h-[calc(100vh-220px)]"
      />
-      {selectedFile &&
-        selectedFile !== 'SKILL.md' &&
-        !selectedFile.endsWith('/SKILL.md') && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={handleSaveFile}
-          >
-            {t('skills.saveFile')}
-          </Button>
-        )}
    </div>
  );

--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -1487,16 +1487,13 @@ const enUS = {
    uploadHint: 'Supports .zip (skills) and .lbpkg (plugins) files',
    orContinueWith: 'or choose an action below',
    addMCPServerHint: 'Connect an MCP tool server extension',
-    installFromGithub: 'Install Plugin or Skill from GitHub',
-    installFromGithubHint:
-      'Supports GitHub Release plugin packages and direct GitHub SKILL.md imports',
-    githubUrlHelp:
-      'Paste a GitHub repository URL to install a plugin. To install a Skill, paste the GitHub SKILL.md file URL.',
-    githubUrlPlaceholder:
-      'e.g. https://github.com/owner/repo or https://github.com/owner/repo/blob/main/path/SKILL.md',
+    installFromGithub: 'Install from GitHub',
+    installFromGithubHint: 'Plugin package or Skill (SKILL.md)',
+    githubUrlHelp: 'Paste a GitHub URL',
+    githubUrlTooltip:
+      'Plugin: paste a repository, Release, or Tag URL. Skill: paste the SKILL.md page URL inside the skill directory.',
+    githubUrlPlaceholder: 'GitHub repository, Release, or SKILL.md link',
    githubUrlRequired: 'Enter a GitHub URL',
-    skillMdUrlHelp:
-      'For Skills, copy the exact SKILL.md file link from the skill directory in GitHub.',
    previewSkill: 'Preview Skill',
    noSkillPreviewFound: 'No importable Skill found',
    createSkill: 'Create New Skill',
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -1426,18 +1426,15 @@ const zhHans = {
    uploadHint: '支持 .zip（技能）和 .lbpkg（插件）文件',
    orContinueWith: '或选择以下操作',
    addMCPServerHint: '连接一个 MCP 工具服务器扩展',
-    installFromGithub: '从 GitHub 安装插件或 Skill',
-    installFromGithubHint:
-      '支持 GitHub Release 插件包，也支持直接导入 GitHub 上的 SKILL.md',
-    githubUrlHelp:
-      '粘贴 GitHub 仓库地址安装插件；如果要安装 Skill，请粘贴 GitHub 上的 SKILL.md 文件地址。',
-    githubUrlPlaceholder:
-      '例如 https://github.com/owner/repo 或 https://github.com/owner/repo/blob/main/path/SKILL.md',
+    installFromGithub: '从 GitHub 安装',
+    installFromGithubHint: '插件包或技能（SKILL.md）',
+    githubUrlHelp: '粘贴 GitHub 地址',
+    githubUrlTooltip:
+      '插件：粘贴仓库、Release 或 Tag 地址。技能：粘贴技能目录里的 SKILL.md 页面地址。',
+    githubUrlPlaceholder: 'GitHub 仓库、Release 或 SKILL.md 链接',
    githubUrlRequired: '请输入 GitHub 地址',
-    skillMdUrlHelp:
-      'Skill 需要复制具体文件链接，例如仓库中某个技能目录下的 SKILL.md 页面地址。',
-    previewSkill: '预览 Skill',
-    noSkillPreviewFound: '未找到可导入的 Skill',
+    previewSkill: '预览技能',
+    noSkillPreviewFound: '未找到可导入的技能',
    createSkill: '创建新的技能',
    createSkillHint: '手动创建一个新的技能扩展',
    unsupportedFileType: '不支持的文件类型，仅支持 .zip 和 .lbpkg 文件',
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -1332,18 +1332,15 @@ const zhHant = {
    uploadHint: '支援 .zip（技能）和 .lbpkg（插件）檔案',
    orContinueWith: '或選擇以下操作',
    addMCPServerHint: '連接一個 MCP 工具伺服器擴充',
-    installFromGithub: '從 GitHub 安裝插件或 Skill',
-    installFromGithubHint:
-      '支援 GitHub Release 插件包，也支援直接匯入 GitHub 上的 SKILL.md',
-    githubUrlHelp:
-      '貼上 GitHub 倉庫地址安裝插件；如果要安裝 Skill，請貼上 GitHub 上的 SKILL.md 檔案地址。',
-    githubUrlPlaceholder:
-      '例如 https://github.com/owner/repo 或 https://github.com/owner/repo/blob/main/path/SKILL.md',
+    installFromGithub: '從 GitHub 安裝',
+    installFromGithubHint: '插件包或技能（SKILL.md）',
+    githubUrlHelp: '貼上 GitHub 地址',
+    githubUrlTooltip:
+      '插件：貼上倉庫、Release 或 Tag 地址。技能：貼上技能目錄裡的 SKILL.md 頁面地址。',
+    githubUrlPlaceholder: 'GitHub 倉庫、Release 或 SKILL.md 連結',
    githubUrlRequired: '請輸入 GitHub 地址',
-    skillMdUrlHelp:
-      'Skill 需要複製具體檔案連結，例如倉庫中某個技能目錄下的 SKILL.md 頁面地址。',
-    previewSkill: '預覽 Skill',
-    noSkillPreviewFound: '未找到可匯入的 Skill',
+    previewSkill: '預覽技能',
+    noSkillPreviewFound: '未找到可匯入的技能',
    createSkill: '建立新的技能',
    createSkillHint: '手動建立一個新的技能擴充',
    unsupportedFileType: '不支援的檔案類型，僅支援 .zip 和 .lbpkg 檔案',