optimize: skills page structure (#905)

src/extensions/registry.ts

@@ -4,7 +4,9 @@ import type {
   NavItemDef,
   RouteDef,
   SettingsSectionDef,
+  SkillDetailMetaProps,
 } from './types';
+import type { ComponentType } from 'react';
 
 class RendererExtensionRegistry {
   private extensions: RendererExtension[] = [];
@@ -56,6 +58,10 @@ class RendererExtensionRegistry {
       .sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
   }
 
+  getSkillDetailMetaComponents(): ComponentType<SkillDetailMetaProps>[] {
+    return this.extensions.flatMap((ext) => ext.skills?.detailMetaComponents ?? []);
+  }
+
   async initializeAll(): Promise<void> {
     for (const ext of this.extensions) {
       try {

src/extensions/types.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import type { Skill } from '../types/skill';
 
 export interface NavItemDef {
   to: string;
@@ -37,11 +38,21 @@ export interface SettingsSectionExtension {
   sections: SettingsSectionDef[];
 }
 
+export interface SkillDetailMetaProps {
+  skill: Skill;
+}
+
+export interface SkillsExtension {
+  id: string;
+  detailMetaComponents?: ComponentType<SkillDetailMetaProps>[];
+}
+
 export interface RendererExtension {
   id: string;
   sidebar?: SidebarExtension;
   routes?: RouteExtension;
   settings?: SettingsSectionExtension;
+  skills?: SkillsExtension;
   i18nResources?: I18nResources;
   setup?(): void | Promise<void>;
   teardown?(): void;

src/pages/Skills/index.tsx

@@ -33,6 +33,7 @@ import { hostApiFetch } from '@/lib/host-api';
 import { trackUiEvent } from '@/lib/telemetry';
 import { toast } from 'sonner';
 import type { Skill } from '@/types/skill';
+import { rendererExtensionRegistry } from '@/extensions/registry';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 
@@ -73,6 +74,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall, onOp
   const [envVars, setEnvVars] = useState<Array<{ key: string; value: string }>>([]);
   const [apiKey, setApiKey] = useState('');
   const [isSaving, setIsSaving] = useState(false);
+  const detailMetaComponents = rendererExtensionRegistry.getSkillDetailMetaComponents();
 
   // Initialize config from skill
   useEffect(() => {
@@ -206,13 +208,16 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall, onOp
             <h2 className="text-[28px] font-serif text-foreground font-normal mb-3 text-center tracking-tight">
               {skill.name}
             </h2>
-            <div className="flex items-center justify-center gap-2.5 mb-6 opacity-80">
+            <div data-skill-detail-meta-row="1" className="flex items-center justify-center gap-2.5 mb-6 opacity-80">
               <Badge variant="secondary" className="font-mono text-[11px] font-medium px-3 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] hover:bg-black/[0.08] dark:hover:bg-white/[0.12] border-0 shadow-none text-foreground/70 transition-colors">
                 v{skill.version}
               </Badge>
               <Badge variant="secondary" className="font-mono text-[11px] font-medium px-3 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] hover:bg-black/[0.08] dark:hover:bg-white/[0.12] border-0 shadow-none text-foreground/70 transition-colors">
                 {skill.isCore ? t('detail.coreSystem') : skill.isBundled ? t('detail.bundled') : t('detail.userInstalled')}
               </Badge>
+              {detailMetaComponents.map((DetailMetaComponent, index) => (
+                <DetailMetaComponent key={`skill-detail-meta-${index}`} skill={skill} />
+              ))}
             </div>
 
             {skill.description && (

vite.config.ts

@@ -86,6 +86,7 @@ export default defineConfig({
       '@': resolve(__dirname, 'src'),
       '@electron': resolve(__dirname, 'electron'),
     },
+    dedupe: ['react', 'react-dom', 'react-i18next', 'zustand', 'sonner', 'lucide-react'],
   },
   server: {
     port: 5173,