feat: add debug dialog and related functionality for skill debugging

internal/ai/runtime/debug_run.go

@@ -76,6 +76,10 @@ func buildSkillDebugRunResponse(req request.SkillDebugRunRequest, summary *Summa
 	resp.SkillAllowedToolCodes = append([]string(nil), summary.SkillAllowedToolCodes...)
 	resp.ToolCodes = append([]string(nil), summary.ToolCodes...)
 	resp.InvokedToolCodes = append([]string(nil), summary.InvokedToolCodes...)
+	resp.ToolSearchTrace = extractToolSearchTrace(summary)
+	resp.GraphToolTrace = extractGraphToolTrace(summary)
+	resp.GraphToolCode = firstGraphToolCode(summary)
+	resp.InterruptType = firstInterruptType(summary)
 	resp.CheckPointID = summary.CheckPointID
 	resp.Interrupted = summary.Interrupted
 	resp.TraceData = summary.TraceData

internal/pkg/dto/response/skill_response.go

@@ -29,6 +29,10 @@ type SkillDebugRunResponse struct {
 	SkillAllowedToolCodes []string `json:"skillAllowedToolCodes"`
 	ToolCodes             []string `json:"toolCodes"`
 	InvokedToolCodes      []string `json:"invokedToolCodes"`
+	ToolSearchTrace       string   `json:"toolSearchTrace"`
+	GraphToolTrace        string   `json:"graphToolTrace"`
+	GraphToolCode         string   `json:"graphToolCode"`
+	InterruptType         string   `json:"interruptType"`
 	CheckPointID          string   `json:"checkPointId"`
 	Interrupted           bool     `json:"interrupted"`
 	TraceData             string   `json:"traceData"`

web/app/(console)/skill-definition/_components/debug-dialog.tsx

@@ -0,0 +1,414 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useEffect, useMemo, useState } from "react"
+import { Resolver, useForm } from "react-hook-form"
+import { z } from "zod/v4"
+import { LoaderCircleIcon, PlayIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import { ProjectDialog } from "@/components/project-dialog"
+import { OptionCombobox } from "@/components/option-combobox"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  debugRunSkillDefinition,
+  fetchAIAgentsAll,
+  type AIAgent,
+  type SkillDebugRunPayload,
+  type SkillDebugRunResult,
+} from "@/lib/api/admin"
+
+type DebugDialogProps = {
+  open: boolean
+  skillCode: string
+  skillName: string
+  onOpenChange: (open: boolean) => void
+}
+
+const debugFormSchema = z.object({
+  aiAgentId: z.string().trim().min(1, "请选择 AI Agent"),
+  conversationId: z.string().trim(),
+  userMessage: z.string().trim().min(1, "请输入用户消息"),
+})
+
+type DebugForm = z.infer<typeof debugFormSchema>
+
+const debugFormResolver = zodResolver(debugFormSchema as never) as Resolver<
+  z.input<typeof debugFormSchema>,
+  undefined,
+  z.output<typeof debugFormSchema>
+>
+
+const emptyForm: DebugForm = {
+  aiAgentId: "",
+  conversationId: "",
+  userMessage: "",
+}
+
+function ResultBlock({
+  title,
+  value,
+  emptyText = "暂无数据",
+}: {
+  title: string
+  value?: string
+  emptyText?: string
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {value ? (
+          <pre className="overflow-x-auto whitespace-pre-wrap break-words rounded-lg bg-muted/50 p-3 text-xs leading-5">
+            {value}
+          </pre>
+        ) : (
+          <div className="text-sm text-muted-foreground">{emptyText}</div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function DebugDialog({
+  open,
+  skillCode,
+  skillName,
+  onOpenChange,
+}: DebugDialogProps) {
+  if (!open) {
+    return null
+  }
+
+  return (
+    <DebugDialogBody
+      key={skillCode}
+      open={open}
+      skillCode={skillCode}
+      skillName={skillName}
+      onOpenChange={onOpenChange}
+    />
+  )
+}
+
+function DebugDialogBody({
+  open,
+  skillCode,
+  skillName,
+  onOpenChange,
+}: DebugDialogProps) {
+  const formId = `skill-debug-form-${skillCode}`
+  const [running, setRunning] = useState(false)
+  const [aiAgents, setAiAgents] = useState<AIAgent[]>([])
+  const [result, setResult] = useState<SkillDebugRunResult | null>(null)
+  const form = useForm<
+    z.input<typeof debugFormSchema>,
+    undefined,
+    z.output<typeof debugFormSchema>
+  >({
+    resolver: debugFormResolver,
+    defaultValues: emptyForm,
+  })
+
+  const {
+    handleSubmit,
+    reset,
+    register,
+    setValue,
+    watch,
+    formState: { errors },
+  } = form
+
+  const selectedAgentId = watch("aiAgentId")
+
+  useEffect(() => {
+    async function loadAIAgents() {
+      try {
+        const data = await fetchAIAgentsAll({ status: 1 })
+        setAiAgents(data)
+      } catch (error) {
+        console.error("Failed to load AI agents:", error)
+      }
+    }
+
+    void loadAIAgents()
+  }, [])
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+    reset(emptyForm)
+    setResult(null)
+  }, [open, reset])
+
+  useEffect(() => {
+    if (!open || aiAgents.length === 0 || selectedAgentId) {
+      return
+    }
+    setValue("aiAgentId", String(aiAgents[0].id), { shouldValidate: true })
+  }, [aiAgents, open, selectedAgentId, setValue])
+
+  const aiAgentOptions = useMemo(
+    () =>
+      aiAgents.map((item) => ({
+        value: String(item.id),
+        label: item.name,
+      })),
+    [aiAgents],
+  )
+
+  const selectedAgent = useMemo(
+    () => aiAgents.find((item) => String(item.id) === selectedAgentId) ?? null,
+    [aiAgents, selectedAgentId],
+  )
+
+  async function onSubmit(values: DebugForm) {
+    const payload: SkillDebugRunPayload = {
+      aiAgentId: Number(values.aiAgentId),
+      skillCode,
+      userMessage: values.userMessage.trim(),
+    }
+    const conversationId = Number(values.conversationId)
+    if (conversationId > 0) {
+      payload.conversationId = conversationId
+    }
+
+    setRunning(true)
+    try {
+      const data = await debugRunSkillDefinition(payload)
+      setResult(data)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Skill 调试失败")
+      setResult(null)
+    } finally {
+      setRunning(false)
+    }
+  }
+
+  return (
+    <ProjectDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={`调试 Skill · ${skillName || skillCode}`}
+      description="强制指定当前 Skill，直接查看 route、tools、graph、HITL 和回复结果。"
+      size="xl"
+      allowFullscreen
+      footer={
+        <>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={running}
+            onClick={() => onOpenChange(false)}
+          >
+            关闭
+          </Button>
+          <Button type="submit" form={formId} disabled={running}>
+            {running ? <LoaderCircleIcon className="animate-spin" /> : <PlayIcon />}
+            {running ? "调试中..." : "开始调试"}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-6">
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm">调试输入</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form id={formId} onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                <Field data-invalid={!!errors.aiAgentId}>
+                  <FieldLabel>AI Agent</FieldLabel>
+                  <FieldContent>
+                    <OptionCombobox
+                      value={selectedAgentId}
+                      options={aiAgentOptions}
+                      placeholder="选择 AI Agent"
+                      searchPlaceholder="搜索 AI Agent"
+                      emptyText="未找到 AI Agent"
+                      onChange={(value) =>
+                        setValue("aiAgentId", value, { shouldValidate: true })
+                      }
+                    />
+                    <FieldError errors={[errors.aiAgentId]} />
+                  </FieldContent>
+                </Field>
+                <Field data-invalid={!!errors.conversationId}>
+                  <FieldLabel htmlFor="skill-debug-conversation-id">
+                    Conversation ID
+                  </FieldLabel>
+                  <FieldContent>
+                    <Input
+                      id="skill-debug-conversation-id"
+                      type="number"
+                      min={0}
+                      placeholder="可选，填已有会话 ID 以复用上下文"
+                      aria-invalid={!!errors.conversationId}
+                      {...register("conversationId")}
+                    />
+                    <FieldError errors={[errors.conversationId]} />
+                  </FieldContent>
+                </Field>
+              </div>
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                <Field>
+                  <FieldLabel>Skill</FieldLabel>
+                  <FieldContent>
+                    <Input value={skillCode} disabled />
+                  </FieldContent>
+                </Field>
+                <Field>
+                  <FieldLabel>命中 Agent</FieldLabel>
+                  <FieldContent>
+                    <Input
+                      value={selectedAgent?.name || "未选择"}
+                      disabled
+                    />
+                  </FieldContent>
+                </Field>
+              </div>
+              <Field data-invalid={!!errors.userMessage}>
+                <FieldLabel htmlFor="skill-debug-user-message">用户消息</FieldLabel>
+                <FieldContent>
+                  <Textarea
+                    id="skill-debug-user-message"
+                    rows={5}
+                    placeholder="输入一段用户消息，调试当前 Skill 的路由、工具和回复。"
+                    aria-invalid={!!errors.userMessage}
+                    {...register("userMessage")}
+                  />
+                  <FieldError errors={[errors.userMessage]} />
+                </FieldContent>
+              </Field>
+            </form>
+          </CardContent>
+        </Card>
+
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm">调试摘要</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm">
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="outline">{result?.skillCode || skillCode}</Badge>
+                {result?.graphToolCode ? (
+                  <Badge variant="secondary">{result.graphToolCode}</Badge>
+                ) : null}
+                {result?.interruptType ? (
+                  <Badge variant="secondary">{result.interruptType}</Badge>
+                ) : null}
+                {result?.interrupted ? (
+                  <Badge>已中断</Badge>
+                ) : (
+                  <Badge variant="outline">未中断</Badge>
+                )}
+              </div>
+              <div className="rounded-lg bg-muted/50 p-3">
+                <div className="text-xs text-muted-foreground">Skill 名称</div>
+                <div className="mt-1 font-medium">{result?.skillName || skillName}</div>
+              </div>
+              <div className="rounded-lg bg-muted/50 p-3">
+                <div className="text-xs text-muted-foreground">Plan Reason</div>
+                <div className="mt-1 whitespace-pre-wrap break-words">
+                  {result?.planReason || "暂无"}
+                </div>
+              </div>
+              <div className="rounded-lg bg-muted/50 p-3">
+                <div className="text-xs text-muted-foreground">Reply</div>
+                <div className="mt-1 whitespace-pre-wrap break-words">
+                  {result?.replyText || "暂无"}
+                </div>
+              </div>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <div className="rounded-lg bg-muted/50 p-3">
+                  <div className="text-xs text-muted-foreground">Checkpoint</div>
+                  <div className="mt-1 break-all">
+                    {result?.checkPointId || "暂无"}
+                  </div>
+                </div>
+                <div className="rounded-lg bg-muted/50 p-3">
+                  <div className="text-xs text-muted-foreground">错误信息</div>
+                  <div className="mt-1 whitespace-pre-wrap break-words">
+                    {result?.errorMessage || "暂无"}
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm">工具视图</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm">
+              <div className="rounded-lg bg-muted/50 p-3">
+                <div className="text-xs text-muted-foreground">Skill Allowed Tools</div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {(result?.skillAllowedToolCodes ?? []).length > 0 ? (
+                    result?.skillAllowedToolCodes.map((toolCode) => (
+                      <Badge key={toolCode} variant="outline">
+                        {toolCode}
+                      </Badge>
+                    ))
+                  ) : (
+                    <span className="text-muted-foreground">暂无</span>
+                  )}
+                </div>
+              </div>
+              <div className="rounded-lg bg-muted/50 p-3">
+                <div className="text-xs text-muted-foreground">Candidate Tools</div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {(result?.toolCodes ?? []).length > 0 ? (
+                    result?.toolCodes.map((toolCode) => (
+                      <Badge key={toolCode} variant="outline">
+                        {toolCode}
+                      </Badge>
+                    ))
+                  ) : (
+                    <span className="text-muted-foreground">暂无</span>
+                  )}
+                </div>
+              </div>
+              <div className="rounded-lg bg-muted/50 p-3">
+                <div className="text-xs text-muted-foreground">Invoked Tools</div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {(result?.invokedToolCodes ?? []).length > 0 ? (
+                    result?.invokedToolCodes.map((toolCode) => (
+                      <Badge key={toolCode} variant="secondary">
+                        {toolCode}
+                      </Badge>
+                    ))
+                  ) : (
+                    <span className="text-muted-foreground">暂无</span>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4">
+          <ResultBlock title="Skill Route Trace" value={result?.skillRouteTrace} />
+          <ResultBlock title="Tool Search Trace" value={result?.toolSearchTrace} />
+          <ResultBlock title="Graph Tool Trace" value={result?.graphToolTrace} />
+          <ResultBlock title="Trace Data" value={result?.traceData} />
+        </div>
+      </div>
+    </ProjectDialog>
+  )
+}

web/app/(console)/skill-definition/page.tsx

@@ -21,6 +21,7 @@ import { CSS } from "@dnd-kit/utilities"
 import { useCallback, useEffect, useState, type CSSProperties } from "react"
 import {
   BrainCircuitIcon,
+  BugIcon,
   GripVerticalIcon,
   MoreHorizontalIcon,
   PlusIcon,
@@ -69,6 +70,7 @@ import {
 import { getEnumLabel, getEnumOptions } from "@/lib/enums"
 import { cn, formatDateTime } from "@/lib/utils"
 import { EditDialog } from "./_components/edit"
+import { DebugDialog } from "./_components/debug-dialog"
 
 const statusFilterOptions = [
   { value: "all", label: "全部状态" },
@@ -83,6 +85,7 @@ type SortableSkillRowProps = {
   disabled: boolean
   actionLoadingId: number | null
   openEditDialog: (item: SkillDefinition) => void
+  openDebugDialog: (item: SkillDefinition) => void
   handleToggleStatus: (item: SkillDefinition) => void
   handleDelete: (item: SkillDefinition) => void
 }
@@ -92,6 +95,7 @@ function SortableSkillRow({
   disabled,
   actionLoadingId,
   openEditDialog,
+  openDebugDialog,
   handleToggleStatus,
   handleDelete,
 }: SortableSkillRowProps) {
@@ -184,6 +188,14 @@ function SortableSkillRow({
       </TableCell>
       <TableCell className="text-right">
         <ButtonGroup className="ml-auto">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => openDebugDialog(item)}
+          >
+            <BugIcon />
+            调试
+          </Button>
           <Button
             variant="outline"
             size="sm"
@@ -229,7 +241,9 @@ export default function DashboardSkillsPage() {
   const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
   const [sorting, setSorting] = useState(false)
   const [dialogOpen, setDialogOpen] = useState(false)
+  const [debugDialogOpen, setDebugDialogOpen] = useState(false)
   const [editingItem, setEditingItem] = useState<SkillDefinition | null>(null)
+  const [debuggingItem, setDebuggingItem] = useState<SkillDefinition | null>(null)
   const [result, setResult] = useState<PageResult<SkillDefinition>>({
     results: [],
     page: { page: 1, limit: 20, total: 0 },
@@ -301,6 +315,11 @@ export default function DashboardSkillsPage() {
     setDialogOpen(true)
   }
 
+  function openDebugDialog(item: SkillDefinition) {
+    setDebuggingItem(item)
+    setDebugDialogOpen(true)
+  }
+
   function handleDialogOpenChange(open: boolean) {
     if (saving) {
       return
@@ -311,6 +330,13 @@ export default function DashboardSkillsPage() {
     setDialogOpen(open)
   }
 
+  function handleDebugDialogOpenChange(open: boolean) {
+    if (!open) {
+      setDebuggingItem(null)
+    }
+    setDebugDialogOpen(open)
+  }
+
   async function handleSubmit(payload: CreateSkillDefinitionPayload) {
     if (saving) {
       return
@@ -464,7 +490,7 @@ export default function DashboardSkillsPage() {
                     <TableHead>状态</TableHead>
                     <TableHead>优先级</TableHead>
                     <TableHead>最近更新</TableHead>
-                    <TableHead className="w-[92px] text-right">操作</TableHead>
+                    <TableHead className="w-[168px] text-right">操作</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -486,6 +512,7 @@ export default function DashboardSkillsPage() {
                         disabled={sorting}
                         actionLoadingId={actionLoadingId}
                         openEditDialog={openEditDialog}
+                        openDebugDialog={openDebugDialog}
                         handleToggleStatus={handleToggleStatus}
                         handleDelete={handleDelete}
                       />
@@ -518,6 +545,12 @@ export default function DashboardSkillsPage() {
         onOpenChange={handleDialogOpenChange}
         onSubmit={handleSubmit}
       />
+      <DebugDialog
+        open={debugDialogOpen}
+        skillCode={debuggingItem?.code ?? ""}
+        skillName={debuggingItem?.name ?? ""}
+        onOpenChange={handleDebugDialogOpenChange}
+      />
     </>
   )
 }

web/lib/api/admin.ts

@@ -301,6 +301,34 @@ export type UpdateSkillDefinitionPayload = CreateSkillDefinitionPayload & {
   id: number
 }
 
+export type SkillDebugRunPayload = {
+  aiAgentId: number
+  conversationId?: number
+  skillCode: string
+  userMessage: string
+}
+
+export type SkillDebugRunResult = {
+  skillCode: string
+  skillName: string
+  replyText: string
+  planReason: string
+  skillRouteTrace: string
+  skillAllowedToolCodes: string[]
+  toolCodes: string[]
+  invokedToolCodes: string[]
+  toolSearchTrace: string
+  graphToolTrace: string
+  graphToolCode: string
+  interruptType: string
+  checkPointId: string
+  interrupted: boolean
+  traceData: string
+  errorMessage: string
+  conversationId: number
+  aiAgentId: number
+}
+
 export type MCPConnectionResult = {
   serverCode: string
   endpoint: string
@@ -881,6 +909,13 @@ export function updateSkillDefinitionPriority(ids: number[]) {
   })
 }
 
+export function debugRunSkillDefinition(payload: SkillDebugRunPayload) {
+  return request<SkillDebugRunResult>("/api/console/skill-definition/debug_run", {
+    method: "POST",
+    body: JSON.stringify(payload),
+  })
+}
+
 export function testMCPConnection(serverCode: string) {
   return request<MCPConnectionResult>("/api/console/mcp/test_connection", {
     method: "POST",