@octo-cyber/ai 0.5.5 → 0.5.7

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>
+  )
+})

package/web/components/WorkspaceItem.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { memo } from 'react'
+import { useTranslations } from 'next-intl'
+import { Trash2, FolderOpen, HardDrive } 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'
+
+function formatDate(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleString()
+  } catch {
+    return dateStr
+  }
+}
+
+export const WorkspaceItem = memo(function WorkspaceItem({
+  ws,
+  onDelete,
+}: {
+  ws: WorkspaceInfo
+  onDelete: (ws: WorkspaceInfo) => void
+}) {
+  const t = useTranslations('aiCli.workspaces')
+  const tc = useTranslations('common')
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {ws.type === 'persistent' ? (
+              <HardDrive 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 === 'persistent' ? 'default' : 'secondary'}>
+            {ws.type === 'persistent' ? t('type.persistent') : t('type.temp')}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <p className="text-xs text-muted-foreground truncate" title={ws.path}>{ws.path}</p>
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>{formatDate(ws.createdAt)}</span>
+          {ws.expiresAt && (
+            <span className="text-orange-500">{t('expiresAt', { time: formatDate(ws.expiresAt) })}</span>
+          )}
+        </div>
+        <div className="flex justify-end pt-1">
+          <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>
+  )
+})

package/web/components/WorkspaceSelect.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { FolderOpen, GitBranch, Loader2 } from 'lucide-react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@octo-cyber/ui/components/ui/select'
+import { aiCliService, type WorkspaceInfo } from '../services/ai-cli-service'
+
+export interface WorkspaceSelectProps {
+  value?: string
+  onChange?: (value: string) => void
+  disabled?: boolean
+  placeholder?: string
+  className?: string
+  /** Show a "None" option to allow unselecting */
+  allowEmpty?: boolean
+}
+
+const EMPTY_VALUE = '__none__'
+
+export function WorkspaceSelect({
+  value,
+  onChange,
+  disabled,
+  placeholder,
+  className,
+  allowEmpty = false,
+}: WorkspaceSelectProps) {
+  const t = useTranslations('aiCli.workspaces')
+  const [workspaces, setWorkspaces] = useState<WorkspaceInfo[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    setIsLoading(true)
+    aiCliService
+      .getWorkspaces()
+      .then(setWorkspaces)
+      .catch(() => setWorkspaces([]))
+      .finally(() => setIsLoading(false))
+  }, [])
+
+  function handleChange(val: string) {
+    onChange?.(val === EMPTY_VALUE ? '' : val)
+  }
+
+  if (isLoading) {
+    return (
+      <div className={`flex h-9 items-center gap-2 text-sm text-muted-foreground ${className ?? ''}`}>
+        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        <span>{t('loading')}</span>
+      </div>
+    )
+  }
+
+  return (
+    <Select
+      value={value || (allowEmpty ? EMPTY_VALUE : undefined)}
+      onValueChange={handleChange}
+      disabled={disabled || workspaces.length === 0}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder ?? t('selectPlaceholder')} />
+      </SelectTrigger>
+      <SelectContent>
+        {allowEmpty && (
+          <SelectItem value={EMPTY_VALUE}>
+            <span className="text-muted-foreground">{t('noWorkspace')}</span>
+          </SelectItem>
+        )}
+        {workspaces.map((ws) => (
+          <SelectItem key={ws.id} value={ws.id}>
+            <div className="flex items-center gap-2">
+              {ws.type === 'github' ? (
+                <GitBranch className="h-3.5 w-3.5 shrink-0 text-green-500" />
+              ) : (
+                <FolderOpen className="h-3.5 w-3.5 shrink-0 text-blue-500" />
+              )}
+              <span className="truncate">{ws.name}</span>
+              <span className="truncate text-xs text-muted-foreground">
+                {ws.path}
+              </span>
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}