@octo-cyber/ai 0.5.1 → 0.5.2

package/web/pages/SkillsPage.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import {
+  RefreshCw,
+  Plus,
+  Loader2,
+  Sparkles,
+} from 'lucide-react'
+
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Tabs, TabsList, TabsTrigger } from '@octo-cyber/ui/components/ui/tabs'
+
+import { skillService } from '../services/skill-service'
+import type { SkillInfo, SkillTargetInfo } from '../services/skill-service'
+import SkillCard from '../components/SkillCard'
+import SkillInstallDialog from '../components/SkillInstallDialog'
+import SkillEditorDialog from '../components/SkillEditorDialog'
+
+type TabFilter = 'all' | 'enabled' | 'installed'
+
+export default function SkillsPage() {
+  const t = useTranslations('aiSkills')
+  const tc = useTranslations('common')
+
+  const [skills, setSkills] = useState<SkillInfo[]>([])
+  const [targets, setTargets] = useState<SkillTargetInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [generating, setGenerating] = useState(false)
+  const [tab, setTab] = useState<TabFilter>('all')
+
+  // Dialog states
+  const [installSkill, setInstallSkill] = useState<SkillInfo | null>(null)
+  const [editSkill, setEditSkill] = useState<SkillInfo | null>(null)
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const [skillList, targetList] = await Promise.all([
+        skillService.list(),
+        skillService.getTargets(),
+      ])
+      setSkills(skillList)
+      setTargets(targetList)
+    } catch {
+      toast.error(t('toast.loadFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => { loadData() }, [loadData])
+
+  const handleGenerate = useCallback(async () => {
+    setGenerating(true)
+    try {
+      const result = await skillService.generate()
+      toast.success(t('toast.generateDone', {
+        created: result.created.length,
+        updated: result.updated.length,
+      }))
+      await loadData()
+    } catch {
+      toast.error(t('toast.generateFailed'))
+    } finally {
+      setGenerating(false)
+    }
+  }, [t, loadData])
+
+  const handleToggle = useCallback(async (id: string) => {
+    try {
+      await skillService.toggle(id)
+      await loadData()
+    } catch {
+      toast.error(t('toast.toggleFailed'))
+    }
+  }, [t, loadData])
+
+  const handleDelete = useCallback(async (id: string) => {
+    try {
+      await skillService.deleteSkill(id)
+      toast.success(t('toast.deleted'))
+      await loadData()
+    } catch {
+      toast.error(t('toast.deleteFailed'))
+    }
+  }, [t, loadData])
+
+  const handleInstallDone = useCallback(() => {
+    setInstallSkill(null)
+    loadData()
+  }, [loadData])
+
+  const handleEditSave = useCallback(async (id: string, content: string) => {
+    try {
+      await skillService.update(id, { content })
+      toast.success(t('toast.saved'))
+      setEditSkill(null)
+      await loadData()
+    } catch {
+      toast.error(t('toast.saveFailed'))
+    }
+  }, [t, loadData])
+
+  // Filter skills by tab
+  const filtered = skills.filter((s) => {
+    if (tab === 'enabled') return s.isEnabled
+    if (tab === 'installed') return s.installedTargets.length > 0
+    return true
+  })
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleGenerate}
+          disabled={generating}
+        >
+          {generating ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <Sparkles className="mr-2 h-4 w-4" />
+          )}
+          {t('actions.generate')}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={loadData}
+          disabled={loading}
+        >
+          <RefreshCw className="mr-2 h-4 w-4" />
+          {tc('refresh')}
+        </Button>
+      </PageHeader>
+
+      <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter)}>
+        <TabsList>
+          <TabsTrigger value="all">{t('tabs.all')}</TabsTrigger>
+          <TabsTrigger value="enabled">{t('tabs.enabled')}</TabsTrigger>
+          <TabsTrigger value="installed">{t('tabs.installed')}</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+          <Sparkles className="mb-2 h-8 w-8" />
+          <p>{t('empty')}</p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-4"
+            onClick={handleGenerate}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            {t('actions.generate')}
+          </Button>
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {filtered.map((skill) => (
+            <SkillCard
+              key={skill.id}
+              skill={skill}
+              targets={targets}
+              onInstall={() => setInstallSkill(skill)}
+              onEdit={() => setEditSkill(skill)}
+              onToggle={() => handleToggle(skill.id)}
+              onDelete={() => handleDelete(skill.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Install Dialog */}
+      {installSkill && (
+        <SkillInstallDialog
+          skill={installSkill}
+          targets={targets}
+          open={!!installSkill}
+          onOpenChange={(open) => { if (!open) setInstallSkill(null) }}
+          onDone={handleInstallDone}
+        />
+      )}
+
+      {/* Editor Dialog */}
+      {editSkill && (
+        <SkillEditorDialog
+          skill={editSkill}
+          open={!!editSkill}
+          onOpenChange={(open) => { if (!open) setEditSkill(null) }}
+          onSave={handleEditSave}
+        />
+      )}
+    </div>
+  )
+}

package/web/services/skill-service.ts

@@ -0,0 +1,89 @@
+import { api } from '@octo-cyber/ui/services/api-client'
+import type { ApiResponse } from '@octo-cyber/ui/types/common'
+
+export interface SkillInfo {
+  id: string
+  name: string
+  description: string
+  sourceModule: string
+  sourceType: 'module' | 'custom'
+  content: string
+  version: string
+  isEnabled: boolean
+  isEdited: boolean
+  installTargets: string | null
+  installedTargets: string[]
+  createdAt: string
+  updatedAt: string
+  lastInstalledAt: string | null
+}
+
+export interface SkillTargetInfo {
+  id: string
+  name: string
+  skillsDir: string
+  detectDir: string
+  isInstalled: boolean
+}
+
+export interface GenerateResult {
+  created: string[]
+  updated: string[]
+  skipped: string[]
+}
+
+export interface InstallResult {
+  installed: string[]
+  failed: Array<{ target: string; error: string }>
+  apiKeyCreated: boolean
+}
+
+export const skillService = {
+  async list(): Promise<SkillInfo[]> {
+    const res = await api.get<ApiResponse<SkillInfo[]>>('/api/v1/skills')
+    return res.data
+  },
+
+  async getById(id: string): Promise<SkillInfo> {
+    const res = await api.get<ApiResponse<SkillInfo>>(`/api/v1/skills/${id}`)
+    return res.data
+  },
+
+  async getTargets(): Promise<SkillTargetInfo[]> {
+    const res = await api.get<ApiResponse<SkillTargetInfo[]>>('/api/v1/skills/targets')
+    return res.data
+  },
+
+  async generate(baseUrl?: string): Promise<GenerateResult> {
+    const res = await api.post<ApiResponse<GenerateResult>>('/api/v1/skills/generate', { baseUrl })
+    return res.data
+  },
+
+  async create(data: { name: string; description: string; content: string }): Promise<SkillInfo> {
+    const res = await api.post<ApiResponse<SkillInfo>>('/api/v1/skills', data)
+    return res.data
+  },
+
+  async update(id: string, data: { name?: string; description?: string; content?: string }): Promise<SkillInfo> {
+    const res = await api.put<ApiResponse<SkillInfo>>(`/api/v1/skills/${id}`, data)
+    return res.data
+  },
+
+  async toggle(id: string): Promise<SkillInfo> {
+    const res = await api.put<ApiResponse<SkillInfo>>(`/api/v1/skills/${id}/toggle`)
+    return res.data
+  },
+
+  async deleteSkill(id: string): Promise<void> {
+    await api.delete<ApiResponse<null>>(`/api/v1/skills/${id}`)
+  },
+
+  async install(id: string, targets: string[], baseUrl?: string): Promise<InstallResult> {
+    const res = await api.post<ApiResponse<InstallResult>>(`/api/v1/skills/${id}/install`, { targets, baseUrl })
+    return res.data
+  },
+
+  async uninstall(id: string, targets: string[]): Promise<void> {
+    await api.post<ApiResponse<unknown>>(`/api/v1/skills/${id}/uninstall`, { targets })
+  },
+}