@octo-cyber/ai 0.5.5 → 0.5.6

package/dist/src/workflow-design/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/workflow-design/types.ts"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,uBAAuB;AACvB,+DAA+D"}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@octo-cyber/ai",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Octo AI module — Agent + Capability + SyncBridge + client registration",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
     },
     "./web": {
       "types": "./web/index.ts",
@@ -22,22 +22,27 @@
     }
   },
   "dependencies": {
-    "@octo-cyber/core": "^0.5.4",
+    "@anthropic-ai/sdk": "^0.80.0",
+    "node-screenshots": "^0.2.8",
     "@octo-cyber/auth": "^0.5.6",
+    "@octo-cyber/core": "^0.5.4",
     "@octo-cyber/task": "^0.5.3"
   },
+  "optionalDependencies": {
+    "@nut-tree/nut-js": "^4.2.0"
+  },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@hookform/resolvers": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "lucide-react": ">=0.400.0",
     "next": "^16.0.0",
     "next-intl": "^4.0.0",
-    "lucide-react": ">=0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.0.0",
-    "@hookform/resolvers": "^5.0.0",
-    "@tanstack/react-table": "^8.0.0",
-    "zod": "^3.0.0",
     "sonner": "^2.0.0",
-    "@octo-cyber/ui": "^0.5.2"
+    "zod": "^3.0.0",
+    "@octo-cyber/ui": "^0.5.3"
   },
   "peerDependenciesMeta": {
     "@octo-cyber/ui": {
@@ -75,6 +80,7 @@
     }
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "typescript": "^5.8.0",

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