@octo-cyber/ai 0.5.5 → 0.5.7

package/web/pages/ApprovalsPage.tsx

@@ -0,0 +1,260 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { RefreshCw, Loader2, CheckCircle, XCircle, ChevronDown, ChevronUp } from 'lucide-react'
+
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@octo-cyber/ui/components/ui/table'
+
+import { agentApprovalService } from '../services/agent-approval.service'
+import type { AgentApproval, ApprovalStatus } from '../services/agent-approval.service'
+
+function StatusBadge({ status }: { status: ApprovalStatus }) {
+  const t = useTranslations('aiTools.approvals')
+  const variants: Record<ApprovalStatus, string> = {
+    pending: 'bg-yellow-500 hover:bg-yellow-500/80 text-white border-transparent',
+    approved: 'bg-green-500 hover:bg-green-500/80 text-white border-transparent',
+    rejected: 'bg-red-500 hover:bg-red-500/80 text-white border-transparent',
+  }
+  return (
+    <Badge variant="outline" className={variants[status]}>
+      {t(status)}
+    </Badge>
+  )
+}
+
+function ApprovalDetailPanel({
+  approval,
+  onApprove,
+  onReject,
+}: {
+  approval: AgentApproval
+  onApprove: (id: string, response?: string) => Promise<void>
+  onReject: (id: string, response?: string) => Promise<void>
+}) {
+  const t = useTranslations('aiTools.approvals')
+  const tc = useTranslations('common')
+  const [response, setResponse] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const handleApprove = async () => {
+    setSubmitting(true)
+    await onApprove(approval.id, response || undefined)
+    setSubmitting(false)
+  }
+
+  const handleReject = async () => {
+    setSubmitting(true)
+    await onReject(approval.id, response || undefined)
+    setSubmitting(false)
+  }
+
+  return (
+    <div className="space-y-4 rounded-lg border dark:border-zinc-700 bg-muted/30 dark:bg-zinc-800/30 p-4">
+      <div>
+        <p className="text-sm font-medium text-muted-foreground mb-1">{t('question')}</p>
+        <p className="text-sm whitespace-pre-wrap">{approval.question}</p>
+      </div>
+      {approval.context && (
+        <div>
+          <p className="text-sm font-medium text-muted-foreground mb-1">Context</p>
+          <pre className="text-xs bg-muted dark:bg-zinc-900 rounded p-2 overflow-auto max-h-40">
+            {approval.context}
+          </pre>
+        </div>
+      )}
+      {approval.status === 'pending' && (
+        <div className="space-y-2">
+          <Textarea
+            placeholder={t('responsePlaceholder')}
+            value={response}
+            onChange={(e) => setResponse(e.target.value)}
+            rows={3}
+            disabled={submitting}
+            className="resize-none dark:bg-zinc-800 dark:border-zinc-700"
+          />
+          <div className="flex gap-2">
+            <Button
+              size="sm"
+              onClick={handleApprove}
+              disabled={submitting}
+              className="bg-green-600 hover:bg-green-700 text-white"
+            >
+              {submitting ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <CheckCircle className="mr-1 h-3.5 w-3.5" />}
+              {t('approve')}
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={handleReject}
+              disabled={submitting}
+            >
+              {submitting ? <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" /> : <XCircle className="mr-1 h-3.5 w-3.5" />}
+              {t('reject')}
+            </Button>
+          </div>
+        </div>
+      )}
+      {approval.response && (
+        <div>
+          <p className="text-sm font-medium text-muted-foreground mb-1">{t('response')}</p>
+          <p className="text-sm">{approval.response}</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function ApprovalsPage() {
+  const t = useTranslations('aiTools.approvals')
+  const tc = useTranslations('common')
+
+  const [approvals, setApprovals] = useState<AgentApproval[]>([])
+  const [loading, setLoading] = useState(true)
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const loadApprovals = useCallback(async () => {
+    try {
+      const data = await agentApprovalService.listPending()
+      setApprovals(data)
+    } catch {
+      toast.error(tc('loadDataFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [tc])
+
+  useEffect(() => {
+    loadApprovals()
+    intervalRef.current = setInterval(loadApprovals, 10000)
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }
+  }, [loadApprovals])
+
+  const handleApprove = async (id: string, response?: string) => {
+    try {
+      await agentApprovalService.approve(id, response)
+      toast.success(t('approveSuccess'))
+      setExpandedId(null)
+      await loadApprovals()
+    } catch {
+      toast.error(tc('operationFailed'))
+    }
+  }
+
+  const handleReject = async (id: string, response?: string) => {
+    try {
+      await agentApprovalService.reject(id, response)
+      toast.success(t('rejectSuccess'))
+      setExpandedId(null)
+      await loadApprovals()
+    } catch {
+      toast.error(tc('operationFailed'))
+    }
+  }
+
+  const toggleExpand = (id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id))
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')}>
+        <Button variant="outline" onClick={loadApprovals} disabled={loading}>
+          {loading ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <RefreshCw className="mr-2 h-4 w-4" />
+          )}
+          {tc('refresh')}
+        </Button>
+      </PageHeader>
+
+      <div className="rounded-lg border dark:border-zinc-800">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[40%]">{t('question')}</TableHead>
+              <TableHead>{t('runId')}</TableHead>
+              <TableHead>{t('createdAt')}</TableHead>
+              <TableHead>{t('status')}</TableHead>
+              <TableHead className="w-10" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={5} className="h-32 text-center text-muted-foreground">
+                  {tc('loading')}
+                </TableCell>
+              </TableRow>
+            ) : approvals.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="h-32 text-center text-muted-foreground">
+                  {t('noPending')}
+                </TableCell>
+              </TableRow>
+            ) : (
+              approvals.map((approval) => (
+                <>
+                  <TableRow
+                    key={approval.id}
+                    className="cursor-pointer hover:bg-muted/50 dark:hover:bg-zinc-800/50"
+                    onClick={() => toggleExpand(approval.id)}
+                  >
+                    <TableCell className="text-sm">
+                      {approval.question.length > 100
+                        ? `${approval.question.slice(0, 100)}...`
+                        : approval.question}
+                    </TableCell>
+                    <TableCell className="font-mono text-xs text-muted-foreground">
+                      {approval.runId.slice(0, 8)}...
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      {new Date(approval.createdAt).toLocaleString()}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge status={approval.status} />
+                    </TableCell>
+                    <TableCell>
+                      {expandedId === approval.id ? (
+                        <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                      ) : (
+                        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                      )}
+                    </TableCell>
+                  </TableRow>
+                  {expandedId === approval.id && (
+                    <TableRow key={`${approval.id}-detail`}>
+                      <TableCell colSpan={5} className="bg-muted/20 dark:bg-zinc-900/40 p-4">
+                        <ApprovalDetailPanel
+                          approval={approval}
+                          onApprove={handleApprove}
+                          onReject={handleReject}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

package/web/pages/OrchestratorPage.tsx

@@ -0,0 +1,384 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useTranslations } from 'next-intl'
+import { toast } from 'sonner'
+import { Loader2, Star, ChevronDown, ChevronUp, Play, Sparkles } from 'lucide-react'
+
+import { PageHeader } from '@octo-cyber/ui/components/shared/page-header'
+import { Button } from '@octo-cyber/ui/components/ui/button'
+import { Badge } from '@octo-cyber/ui/components/ui/badge'
+import { Textarea } from '@octo-cyber/ui/components/ui/textarea'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@octo-cyber/ui/components/ui/table'
+
+import { orchestratorService } from '../services/orchestrator.service'
+import type { OrchestratorPlan, OrchestratorStep, OrchestratorPlanStatus, OrchestratorStepStatus } from '../services/orchestrator.service'
+
+// ── PlanStepList ──────────────────────────────────────────────────────────────
+
+function StepStatusBadge({ status }: { status: OrchestratorStepStatus }) {
+  const t = useTranslations('aiTools.orchestrator')
+  const cls: Record<OrchestratorStepStatus, string> = {
+    pending: 'bg-zinc-500 hover:bg-zinc-500/80 text-white border-transparent',
+    running: 'bg-blue-500 hover:bg-blue-500/80 text-white border-transparent',
+    completed: 'bg-green-500 hover:bg-green-500/80 text-white border-transparent',
+    failed: 'bg-red-500 hover:bg-red-500/80 text-white border-transparent',
+  }
+  return (
+    <Badge variant="outline" className={cls[status]}>
+      {t(status)}
+    </Badge>
+  )
+}
+
+function PlanStepList({ steps }: { steps: OrchestratorStep[] }) {
+  const t = useTranslations('aiTools.orchestrator')
+  return (
+    <div className="space-y-2">
+      <p className="text-sm font-medium text-muted-foreground">{t('steps')}</p>
+      <div className="space-y-2">
+        {steps.map((step) => (
+          <div
+            key={step.stepId}
+            className="rounded-lg border dark:border-zinc-700 bg-muted/20 dark:bg-zinc-800/30 p-3 space-y-1"
+          >
+            <div className="flex items-center gap-2 flex-wrap">
+              <Badge variant="outline" className="font-mono text-xs dark:border-zinc-600">
+                {step.stepId}
+              </Badge>
+              <Badge variant="secondary" className="text-xs dark:bg-zinc-700">
+                {step.agentType}
+              </Badge>
+              <StepStatusBadge status={step.status} />
+            </div>
+            <p className="text-sm text-foreground/80">{step.prompt}</p>
+            {step.output && (
+              <pre className="text-xs bg-muted dark:bg-zinc-900 rounded p-2 overflow-auto max-h-32 mt-1">
+                {step.output}
+              </pre>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ── FeedbackForm ──────────────────────────────────────────────────────────────
+
+function FeedbackForm({
+  planId,
+  onSubmitted,
+}: {
+  planId: string
+  onSubmitted: () => void
+}) {
+  const t = useTranslations('aiTools.orchestrator')
+  const [rating, setRating] = useState(0)
+  const [hovered, setHovered] = useState(0)
+  const [comment, setComment] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const handleSubmit = async () => {
+    if (rating === 0) return
+    setSubmitting(true)
+    try {
+      await orchestratorService.submitFeedback(planId, rating, comment || undefined)
+      toast.success(t('feedbackThanks'))
+      onSubmitted()
+    } catch {
+      toast.error(t('submitFeedback'))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-3 rounded-lg border dark:border-zinc-700 bg-muted/20 dark:bg-zinc-800/30 p-4">
+      <p className="text-sm font-medium">{t('feedback')}</p>
+      <div className="flex gap-1">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <button
+            key={star}
+            type="button"
+            onClick={() => setRating(star)}
+            onMouseEnter={() => setHovered(star)}
+            onMouseLeave={() => setHovered(0)}
+            className="focus:outline-none"
+          >
+            <Star
+              className={`h-6 w-6 transition-colors ${
+                star <= (hovered || rating)
+                  ? 'fill-yellow-400 text-yellow-400'
+                  : 'text-muted-foreground'
+              }`}
+            />
+          </button>
+        ))}
+      </div>
+      <Textarea
+        placeholder={t('commentPlaceholder')}
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+        rows={2}
+        disabled={submitting}
+        className="resize-none dark:bg-zinc-800 dark:border-zinc-700"
+      />
+      <Button size="sm" onClick={handleSubmit} disabled={submitting || rating === 0}>
+        {submitting && <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />}
+        {t('submitFeedback')}
+      </Button>
+    </div>
+  )
+}
+
+// ── PlanStatusBadge ───────────────────────────────────────────────────────────
+
+function PlanStatusBadge({ status }: { status: OrchestratorPlanStatus }) {
+  const t = useTranslations('aiTools.orchestrator')
+  const cls: Record<OrchestratorPlanStatus, string> = {
+    draft: 'bg-zinc-500 hover:bg-zinc-500/80 text-white border-transparent',
+    running: 'bg-blue-500 hover:bg-blue-500/80 text-white border-transparent',
+    completed: 'bg-green-500 hover:bg-green-500/80 text-white border-transparent',
+    failed: 'bg-red-500 hover:bg-red-500/80 text-white border-transparent',
+  }
+  return (
+    <Badge variant="outline" className={cls[status]}>
+      {t(status)}
+    </Badge>
+  )
+}
+
+// ── OrchestratorPage ──────────────────────────────────────────────────────────
+
+export default function OrchestratorPage() {
+  const t = useTranslations('aiTools.orchestrator')
+  const tc = useTranslations('common')
+
+  const [goal, setGoal] = useState('')
+  const [generating, setGenerating] = useState(false)
+  const [executing, setExecuting] = useState(false)
+  const [currentPlan, setCurrentPlan] = useState<OrchestratorPlan | null>(null)
+  const [feedbackDone, setFeedbackDone] = useState(false)
+
+  const [plans, setPlans] = useState<OrchestratorPlan[]>([])
+  const [loadingPlans, setLoadingPlans] = useState(true)
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const stopPolling = () => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current)
+      pollRef.current = null
+    }
+  }
+
+  const loadPlans = useCallback(async () => {
+    try {
+      const data = await orchestratorService.listPlans()
+      setPlans(data)
+    } catch {
+      toast.error(tc('loadDataFailed'))
+    } finally {
+      setLoadingPlans(false)
+    }
+  }, [tc])
+
+  useEffect(() => {
+    loadPlans()
+  }, [loadPlans])
+
+  useEffect(() => {
+    return () => stopPolling()
+  }, [])
+
+  const handleGenerate = async () => {
+    if (!goal.trim()) return
+    setGenerating(true)
+    setCurrentPlan(null)
+    setFeedbackDone(false)
+    try {
+      const plan = await orchestratorService.createPlan(goal.trim())
+      setCurrentPlan(plan)
+      toast.success(t('planCreated'))
+      await loadPlans()
+    } catch {
+      toast.error(tc('operationFailed'))
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  const handleExecute = async () => {
+    if (!currentPlan) return
+    setExecuting(true)
+    setFeedbackDone(false)
+    try {
+      const started = await orchestratorService.executePlan(currentPlan.id)
+      setCurrentPlan(started)
+      pollRef.current = setInterval(async () => {
+        try {
+          const updated = await orchestratorService.getPlan(currentPlan.id)
+          setCurrentPlan(updated)
+          if (updated.status === 'completed' || updated.status === 'failed') {
+            stopPolling()
+            setExecuting(false)
+            if (updated.status === 'completed') {
+              toast.success(t('planCompleted'))
+            } else {
+              toast.error(t('planFailed'))
+            }
+            await loadPlans()
+          }
+        } catch {
+          stopPolling()
+          setExecuting(false)
+        }
+      }, 3000)
+    } catch {
+      toast.error(tc('operationFailed'))
+      setExecuting(false)
+    }
+  }
+
+  const toggleExpand = (id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id))
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t('title')} description={t('description')} />
+
+      {/* New Plan Form */}
+      <div className="rounded-lg border dark:border-zinc-800 p-4 space-y-4 bg-card dark:bg-zinc-900/40">
+        <Textarea
+          placeholder={t('goalPlaceholder')}
+          value={goal}
+          onChange={(e) => setGoal(e.target.value)}
+          rows={4}
+          disabled={generating || executing}
+          className="resize-none dark:bg-zinc-800 dark:border-zinc-700"
+        />
+        <div className="flex gap-2">
+          <Button onClick={handleGenerate} disabled={generating || executing || !goal.trim()}>
+            {generating
+              ? <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              : <Sparkles className="mr-2 h-4 w-4" />}
+            {generating ? t('generating') : t('generatePlan')}
+          </Button>
+          {currentPlan && currentPlan.status === 'draft' && (
+            <Button variant="secondary" onClick={handleExecute} disabled={executing}>
+              {executing
+                ? <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                : <Play className="mr-2 h-4 w-4" />}
+              {executing ? t('executing') : t('executePlan')}
+            </Button>
+          )}
+        </div>
+
+        {currentPlan && (
+          <div className="space-y-4 pt-2">
+            <PlanStepList steps={currentPlan.plan} />
+            {currentPlan.result && (
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">{t('result')}</p>
+                <pre className="text-xs bg-muted dark:bg-zinc-900 rounded p-3 overflow-auto max-h-48 whitespace-pre-wrap">
+                  {currentPlan.result}
+                </pre>
+              </div>
+            )}
+            {currentPlan.status === 'completed' && !feedbackDone && (
+              <FeedbackForm planId={currentPlan.id} onSubmitted={() => setFeedbackDone(true)} />
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Recent Plans Table */}
+      <div className="space-y-2">
+        <p className="text-sm font-semibold">{t('recentPlans')}</p>
+        <div className="rounded-lg border dark:border-zinc-800">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[40%]">{t('goal')}</TableHead>
+                <TableHead>{t('status')}</TableHead>
+                <TableHead>{t('stepsProgress')}</TableHead>
+                <TableHead>{tc('createdAt')}</TableHead>
+                <TableHead className="w-10" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loadingPlans ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="h-32 text-center text-muted-foreground">
+                    {tc('loading')}
+                  </TableCell>
+                </TableRow>
+              ) : plans.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="h-32 text-center text-muted-foreground">
+                    {t('noPlans')}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                plans.map((plan) => (
+                  <>
+                    <TableRow
+                      key={plan.id}
+                      className="cursor-pointer hover:bg-muted/50 dark:hover:bg-zinc-800/50"
+                      onClick={() => toggleExpand(plan.id)}
+                    >
+                      <TableCell className="text-sm">
+                        {plan.goal.length > 80 ? `${plan.goal.slice(0, 80)}...` : plan.goal}
+                      </TableCell>
+                      <TableCell>
+                        <PlanStatusBadge status={plan.status} />
+                      </TableCell>
+                      <TableCell className="text-sm text-muted-foreground">
+                        {plan.stepsDone}/{plan.stepsTotal}
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        {new Date(plan.createdAt).toLocaleString()}
+                      </TableCell>
+                      <TableCell>
+                        {expandedId === plan.id
+                          ? <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                          : <ChevronDown className="h-4 w-4 text-muted-foreground" />}
+                      </TableCell>
+                    </TableRow>
+                    {expandedId === plan.id && (
+                      <TableRow key={`${plan.id}-detail`}>
+                        <TableCell colSpan={5} className="bg-muted/20 dark:bg-zinc-900/40 p-4">
+                          <div className="space-y-4">
+                            <PlanStepList steps={plan.plan} />
+                            {plan.result && (
+                              <div className="space-y-1">
+                                <p className="text-sm font-medium text-muted-foreground">{t('result')}</p>
+                                <pre className="text-xs bg-muted dark:bg-zinc-900 rounded p-3 overflow-auto max-h-48 whitespace-pre-wrap">
+                                  {plan.result}
+                                </pre>
+                              </div>
+                            )}
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  )
+}