Add AI workflow run management with listing and detail retrieval endpoints, including corresponding response structures and UI integration

web/app/dashboard/conversations/_components/conversation-info-panel.tsx

@@ -1,11 +1,14 @@
 "use client";
 import {
+  AlertTriangleIcon,
   Building2Icon,
   Link2Icon,
   MailIcon,
   PencilIcon,
   PhoneIcon,
+  TimerIcon,
   UserRoundIcon,
+  WorkflowIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -13,6 +16,9 @@ import { toast } from "sonner";
 import { type CustomerFormSavePayload } from "@/components/customer-form";
 import { CustomerFormDialog } from "@/components/customer-form-dialog";
 import { CustomerLinkOrCreateDialog } from "@/components/customer-link-or-create-dialog";
+import { JsonTreeViewer } from "@/components/json-tree-viewer";
+import { ProjectDialog } from "@/components/project-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -29,7 +35,14 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import type { AgentConversation } from "@/lib/api/agent";
-import { type TagTree, fetchTagsAll } from "@/lib/api/admin";
+import {
+  fetchAIWorkflowRun,
+  fetchAIWorkflowRuns,
+  type AIWorkflowNodeRun,
+  type AIWorkflowRun,
+  type TagTree,
+  fetchTagsAll,
+} from "@/lib/api/admin";
 import { updateCompany, type AdminCompany } from "@/lib/api/company";
 import { fetchTickets, type TicketItem } from "@/lib/api/ticket";
 import {
@@ -243,6 +256,7 @@ export function ConversationInfoPanel({
         ) : (
           <div className="space-y-4 py-3">
             <CustomerBody conversation={conversation} />
+            <WorkflowRunsSection conversation={conversation} />
           </div>
         )}
       </div>
@@ -317,6 +331,270 @@ function ConversationTagSection({
   );
 }
 
+function WorkflowRunsSection({ conversation }: { conversation: AgentConversation }) {
+  const [runs, setRuns] = useState<AIWorkflowRun[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [activeRun, setActiveRun] = useState<AIWorkflowRun | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadRuns() {
+      setLoading(true);
+      try {
+        const data = await fetchAIWorkflowRuns({
+          conversationId: conversation.id,
+          page: 1,
+          limit: 5,
+        });
+        if (!cancelled) {
+          setRuns(Array.isArray(data.results) ? data.results : []);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          toast.error(error instanceof Error ? error.message : "加载 AI 执行记录失败");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void loadRuns();
+    return () => {
+      cancelled = true;
+    };
+  }, [conversation.id]);
+
+  async function openDetail(runId: number) {
+    setDetailOpen(true);
+    setDetailLoading(true);
+    try {
+      const data = await fetchAIWorkflowRun(runId);
+      setActiveRun(data);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "加载 AI 执行详情失败");
+      setDetailOpen(false);
+    } finally {
+      setDetailLoading(false);
+    }
+  }
+
+  return (
+    <section className="space-y-2 border-t pt-2">
+      <SectionHeading>AI 执行记录</SectionHeading>
+      {loading ? (
+        <p className="text-sm text-muted-foreground">加载执行记录中</p>
+      ) : runs.length > 0 ? (
+        <div className="space-y-2">
+          {runs.map((run) => (
+            <button
+              key={run.id}
+              type="button"
+              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors hover:bg-muted/40"
+              onClick={() => void openDetail(run.id)}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <WorkflowIcon className="size-3.5 shrink-0 text-muted-foreground" />
+                    <span className="truncate text-sm font-medium text-foreground">
+                      Run #{run.id}
+                    </span>
+                    <WorkflowRunStatusBadge statusName={run.statusName} />
+                  </div>
+                  <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground">
+                    <span>Workflow #{run.workflowVersionId || run.workflowId || "-"}</span>
+                    <span>Message #{run.messageId || "-"}</span>
+                  </div>
+                </div>
+                <span className="shrink-0 text-xs text-muted-foreground">
+                  {run.startedAt ? formatDateTime(run.startedAt) : "—"}
+                </span>
+              </div>
+              {run.errorMessage ? (
+                <div className="mt-2 flex items-start gap-1.5 text-xs text-destructive">
+                  <AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0" />
+                  <span className="line-clamp-2 break-all">{run.errorMessage}</span>
+                </div>
+              ) : null}
+            </button>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">暂无 AI 执行记录</p>
+      )}
+      <WorkflowRunDetailDialog
+        open={detailOpen}
+        loading={detailLoading}
+        run={activeRun}
+        onOpenChange={(open) => {
+          setDetailOpen(open);
+          if (!open) {
+            setActiveRun(null);
+          }
+        }}
+      />
+    </section>
+  );
+}
+
+function WorkflowRunDetailDialog({
+  open,
+  loading,
+  run,
+  onOpenChange,
+}: {
+  open: boolean;
+  loading: boolean;
+  run: AIWorkflowRun | null;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <ProjectDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={
+        <span className="flex items-center gap-2">
+          <WorkflowIcon className="size-4" />
+          AI 执行详情
+        </span>
+      }
+      description={run ? `Run #${run.id}` : "Workflow 执行链路"}
+      size="xl"
+      allowFullscreen
+      footer={
+        <Button variant="outline" onClick={() => onOpenChange(false)}>
+          关闭
+        </Button>
+      }
+    >
+      {loading ? (
+        <div className="px-6 py-10 text-sm text-muted-foreground">加载执行详情中</div>
+      ) : run ? (
+        <div className="space-y-4 px-6 pb-6">
+          <div className="grid gap-2 rounded-lg border bg-muted/20 p-3 text-sm md:grid-cols-2">
+            <DetailRow label="Workflow" value={`#${run.workflowId} / v${run.workflowVersionId}`} />
+            <DetailRow label="会话" value={`#${run.conversationId}`} />
+            <DetailRow label="消息" value={`#${run.messageId}`} />
+            <DetailRow label="Agent" value={`#${run.aiAgentId}`} />
+            <DetailRow label="状态" value={run.statusName || String(run.status)} />
+            <DetailRow label="开始" value={run.startedAt ? formatDateTime(run.startedAt) : ""} />
+            <DetailRow label="结束" value={run.endedAt ? formatDateTime(run.endedAt) : ""} />
+            <DetailRow label="中断节点" value={run.interruptNodeId || ""} />
+          </div>
+          {run.errorMessage ? (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+              {run.errorMessage}
+            </div>
+          ) : null}
+          <div className="space-y-3">
+            {(run.nodes ?? []).map((node) => (
+              <WorkflowNodeRunBlock key={node.id} node={node} />
+            ))}
+            {!run.nodes || run.nodes.length === 0 ? (
+              <p className="text-sm text-muted-foreground">暂无节点记录</p>
+            ) : null}
+          </div>
+        </div>
+      ) : (
+        <div className="px-6 py-10 text-sm text-muted-foreground">未找到执行记录</div>
+      )}
+    </ProjectDialog>
+  );
+}
+
+function WorkflowNodeRunBlock({ node }: { node: AIWorkflowNodeRun }) {
+  const inputValue = safeParseJSON(node.inputPreview);
+  const outputValue = safeParseJSON(node.outputPreview);
+
+  return (
+    <div className="rounded-lg border bg-background p-3">
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="truncate text-sm font-medium text-foreground">
+              {node.nodeId || `Node #${node.id}`}
+            </span>
+            <WorkflowRunStatusBadge statusName={node.statusName} />
+          </div>
+          <div className="mt-1 text-xs text-muted-foreground">{node.nodeType || "unknown"}</div>
+        </div>
+        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+          <TimerIcon className="size-3.5" />
+          {node.durationMs} ms
+        </div>
+      </div>
+      {node.errorMessage ? (
+        <div className="mt-3 rounded-md bg-destructive/5 px-3 py-2 text-xs text-destructive">
+          {node.errorMessage}
+        </div>
+      ) : null}
+      <div className="mt-3 grid gap-3 lg:grid-cols-2">
+        <PreviewBlock title="输入" raw={node.inputPreview} value={inputValue} />
+        <PreviewBlock title="输出" raw={node.outputPreview} value={outputValue} />
+      </div>
+    </div>
+  );
+}
+
+function PreviewBlock({
+  title,
+  raw,
+  value,
+}: {
+  title: string;
+  raw: string;
+  value: unknown;
+}) {
+  return (
+    <div className="min-w-0">
+      <div className="mb-1 text-xs font-medium text-muted-foreground">{title}</div>
+      {value !== null ? (
+        <JsonTreeViewer value={value} collapsed={2} />
+      ) : raw.trim() ? (
+        <pre className="max-h-72 overflow-auto rounded-md border bg-muted/20 p-3 text-xs whitespace-pre-wrap break-all">
+          {raw}
+        </pre>
+      ) : (
+        <div className="rounded-md border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
+          —
+        </div>
+      )}
+    </div>
+  );
+}
+
+function WorkflowRunStatusBadge({ statusName }: { statusName: string }) {
+  const normalized = statusName.trim();
+  const variant =
+    normalized === "failed"
+      ? "destructive"
+      : normalized === "interrupted"
+        ? "outline"
+        : "secondary";
+  return (
+    <Badge variant={variant} className="h-5 px-1.5 text-[11px]">
+      {normalized || "unknown"}
+    </Badge>
+  );
+}
+
+function safeParseJSON(raw: string): unknown | null {
+  const trimmed = raw.trim();
+  if (!trimmed) {
+    return null;
+  }
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return null;
+  }
+}
+
 function CustomerBody({ conversation }: { conversation: AgentConversation }) {
   const customerId = conversation.customerId ?? 0;