@octo-cyber/ai 0.5.4 → 0.5.6

package/web/components/MarketInstallDialog.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { Loader2, FolderOpen } from 'lucide-react'
+
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Checkbox } from '@octo-cyber/ui/components/ui/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@octo-cyber/ui/components/ui/dialog'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@octo-cyber/ui/components/ui/select'
+
+import { skillMarketService } from '../services/skill-market-service'
+import { aiCliService } from '../services/ai-cli-service'
+import type { MarketSkillInfo, SkillTarget } from '../services/skill-market-service'
+
+const AVAILABLE_TARGETS: { id: SkillTarget; label: string }[] = [
+  { id: 'claude', label: 'Claude Code' },
+  { id: 'cursor', label: 'Cursor' },
+  { id: 'codex', label: 'Codex' },
+  { id: 'gemini', label: 'Gemini CLI' },
+]
+
+interface WorkspaceOption {
+  id: string
+  name: string
+  path: string
+}
+
+interface MarketInstallDialogProps {
+  skill: MarketSkillInfo | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onDone: () => void
+}
+
+export default function MarketInstallDialog({
+  skill,
+  open,
+  onOpenChange,
+  onDone,
+}: MarketInstallDialogProps) {
+  const t = useTranslations('aiSkillMarket')
+  const tc = useTranslations('common')
+
+  const [selected, setSelected] = useState<SkillTarget[]>([])
+  const [installing, setInstalling] = useState(false)
+  const [installScope, setInstallScope] = useState<'user' | 'workspace'>('user')
+  const [workspaces, setWorkspaces] = useState<WorkspaceOption[]>([])
+  const [selectedWorkspace, setSelectedWorkspace] = useState<string>('')
+
+  useEffect(() => {
+    if (open && installScope === 'workspace' && workspaces.length === 0) {
+      aiCliService.getWorkspaces().then((list) => {
+        setWorkspaces(list.map((w) => ({ id: w.id, name: w.name, path: w.path })))
+      }).catch(() => { /* ignore */ })
+    }
+  }, [open, installScope, workspaces.length])
+
+  const toggleTarget = useCallback((id: SkillTarget) => {
+    setSelected((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    )
+  }, [])
+
+  const handleInstall = useCallback(async () => {
+    if (!skill || selected.length === 0) return
+    if (installScope === 'workspace' && !selectedWorkspace) {
+      toast.error(t('selectWorkspace'))
+      return
+    }
+    setInstalling(true)
+    try {
+      const params: Parameters<typeof skillMarketService.install>[0] = {
+        downloadUrl: skill.downloadUrl,
+        name: skill.name,
+        targets: selected,
+      }
+      if (installScope === 'workspace') {
+        params.workspacePath = selectedWorkspace
+      }
+      const result = await skillMarketService.install(params)
+      if (result.failed.length > 0) {
+        const failedNames = result.failed.map((f) => f.target).join(', ')
+        toast.error(`${t('installFailed')}: ${failedNames}`)
+      } else {
+        toast.success(t('installSuccess'))
+      }
+      onDone()
+    } catch {
+      toast.error(t('installFailed'))
+    } finally {
+      setInstalling(false)
+    }
+  }, [skill, selected, installScope, selectedWorkspace, t, onDone])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('installTitle')}</DialogTitle>
+          <DialogDescription>
+            {t('installDesc')}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 py-4">
+          <p className="text-sm font-medium">{t('selectTargets')}</p>
+          {AVAILABLE_TARGETS.map((tgt) => (
+            <div key={tgt.id} className="flex items-center space-x-3">
+              <Checkbox
+                id={`market-target-${tgt.id}`}
+                checked={selected.includes(tgt.id)}
+                onCheckedChange={() => toggleTarget(tgt.id)}
+              />
+              <Label htmlFor={`market-target-${tgt.id}`} className="text-sm">
+                {tgt.label}
+              </Label>
+            </div>
+          ))}
+        </div>
+
+        {/* Install scope: user-level or workspace-level */}
+        <div className="space-y-2">
+          <p className="text-sm font-medium">{t('installScopeLabel')}</p>
+          <div className="flex gap-2">
+            <Button
+              variant={installScope === 'user' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setInstallScope('user')}
+            >
+              {t('userLevel')}
+            </Button>
+            <Button
+              variant={installScope === 'workspace' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setInstallScope('workspace')}
+            >
+              <FolderOpen className="mr-1 h-3.5 w-3.5" />
+              {t('workspaceLevel')}
+            </Button>
+          </div>
+
+          {installScope === 'user' && (
+            <p className="text-xs text-muted-foreground">{t('userLevelDesc')}</p>
+          )}
+
+          {installScope === 'workspace' && (
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground">{t('workspaceLevelDesc')}</p>
+              <Select value={selectedWorkspace} onValueChange={setSelectedWorkspace}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('selectWorkspace')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {workspaces.map((ws) => (
+                    <SelectItem key={ws.id} value={ws.path}>
+                      {ws.name} — {ws.path}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {tc('cancel')}
+          </Button>
+          <Button
+            onClick={handleInstall}
+            disabled={installing || selected.length === 0}
+          >
+            {installing && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {installing ? t('installing') : t('install')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/web/components/MarketSkillCard.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { memo } from 'react'
+import { useTranslations } from 'next-intl'
+import { Download, Star, ExternalLink } from 'lucide-react'
+
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@octo-cyber/ui/components/ui/card'
+
+import type { MarketSkillInfo } from '../services/skill-market-service'
+
+interface MarketSkillCardProps {
+  skill: MarketSkillInfo
+  onInstall: () => void
+  className?: string
+}
+
+function MarketSkillCard({
+  skill,
+  onInstall,
+  className,
+}: MarketSkillCardProps) {
+  const t = useTranslations('aiSkillMarket')
+
+  return (
+    <Card className={`flex flex-col ${className ?? ''}`}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-semibold">{skill.name}</CardTitle>
+        <CardDescription className="line-clamp-2 text-sm">
+          {skill.description}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="flex flex-1 flex-col justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <ExternalLink className="h-3 w-3" />
+            {t('from')} {skill.repo}
+          </span>
+          {skill.stars != null && (
+            <span className="flex items-center gap-1">
+              <Star className="h-3 w-3" />
+              {skill.stars}
+            </span>
+          )}
+          {skill.category && (
+            <Badge variant="outline" className="text-xs">
+              {skill.category}
+            </Badge>
+          )}
+        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full"
+          onClick={onInstall}
+        >
+          <Download className="mr-2 h-4 w-4" />
+          {t('install')}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default memo(MarketSkillCard)

package/web/components/RepoList.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import {
+  Loader2, Package, Star, ChevronDown, ChevronRight,
+} from 'lucide-react'
+import type { MarketSkillInfo, SkillRepo } from '../services/skill-market-service'
+import MarketSkillCard from './MarketSkillCard'
+
+interface RepoListProps {
+  repos: SkillRepo[]
+  loading: boolean
+  expandedRepo: string | null
+  repoSkills: Record<string, MarketSkillInfo[]>
+  loadingRepo: string | null
+  onToggleRepo: (owner: string, repo: string) => void
+  onInstall: (skill: MarketSkillInfo) => void
+  t: (key: string) => string
+}
+
+export function RepoList({
+  repos, loading, expandedRepo, repoSkills, loadingRepo,
+  onToggleRepo, onInstall, t,
+}: RepoListProps) {
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (repos.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <Package className="mb-2 h-8 w-8" />
+        <p>{t('noResults')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {repos.map((repo) => {
+        const key = `${repo.owner}/${repo.repo}`
+        const isExpanded = expandedRepo === key
+        const skills = repoSkills[key]
+        const isLoading = loadingRepo === key
+
+        return (
+          <div key={key} className="rounded-lg border border-border">
+            <button
+              type="button"
+              className="flex w-full items-center justify-between p-4 text-left hover:bg-muted/50"
+              onClick={() => onToggleRepo(repo.owner, repo.repo)}
+            >
+              <div className="flex flex-col gap-1">
+                <span className="font-medium">{key}</span>
+                <span className="text-sm text-muted-foreground">{repo.description}</span>
+              </div>
+              <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <Star className="h-3.5 w-3.5" />{repo.stars}
+                </span>
+                {repo.skillCount != null && (
+                  <span>{repo.skillCount} {t('skills')}</span>
+                )}
+                {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+              </div>
+            </button>
+
+            {isExpanded && (
+              <div className="border-t border-border p-4">
+                {isLoading ? (
+                  <div className="flex items-center justify-center py-6">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                  </div>
+                ) : skills && skills.length > 0 ? (
+                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {skills.map((skill) => (
+                      <MarketSkillCard
+                        key={`${skill.repo}/${skill.path}`}
+                        skill={skill}
+                        onInstall={() => onInstall(skill)}
+                      />
+                    ))}
+                  </div>
+                ) : skills ? (
+                  <p className="py-4 text-center text-sm text-muted-foreground">{t('noResults')}</p>
+                ) : null}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/web/components/SearchResultsGrid.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { Loader2, Search, Package } from 'lucide-react'
+import type { MarketSkillInfo } from '../services/skill-market-service'
+import MarketSkillCard from './MarketSkillCard'
+
+interface SearchResultsGridProps {
+  results: MarketSkillInfo[]
+  hasSearched: boolean
+  searching: boolean
+  onInstall: (skill: MarketSkillInfo) => void
+  t: (key: string) => string
+}
+
+export function SearchResultsGrid({
+  results, hasSearched, searching, onInstall, t,
+}: SearchResultsGridProps) {
+  if (searching) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (!hasSearched) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <Search className="mb-2 h-8 w-8" />
+        <p>{t('searchPlaceholder')}</p>
+      </div>
+    )
+  }
+
+  if (results.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <Package className="mb-2 h-8 w-8" />
+        <p>{t('noResults')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {results.map((skill) => (
+        <MarketSkillCard
+          key={`${skill.repo}/${skill.path}`}
+          skill={skill}
+          onInstall={() => onInstall(skill)}
+        />
+      ))}
+    </div>
+  )
+}

package/web/components/SkillCard.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { memo } from 'react'
 import { useTranslations } from 'next-intl'
 import {
   Download,
@@ -39,7 +40,7 @@ interface SkillCardProps {
   onDelete: () => void
 }
 
-export default function SkillCard({
+function SkillCard({
   skill,
   targets,
   onInstall,
@@ -137,3 +138,5 @@ export default function SkillCard({
     </Card>
   )
 }
+
+export default memo(SkillCard)

package/web/components/ToolCard.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { Loader2, RefreshCw, Play, CheckCircle2, XCircle, Terminal, Globe } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@octo-cyber/ui/components/ui/card'
+import type { CliToolInfo } from '../services/ai-cli-service'
+
+function ToolStatusIcon({ isAvailable }: { isAvailable: boolean }) {
+  if (isAvailable) return <CheckCircle2 className="h-5 w-5 text-green-500" />
+  return <XCircle className="h-5 w-5 text-muted-foreground" />
+}
+
+export function ToolCard({
+  tool,
+  onTest,
+  onHealthCheck,
+  isChecking,
+  installedSkills,
+}: {
+  tool: CliToolInfo
+  onTest: (tool: CliToolInfo) => void
+  onHealthCheck: (toolName: string) => void
+  isChecking: boolean
+  installedSkills: Array<{ name: string; skillDir: string }>
+}) {
+  const t = useTranslations('aiCli')
+  const ToolIcon = tool.toolType === 'api' ? Globe : Terminal
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <div className="flex items-center gap-3">
+          <ToolIcon className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <CardTitle className="text-base">{tool.displayName}</CardTitle>
+            <CardDescription className="text-xs">{tool.name}</CardDescription>
+          </div>
+        </div>
+        <ToolStatusIcon isAvailable={tool.available} />
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 text-sm">
+            <Badge variant={tool.available ? 'default' : 'secondary'}>
+              {tool.available ? t('status.available') : t('status.unavailable')}
+            </Badge>
+            <Badge variant="outline" className="text-xs">{t(`toolType.${tool.toolType}`)}</Badge>
+            {tool.version && <span className="text-muted-foreground">v{tool.version}</span>}
+            {tool.models && tool.models.length > 0 && (
+              <span className="text-muted-foreground text-xs">
+                {t('modelCount', { count: tool.models.length })}
+              </span>
+            )}
+          </div>
+          {tool.path && (
+            <p className="text-xs text-muted-foreground truncate" title={tool.path}>{tool.path}</p>
+          )}
+          {installedSkills.length > 0 && (
+            <div className="space-y-1.5 pt-1 border-t">
+              <p className="text-xs font-medium text-muted-foreground pt-1">
+                {t('installedSkills')} ({installedSkills.length})
+              </p>
+              <div className="flex flex-wrap gap-1">
+                {installedSkills.map((skill) => (
+                  <Badge key={skill.name} variant="outline" className="text-xs">{skill.name}</Badge>
+                ))}
+              </div>
+            </div>
+          )}
+          <div className="flex gap-2 pt-1">
+            <Button variant="outline" size="sm" onClick={() => onHealthCheck(tool.name)} disabled={isChecking}>
+              {isChecking ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : <RefreshCw className="mr-1 h-3 w-3" />}
+              {t('actions.healthCheck')}
+            </Button>
+            {tool.available && (
+              <Button variant="outline" size="sm" onClick={() => onTest(tool)}>
+                <Play className="mr-1 h-3 w-3" />
+                {t('actions.testRun')}
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/web/components/WorkspaceCard.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { memo } from 'react'
+import { useTranslations } from 'next-intl'
+import {
+  Trash2,
+  FolderOpen,
+  Github,
+  Loader2,
+  GitPullRequest,
+  GitBranch,
+} from 'lucide-react'
+
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@octo-cyber/ui/components/ui/card'
+import type { WorkspaceInfo } from '../services/ai-cli-service'
+
+type InstalledSkillsMap = Record<string, Array<{ name: string; skillDir: string }>>
+
+function formatDate(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleString()
+  } catch {
+    return dateStr
+  }
+}
+
+export const WorkspaceCard = memo(function WorkspaceCard({
+  ws,
+  onDelete,
+  onPull,
+  isPulling,
+  wsSkills,
+}: {
+  ws: WorkspaceInfo
+  onDelete: (ws: WorkspaceInfo) => void
+  onPull: (id: string) => void
+  isPulling: boolean
+  wsSkills: InstalledSkillsMap
+}) {
+  const t = useTranslations('aiCli.workspaces')
+  const tc = useTranslations('common')
+
+  const allSkills = Object.entries(wsSkills).flatMap(([target, skills]) =>
+    skills.map((s) => ({ ...s, target })),
+  )
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {ws.type === 'github' ? (
+              <Github className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <FolderOpen className="h-4 w-4 text-muted-foreground" />
+            )}
+            <CardTitle className="text-sm">
+              {ws.name || ws.id.slice(0, 8)}
+            </CardTitle>
+          </div>
+          <Badge variant={ws.type === 'github' ? 'default' : 'secondary'}>
+            {t(`type.${ws.type}`)}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {ws.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">
+            {ws.description}
+          </p>
+        )}
+        <p className="text-xs text-muted-foreground truncate" title={ws.path}>
+          {ws.path}
+        </p>
+        {ws.type === 'local' && ws.repoUrl && (
+          <p className="text-xs text-muted-foreground truncate" title={ws.repoUrl}>
+            <GitBranch className="inline h-3 w-3 mr-1" />
+            {ws.repoUrl}
+            {ws.branch && ` (${ws.branch})`}
+          </p>
+        )}
+        {ws.type === 'github' && ws.repoUrl && (
+          <p className="text-xs text-muted-foreground truncate" title={ws.repoUrl}>
+            {ws.repoUrl}
+          </p>
+        )}
+        {ws.type === 'github' && ws.branch && (
+          <p className="text-xs text-muted-foreground">
+            {t('branch', { branch: ws.branch })}
+          </p>
+        )}
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>{formatDate(ws.createdAt)}</span>
+        </div>
+        {allSkills.length > 0 && (
+          <div className="space-y-1.5 pt-1 border-t">
+            <p className="text-xs font-medium text-muted-foreground pt-1">
+              {t('installedSkills')} ({allSkills.length})
+            </p>
+            <div className="flex flex-wrap gap-1">
+              {allSkills.map((skill) => (
+                <Badge key={`${skill.target}-${skill.name}`} variant="outline" className="text-xs">
+                  {skill.name}
+                  <span className="ml-1 text-muted-foreground">({skill.target})</span>
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+        <div className="flex justify-end gap-2 pt-1">
+          {ws.type === 'github' && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPull(ws.id)}
+              disabled={isPulling}
+            >
+              {isPulling ? (
+                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+              ) : (
+                <GitPullRequest className="mr-1 h-3 w-3" />
+              )}
+              {isPulling ? t('pulling') : t('actions.pull')}
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:text-destructive"
+            onClick={() => onDelete(ws)}
+          >
+            <Trash2 className="mr-1 h-3 w-3" />
+            {tc('delete')}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+})