@octo-cyber/ai 0.5.5 → 0.5.7

package/web/components/CreateWorkspaceDialog.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { FolderOpen, Github, Loader2 } from 'lucide-react'
+
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Input } from '@octo-cyber/ui/components/ui/input'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
+} from '@octo-cyber/ui/components/ui/dialog'
+import { Tabs, TabsList, TabsTrigger } from '@octo-cyber/ui/components/ui/tabs'
+import { aiCliService } from '../services/ai-cli-service'
+import type { DetectedGitInfo } from '../services/ai-cli-service'
+import { LocalPathSection } from './LocalPathSection'
+
+type WorkspaceType = 'local' | 'github'
+
+export function CreateWorkspaceDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onCreated: () => void
+}) {
+  const t = useTranslations('aiCli.workspaces')
+  const tc = useTranslations('common')
+
+  const [createType, setCreateType] = useState<WorkspaceType>('local')
+  const [createName, setCreateName] = useState('')
+  const [createDescription, setCreateDescription] = useState('')
+  const [createLocalPath, setCreateLocalPath] = useState('')
+  const [createRepoUrl, setCreateRepoUrl] = useState('')
+  const [createBranch, setCreateBranch] = useState('')
+  const [detectedGitInfo, setDetectedGitInfo] = useState<DetectedGitInfo | null>(null)
+  const [isCreating, setIsCreating] = useState(false)
+
+  const resetForm = () => {
+    setCreateType('local')
+    setCreateName('')
+    setCreateDescription('')
+    setCreateLocalPath('')
+    setCreateRepoUrl('')
+    setCreateBranch('')
+    setDetectedGitInfo(null)
+  }
+
+  const handleDirSelected = (path: string, suggestedName: string, gitInfo: DetectedGitInfo | null) => {
+    if (!createName.trim()) setCreateName(suggestedName)
+    setDetectedGitInfo(gitInfo)
+    if (gitInfo?.isGitRepo && gitInfo.remoteUrl) setCreateRepoUrl(gitInfo.remoteUrl)
+    if (gitInfo?.isGitRepo && gitInfo.branch) setCreateBranch(gitInfo.branch)
+  }
+
+  const handleCreate = async () => {
+    if (!createName.trim()) return
+    setIsCreating(true)
+    try {
+      if (createType === 'local') {
+        if (!createLocalPath.trim()) return
+        await aiCliService.createWorkspace({
+          type: 'local', name: createName.trim(),
+          description: createDescription.trim() || undefined,
+          localPath: createLocalPath.trim(),
+          repoUrl: detectedGitInfo?.remoteUrl || undefined,
+          branch: detectedGitInfo?.branch || undefined,
+        })
+      } else {
+        if (!createRepoUrl.trim() || !createBranch.trim()) return
+        await aiCliService.createWorkspace({
+          type: 'github', name: createName.trim(),
+          description: createDescription.trim() || undefined,
+          repoUrl: createRepoUrl.trim(),
+          branch: createBranch.trim(),
+        })
+      }
+      onOpenChange(false)
+      resetForm()
+      onCreated()
+    } catch {
+      toast.error(t('toast.createFailed'))
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  const isValid = createName.trim() !== '' && (
+    createType === 'local'
+      ? createLocalPath.trim() !== ''
+      : createRepoUrl.trim() !== '' && createBranch.trim() !== ''
+  )
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) resetForm()
+    onOpenChange(nextOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t('createDialog.title')}</DialogTitle>
+          <DialogDescription>{t('createDialog.description')}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Tabs value={createType} onValueChange={(v) => setCreateType(v as WorkspaceType)}>
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="local"><FolderOpen className="mr-1 h-3 w-3" />{t('createDialog.typeLocal')}</TabsTrigger>
+              <TabsTrigger value="github"><Github className="mr-1 h-3 w-3" />{t('createDialog.typeGithub')}</TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          {createType === 'local' ? (
+            <LocalPathSection
+              localPath={createLocalPath}
+              onLocalPathChange={setCreateLocalPath}
+              onDirSelected={handleDirSelected}
+              t={t}
+            />
+          ) : (
+            <>
+              <div className="space-y-2">
+                <Label>{t('createDialog.repoUrlLabel')}</Label>
+                <Input placeholder={t('createDialog.repoUrlPlaceholder')} value={createRepoUrl} onChange={(e) => setCreateRepoUrl(e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label>{t('createDialog.branchLabel')}</Label>
+                <Input placeholder={t('createDialog.branchPlaceholder')} value={createBranch} onChange={(e) => setCreateBranch(e.target.value)} />
+              </div>
+            </>
+          )}
+
+          <div className="space-y-2">
+            <Label>{t('createDialog.nameLabel')}</Label>
+            <Input placeholder={t('createDialog.namePlaceholder')} value={createName} onChange={(e) => setCreateName(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label>{t('createDialog.descriptionLabel')}</Label>
+            <Textarea placeholder={t('createDialog.descriptionPlaceholder')} value={createDescription} onChange={(e) => setCreateDescription(e.target.value)} rows={2} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>{tc('cancel')}</Button>
+          <Button onClick={handleCreate} disabled={isCreating || !isValid}>
+            {isCreating && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
+            {tc('create')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/web/components/DirBrowser.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { FolderOpen, ChevronUp, Check, Loader2 } from 'lucide-react'
+
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { aiCliService } from '../services/ai-cli-service'
+import type { DirEntry } from '../services/ai-cli-service'
+
+export function DirBrowser({
+  onSelect,
+  initialPath = '/',
+}: {
+  onSelect: (path: string) => void
+  initialPath?: string
+}) {
+  const t = useTranslations('aiCli.workspaces.createDialog')
+  const [currentPath, setCurrentPath] = useState(initialPath)
+  const [entries, setEntries] = useState<DirEntry[]>([])
+  const [loading, setLoading] = useState(false)
+
+  const loadDir = useCallback(async (dirPath: string) => {
+    setLoading(true)
+    try {
+      const data = await aiCliService.browseDir(dirPath)
+      setEntries(data)
+      setCurrentPath(dirPath)
+    } catch {
+      setEntries([])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    loadDir(initialPath)
+  }, [initialPath, loadDir])
+
+  const goUp = () => {
+    const parent = currentPath.replace(/\/[^/]+\/?$/, '') || '/'
+    loadDir(parent)
+  }
+
+  return (
+    <div className="border rounded-md">
+      <div className="flex items-center gap-1 p-2 border-b bg-muted/50">
+        <Button variant="ghost" size="sm" className="h-7 px-2" onClick={goUp}>
+          <ChevronUp className="h-3 w-3 mr-1" />
+          {t('parentDir')}
+        </Button>
+        <span className="text-xs text-muted-foreground truncate flex-1" title={currentPath}>
+          {currentPath}
+        </span>
+        <Button size="sm" className="h-7" onClick={() => onSelect(currentPath)}>
+          <Check className="h-3 w-3 mr-1" />
+          {t('selectThisDir')}
+        </Button>
+      </div>
+      <div className="max-h-48 overflow-y-auto">
+        {loading ? (
+          <div className="flex items-center justify-center py-6">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          </div>
+        ) : entries.length === 0 ? (
+          <div className="flex items-center justify-center py-6">
+            <p className="text-xs text-muted-foreground">{t('emptyDir')}</p>
+          </div>
+        ) : (
+          entries.map((entry) => (
+            <button
+              key={entry.path}
+              type="button"
+              className="flex items-center gap-2 w-full px-3 py-1.5 text-left text-sm hover:bg-accent transition-colors"
+              onClick={() => loadDir(entry.path)}
+            >
+              <FolderOpen className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+              <span className="truncate">{entry.name}</span>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

package/web/components/GithubTokenDialog.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { Loader2, AlertTriangle, CheckCircle2 } from 'lucide-react'
+
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Input } from '@octo-cyber/ui/components/ui/input'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@octo-cyber/ui/components/ui/dialog'
+import { skillMarketService } from '../services/skill-market-service'
+import type { GithubTokenStatus } from '../services/skill-market-service'
+
+export function GithubTokenDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const t = useTranslations('aiSkillMarket.tokenConfig')
+  const tc = useTranslations('common')
+
+  const [status, setStatus] = useState<GithubTokenStatus | null>(null)
+  const [tokenInput, setTokenInput] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (!open) return
+    setLoading(true)
+    skillMarketService.getTokenStatus()
+      .then(setStatus)
+      .catch(() => setStatus(null))
+      .finally(() => setLoading(false))
+  }, [open])
+
+  const handleSave = async () => {
+    if (!tokenInput.trim()) return
+    setSaving(true)
+    try {
+      const newStatus = await skillMarketService.setToken(tokenInput.trim())
+      setStatus(newStatus)
+      setTokenInput('')
+      toast.success(t('saved'))
+    } catch {
+      toast.error(t('saveFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleClear = async () => {
+    setSaving(true)
+    try {
+      const newStatus = await skillMarketService.clearToken()
+      setStatus(newStatus)
+      setTokenInput('')
+      toast.success(t('cleared'))
+    } catch {
+      toast.error(t('saveFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('title')}</DialogTitle>
+          <DialogDescription>{t('description')}</DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-6">
+            <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Current status */}
+            {status?.hasToken ? (
+              <div className="flex items-center gap-2 rounded-md border p-3 bg-muted/30">
+                <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium">{t('currentToken')}</p>
+                  <p className="text-xs text-muted-foreground font-mono truncate">
+                    {status.maskedToken}
+                  </p>
+                </div>
+                <Badge variant="outline" className="text-xs shrink-0">
+                  {status.source === 'env' ? t('sourceEnv') : t('sourceConfig')}
+                </Badge>
+              </div>
+            ) : (
+              <div className="flex items-start gap-2 rounded-md border border-yellow-500/30 p-3 bg-yellow-500/5">
+                <AlertTriangle className="h-4 w-4 text-yellow-500 shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm font-medium">{t('noToken')}</p>
+                  <p className="text-xs text-muted-foreground">{t('noTokenHint')}</p>
+                </div>
+              </div>
+            )}
+
+            {/* Token input */}
+            <div className="space-y-2">
+              <Label>{t('inputLabel')}</Label>
+              <Input
+                type="password"
+                placeholder={t('inputPlaceholder')}
+                value={tokenInput}
+                onChange={(e) => setTokenInput(e.target.value)}
+              />
+            </div>
+          </div>
+        )}
+
+        <DialogFooter className="gap-2">
+          {status?.hasToken && status.source === 'config' && (
+            <Button
+              variant="outline"
+              onClick={handleClear}
+              disabled={saving}
+              className="text-destructive hover:text-destructive"
+            >
+              {t('clear')}
+            </Button>
+          )}
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {tc('cancel')}
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={saving || !tokenInput.trim()}
+          >
+            {saving && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
+            {t('save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/web/components/LocalPathSection.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useState } from 'react'
+import { Search, Loader2, GitBranch } 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 { Input } from '@octo-cyber/ui/components/ui/input'
+import { Label } from '@octo-cyber/ui/components/ui/label'
+import { aiCliService } from '../services/ai-cli-service'
+import type { DetectedGitInfo } from '../services/ai-cli-service'
+import { DirBrowser } from './DirBrowser'
+
+interface LocalPathSectionProps {
+  localPath: string
+  onLocalPathChange: (path: string) => void
+  onDirSelected: (path: string, suggestedName: string, gitInfo: DetectedGitInfo | null) => void
+  t: ReturnType<typeof useTranslations>
+}
+
+export function LocalPathSection({ localPath, onLocalPathChange, onDirSelected, t }: LocalPathSectionProps) {
+  const [showBrowser, setShowBrowser] = useState(false)
+  const [gitInfo, setGitInfo] = useState<DetectedGitInfo | null>(null)
+  const [isDetectingGit, setIsDetectingGit] = useState(false)
+
+  const handleDirSelect = async (dirPath: string) => {
+    onLocalPathChange(dirPath)
+    setShowBrowser(false)
+    const suggestedName = dirPath.split('/').filter(Boolean).pop() || ''
+    setIsDetectingGit(true)
+    setGitInfo(null)
+    let detected: DetectedGitInfo | null = null
+    try {
+      detected = await aiCliService.detectGit(dirPath)
+      setGitInfo(detected)
+    } catch {
+      detected = null
+    } finally {
+      setIsDetectingGit(false)
+    }
+    onDirSelected(dirPath, suggestedName, detected)
+  }
+
+  return (
+    <>
+      <div className="space-y-2">
+        <Label>{t('createDialog.localPathLabel')}</Label>
+        <div className="flex gap-2">
+          <Input
+            className="flex-1"
+            placeholder={t('createDialog.localPathPlaceholder')}
+            value={localPath}
+            onChange={(e) => onLocalPathChange(e.target.value)}
+          />
+          <Button type="button" variant="outline" size="sm" onClick={() => setShowBrowser(!showBrowser)}>
+            <Search className="h-3 w-3 mr-1" />
+            {t('createDialog.browse')}
+          </Button>
+        </div>
+        {showBrowser && (
+          <DirBrowser initialPath={localPath || '/'} onSelect={handleDirSelect} />
+        )}
+      </div>
+      {(isDetectingGit || gitInfo) && (
+        <div className="flex items-center gap-2 text-xs">
+          {isDetectingGit ? (
+            <>
+              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+              <span className="text-muted-foreground">{t('createDialog.detecting')}</span>
+            </>
+          ) : gitInfo?.isGitRepo ? (
+            <>
+              <GitBranch className="h-3 w-3 text-green-500" />
+              <span className="text-green-600 dark:text-green-400">{t('createDialog.gitDetected')}</span>
+              {gitInfo.remoteUrl && (
+                <span className="text-muted-foreground truncate" title={gitInfo.remoteUrl}>
+                  {gitInfo.remoteUrl}
+                </span>
+              )}
+              {gitInfo.branch && (
+                <Badge variant="outline" className="text-xs">{gitInfo.branch}</Badge>
+              )}
+            </>
+          ) : (
+            <span className="text-muted-foreground">{t('createDialog.gitNotDetected')}</span>
+          )}
+        </div>
+      )}
+    </>
+  )
+}

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