create-principles-disciple 1.0.0 → 1.74.0

package/console/dist/ui/pages/AgentsPage.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { PageHeader } from "../components/page-header.js";
+import { Card, CardContent } from "../components/ui/card.js";
+import { Badge } from "../components/ui/badge.js";
+import { Button } from "../components/ui/button.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+import { Separator } from "../components/ui/separator.js";
+import { Cpu, Stethoscope, Moon, Sparkles, Scale, PenTool, SearchCheck, ShieldCheck, ChevronDown, ChevronRight, ExternalLink, AlertCircle, Clock, } from "lucide-react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "../components/ui/sheet.js";
+import { fetchAgents, fetchAgentDetail } from "../api.js";
+import { formatDate } from "../utils/format.js";
+const ICON_MAP = {
+    Cpu,
+    Stethoscope,
+    Moon,
+    Sparkles,
+    Scale,
+    PenTool,
+    SearchCheck,
+    ShieldCheck,
+};
+const STATUS_COLORS = {
+    running: "#22c55e",
+    idle: "#9ca3af",
+    cooldown: "#eab308",
+    failed: "#ef4444",
+    unknown: "#d1d5db",
+};
+const STATUS_BADGE_VARIANT = {
+    running: "default",
+    idle: "secondary",
+    cooldown: "outline",
+    failed: "destructive",
+    unknown: "secondary",
+};
+const FLOW_NODES = [
+    { id: "after_tool_call", x: 60, y: 40, w: 150, h: 52, nameZh: "after_tool_call", icon: "ShieldCheck" },
+    { id: "pain-diagnostic-gate", x: 280, y: 40, w: 170, h: 52, nameZh: "PainDiagnosticGate", icon: "SearchCheck" },
+    { id: "diagnostician", x: 520, y: 40, w: 150, h: 52, nameZh: "诊断者", icon: "Stethoscope" },
+    { id: "evolution-worker", x: 60, y: 180, w: 170, h: 52, nameZh: "Evolution Worker", icon: "Cpu" },
+    { id: "correction-observer", x: 310, y: 180, w: 170, h: 52, nameZh: "纠正观察者", icon: "SearchCheck" },
+    { id: "detection-funnel", x: 560, y: 180, w: 150, h: 44, nameZh: "Detection Funnel", icon: "Cpu", small: true },
+];
+const FLOW_EDGES = [
+    { from: "after_tool_call", to: "pain-diagnostic-gate" },
+    { from: "pain-diagnostic-gate", to: "diagnostician" },
+    { from: "evolution-worker", to: "correction-observer" },
+    { from: "evolution-worker", to: "detection-funnel" },
+];
+const SVG_W = 760;
+const SVG_H = 400;
+function getNodeCenter(node) {
+    return { x: node.x + node.w / 2, y: node.y + node.h / 2 };
+}
+function getEdgePath(from, to) {
+    const fc = getNodeCenter(from);
+    const tc = getNodeCenter(to);
+    const startX = from.x + from.w;
+    const startY = fc.y;
+    const endX = to.x;
+    const endY = tc.y;
+    const midX = (startX + endX) / 2;
+    return `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
+}
+function AgentNode({ node, agent, selected, onClick, }) {
+    const Icon = ICON_MAP[node.icon] ?? Cpu;
+    const status = agent?.status ?? "unknown";
+    return (_jsxs("g", { onClick: onClick, style: { cursor: "pointer" }, children: [_jsx("rect", { x: node.x, y: node.y, width: node.w, height: node.h, rx: node.small ? 6 : 10, fill: "var(--color-card, hsl(0 0% 100%))", stroke: selected ? "var(--color-primary, hsl(220 90% 56%))" : "var(--color-border, hsl(220 14% 78%))", strokeWidth: selected ? 2.5 : 1.5, className: "transition-all duration-200" }), _jsx("foreignObject", { x: node.x + 6, y: node.y + (node.small ? 4 : 6), width: node.small ? 16 : 22, height: node.small ? 16 : 22, children: _jsx("div", { className: node.small ? "w-3.5 h-3.5 text-muted-foreground" : "w-4.5 h-4.5 text-muted-foreground", children: _jsx(Icon, { className: "w-full h-full" }) }) }), _jsx("text", { x: node.x + 34, y: node.y + node.h / 2 + 1, dominantBaseline: "middle", fontSize: node.small ? 11 : 13, fontWeight: 500, fill: "var(--color-foreground, hsl(0 0% 9%))", children: node.nameZh }), _jsx("circle", { cx: node.x + node.w - 14, cy: node.y + node.h / 2, r: 5, fill: STATUS_COLORS[status], className: "transition-colors duration-300" }), agent?.cooldownRemaining && (_jsx("text", { x: node.x + node.w - 14, y: node.y + 6, textAnchor: "middle", fontSize: 8, fill: "hsl(45 93% 47%)", children: "\u23F3" }))] }));
+}
+function FlowEdgeLine({ from, to }) {
+    const d = getEdgePath(from, to);
+    return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("marker", { id: `arrow-${from.id}-${to.id}`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "var(--color-accent, hsl(180 70% 50%))" }) }) }), _jsx("path", { d: d, fill: "none", stroke: "var(--color-accent, hsl(180 70% 50%))", strokeWidth: 1.8, markerEnd: `url(#arrow-${from.id}-${to.id})`, className: "opacity-70" })] }));
+}
+function RowLabel({ x, y, text }) {
+    return (_jsx("text", { x: x, y: y, fontSize: 10, fill: "var(--color-muted-foreground, hsl(220 10% 46%))", fontStyle: "italic", children: text }));
+}
+function AgentFlowMap({ agents, selectedId, onSelect, }) {
+    const { t } = useTranslation();
+    const agentMap = new Map(agents.map((a) => [a.id, a]));
+    return (_jsx(Card, { children: _jsx(CardContent, { className: "p-4", children: _jsxs("svg", { viewBox: `0 0 ${SVG_W} ${SVG_H}`, className: "w-full h-auto", style: { maxHeight: 500 }, children: [_jsx(RowLabel, { x: 60, y: 24, text: t("pages:agents.realtimeTriggerPath") }), _jsx(RowLabel, { x: 60, y: 168, text: t("pages:agents.backgroundHeartbeatPath") }), FLOW_EDGES.map((edge) => {
+                        const fromNode = FLOW_NODES.find((n) => n.id === edge.from);
+                        const toNode = FLOW_NODES.find((n) => n.id === edge.to);
+                        return _jsx(FlowEdgeLine, { from: fromNode, to: toNode }, `${edge.from}-${edge.to}`);
+                    }), FLOW_NODES.map((node) => (_jsx(AgentNode, { node: node, agent: agentMap.get(node.id), selected: selectedId === node.id, onClick: () => onSelect(node.id) }, node.id)))] }) }) }));
+}
+function CollapsibleSection({ title, defaultOpen = false, children, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    return (_jsxs("div", { children: [_jsxs("button", { type: "button", className: "flex items-center gap-1 text-sm font-medium w-full py-1", onClick: () => setOpen(!open), children: [open ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronRight, { className: "h-4 w-4" }), title] }), open && _jsx("div", { className: "pl-5 pb-2", children: children })] }));
+}
+function AgentDrawer({ agent, loading, onClose, open, }) {
+    const { t } = useTranslation();
+    const Icon = ICON_MAP[agent?.icon ?? ""] ?? Cpu;
+    return (_jsx(Sheet, { open: open, onOpenChange: (isOpen) => { if (!isOpen)
+            onClose(); }, children: _jsxs(SheetContent, { className: "w-[400px] sm:max-w-[400px] overflow-y-auto", children: [_jsxs(SheetHeader, { children: [_jsxs(SheetTitle, { className: "flex items-center gap-2", children: [_jsx(Icon, { className: "h-5 w-5 text-primary" }), agent?.nameZh ?? agent?.name ?? ""] }), agent && (_jsx(SheetDescription, { className: "sr-only", children: agent.descriptionZh || agent.description }))] }), _jsx("div", { className: "mt-4 flex flex-col gap-4", children: loading ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Skeleton, { className: "h-6 w-24" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-32 w-full" })] })) : agent ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: STATUS_BADGE_VARIANT[agent.status] ?? "secondary", children: t(`pages:agents.${agent.status}`) }), agent.lastRunAt && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [_jsx(Clock, { className: "h-3 w-3 inline mr-1" }), formatDate(agent.lastRunAt)] }))] }), _jsx("p", { className: "text-sm text-muted-foreground", children: agent.descriptionZh || agent.description }), agent.cooldownRemaining && (_jsxs("div", { className: "flex items-center gap-2 p-2 rounded-md bg-amber-500/10 border border-amber-500/20", children: [_jsx(Clock, { className: "h-4 w-4 text-amber-500" }), _jsxs("span", { className: "text-sm text-amber-600", children: [t("pages:agents.cooldown"), ": ", agent.cooldownRemaining] })] })), _jsx(Separator, {}), _jsx(CollapsibleSection, { title: t("pages:agents.prompt"), defaultOpen: false, children: _jsx("pre", { className: "text-xs bg-muted p-3 rounded-md overflow-x-auto whitespace-pre-wrap max-h-60 overflow-y-auto", children: agent.prompt || "—" }) }), _jsx(CollapsibleSection, { title: t("pages:agents.tools"), defaultOpen: true, children: _jsx("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.length > 0 ? (agent.tools.map((tool) => (_jsx(Badge, { variant: "outline", className: "text-xs", children: tool }, tool)))) : (_jsx("span", { className: "text-xs text-muted-foreground", children: "\u2014" })) }) }), _jsx(Separator, {}), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: t("pages:agents.recentRuns") }), agent.recentTasks.length > 0 ? (_jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-muted-foreground border-b", children: [_jsx("th", { className: "text-left py-1 font-medium", children: "Time" }), _jsx("th", { className: "text-left py-1 font-medium", children: "Status" }), _jsx("th", { className: "text-left py-1 font-medium", children: "Attempts" })] }) }), _jsx("tbody", { children: agent.recentTasks.slice(0, 5).map((task) => (_jsxs("tr", { className: "border-b border-border/50", children: [_jsx("td", { className: "py-1.5", children: formatDate(task.createdAt) }), _jsx("td", { className: "py-1.5", children: _jsx(Badge, { variant: task.status === "succeeded"
+                                                                    ? "default"
+                                                                    : task.status === "failed"
+                                                                        ? "destructive"
+                                                                        : "secondary", className: "text-[10px]", children: task.status }) }), _jsx("td", { className: "py-1.5", children: task.attemptCount })] }, task.taskId))) })] })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: t("pages:agents.noRecentRuns") }))] }), agent.recentTasks.some((t) => t.lastError) && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-destructive", children: t("pages:agents.errorLog") }), _jsx("div", { className: "flex flex-col gap-2", children: agent.recentTasks
+                                                    .filter((t) => t.lastError)
+                                                    .map((task) => (_jsxs("div", { className: "p-2 rounded-md bg-destructive/10 border border-destructive/20 text-xs", children: [_jsx("p", { className: "font-medium text-destructive", children: task.lastError }), _jsx("p", { className: "text-destructive mt-1", children: formatDate(task.updatedAt) })] }, task.taskId))) })] })] })), _jsx(Separator, {}), _jsx(Button, { variant: "outline", size: "sm", className: "w-full", asChild: true, children: _jsxs("a", { href: "#/tasks", children: [_jsx(ExternalLink, { className: "h-3 w-3 mr-2" }), t("pages:agents.viewTasks")] }) })] })) : null })] }) }));
+}
+function LoadingSkeleton() {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsx(Skeleton, { className: "h-8 w-32" }), _jsx(Skeleton, { className: "h-8 w-20" })] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-4", children: _jsx(Skeleton, { className: "h-[400px] w-full" }) }) })] }));
+}
+function AgentsPageInner() {
+    const { t } = useTranslation();
+    const [agents, setAgents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedId, setSelectedId] = useState(null);
+    const [detail, setDetail] = useState(null);
+    const [detailLoading, setDetailLoading] = useState(false);
+    const [lastUpdated, setLastUpdated] = useState(null);
+    const loadData = useCallback(async () => {
+        const result = await fetchAgents();
+        if (!result.success) {
+            setError(result.error ?? t("pages:agents.loadFailed"));
+        }
+        else {
+            setAgents(result.data);
+            setLastUpdated(new Date());
+            setError(null);
+        }
+        setLoading(false);
+    }, []);
+    useEffect(() => {
+        loadData();
+        const interval = setInterval(loadData, 30_000);
+        return () => clearInterval(interval);
+    }, [loadData]);
+    useEffect(() => {
+        if (!selectedId) {
+            setDetail(null);
+            return;
+        }
+        let cancelled = false;
+        setDetailLoading(true);
+        fetchAgentDetail(selectedId).then((result) => {
+            if (cancelled)
+                return;
+            setDetailLoading(false);
+            if (result.success && result.data) {
+                setDetail(result.data);
+            }
+            else {
+                setDetail(null);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [selectedId]);
+    const handleSelect = (id) => {
+        setSelectedId((prev) => (prev === id ? null : id));
+    };
+    if (loading)
+        return _jsx(LoadingSkeleton, {});
+    if (error) {
+        return (_jsx(Card, { children: _jsxs(CardContent, { className: "p-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(AlertCircle, { className: "h-5 w-5 text-destructive" }), _jsx("p", { className: "text-destructive", children: error })] }), _jsx(Button, { variant: "outline", className: "mt-4", onClick: loadData, children: t("common:refresh") })] }) }));
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsx(PageHeader, { title: t("pages:agents.title"), description: t("pages:agents.description"), onRefresh: loadData, lastUpdated: lastUpdated ?? undefined }), _jsx(AgentFlowMap, { agents: agents, selectedId: selectedId, onSelect: handleSelect }), _jsx(AgentDrawer, { agent: detail, loading: detailLoading, onClose: () => setSelectedId(null), open: selectedId !== null })] }));
+}
+export function AgentsPage() {
+    return _jsx(AgentsPageInner, {});
+}

package/console/dist/ui/pages/ApprovalsPage.d.ts

@@ -0,0 +1 @@
+export declare function ApprovalsPage(): import("react/jsx-runtime").JSX.Element;

package/console/dist/ui/pages/ApprovalsPage.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { fetchApprovals, fetchApprovalDetail, approveApproval, rejectApproval } from "../api.js";
+import { PageHeader } from "../components/page-header.js";
+import { Card, CardContent } from "../components/ui/card.js";
+import { Button } from "../components/ui/button.js";
+import { Badge } from "../components/ui/badge.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+import { ShieldCheck, AlertTriangle } from "lucide-react";
+import { ApprovalCard } from "../components/approval-card.js";
+import { ApprovalDetailDialog } from "../components/approval-detail-dialog.js";
+import { RejectionReasonDialog } from "../components/rejection-reason-dialog.js";
+export function ApprovalsPage() {
+    const { t } = useTranslation();
+    const [approvals, setApprovals] = useState([]);
+    const [approvalStats, setApprovalStats] = useState({ pending: 0, approved: 0, rejected: 0, cancelled: 0 });
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [lastUpdated, setLastUpdated] = useState(null);
+    const [detailApproval, setDetailApproval] = useState(null);
+    const [detailOpen, setDetailOpen] = useState(false);
+    const [rejectTarget, setRejectTarget] = useState(null);
+    const [rejectOpen, setRejectOpen] = useState(false);
+    const [actionLoading, setActionLoading] = useState(null);
+    const loadApprovals = useCallback(async () => {
+        try {
+            const result = await fetchApprovals();
+            if (!result.success) {
+                setError(result.error ?? t("pages:approvals.loadFailed"));
+                return;
+            }
+            setApprovals(result.data.items);
+            setApprovalStats(result.data.stats);
+            setLastUpdated(new Date());
+            setError(null);
+        }
+        catch {
+            setError(t("pages:approvals.loadFailed"));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [t]);
+    useEffect(() => {
+        loadApprovals();
+        const id = setInterval(loadApprovals, 15_000);
+        return () => clearInterval(id);
+    }, [loadApprovals]);
+    async function handleApprovalDetail(approvalId) {
+        setActionLoading(approvalId);
+        try {
+            const result = await fetchApprovalDetail(approvalId);
+            if (!result.success) {
+                setError(result.error);
+                return;
+            }
+            setDetailApproval(result.data);
+            setDetailOpen(true);
+        }
+        catch {
+            setError(t("pages:approvals.detailFailed"));
+        }
+        finally {
+            setActionLoading(null);
+        }
+    }
+    async function handleApprovalApprove(approvalId) {
+        setActionLoading(approvalId);
+        setDetailOpen(false);
+        try {
+            const result = await approveApproval(approvalId);
+            if (!result.success) {
+                setError(result.error);
+                return;
+            }
+            await loadApprovals();
+        }
+        catch {
+            setError(t("pages:approvals.approveFailed"));
+        }
+        finally {
+            setActionLoading(null);
+        }
+    }
+    function handleApprovalRejectClick(approval) {
+        setRejectTarget(approval);
+        setRejectOpen(true);
+    }
+    async function handleApprovalRejectSubmit(reason) {
+        if (!rejectTarget)
+            return;
+        setActionLoading(rejectTarget.approvalId);
+        setRejectOpen(false);
+        setDetailOpen(false);
+        try {
+            const result = await rejectApproval(rejectTarget.approvalId, reason);
+            if (!result.success) {
+                setError(result.error);
+                return;
+            }
+            await loadApprovals();
+        }
+        catch {
+            setError(t("pages:approvals.rejectFailed"));
+        }
+        finally {
+            setRejectTarget(null);
+            setActionLoading(null);
+        }
+    }
+    if (loading) {
+        return (_jsxs("div", { children: [_jsx(PageHeader, { title: t("pages:approvals.title"), description: t("pages:approvals.description") }), _jsx("div", { className: "space-y-3", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Card, { children: _jsx(CardContent, { className: "p-4", children: _jsx(Skeleton, { className: "h-16 w-full" }) }) }, i))) })] }));
+    }
+    if (error && approvals.length === 0) {
+        return (_jsxs("div", { children: [_jsx(PageHeader, { title: t("pages:approvals.title"), description: t("pages:approvals.description") }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-6 text-center", children: [_jsx("p", { className: "text-destructive text-sm", children: error }), _jsx(Button, { variant: "outline", className: "mt-4", onClick: loadApprovals, children: t("common:refresh") })] }) })] }));
+    }
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: t("pages:approvals.title"), description: t("pages:approvals.description"), onRefresh: loadApprovals, lastUpdated: lastUpdated ?? undefined }), error && approvals.length > 0 && (_jsx(Card, { className: "mb-4 border-amber-500/50 bg-amber-500/5", children: _jsxs(CardContent, { className: "p-3 flex items-center gap-3", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-amber-500 flex-shrink-0" }), _jsx("span", { className: "text-sm text-amber-600 flex-1", children: error }), _jsx(Button, { variant: "outline", size: "sm", onClick: loadApprovals, children: t("common:refresh") })] }) })), _jsxs("div", { className: "flex items-center gap-3 mb-4", children: [_jsxs(Badge, { variant: "outline", children: [t("components:approvalCard.stats.pending"), ": ", approvalStats.pending] }), _jsxs(Badge, { variant: "outline", children: [t("components:approvalCard.stats.approved"), ": ", approvalStats.approved] }), _jsxs(Badge, { variant: "outline", children: [t("components:approvalCard.stats.rejected"), ": ", approvalStats.rejected] })] }), approvals.length === 0 ? (_jsx(Card, { children: _jsxs(CardContent, { className: "py-12 text-center", children: [_jsx(ShieldCheck, { className: "h-10 w-10 text-muted-foreground mx-auto mb-3" }), _jsx("p", { className: "text-sm text-muted-foreground", children: t("components:approvalCard.empty") }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: t("pages:approvals.emptyHint") })] }) })) : (approvals.map((a) => (_jsx(ApprovalCard, { approval: a, loading: actionLoading === a.approvalId, onViewDetail: () => handleApprovalDetail(a.approvalId), onApprove: () => handleApprovalApprove(a.approvalId), onReject: () => handleApprovalRejectClick(a) }, a.approvalId)))), _jsx(ApprovalDetailDialog, { approval: detailApproval, open: detailOpen, onOpenChange: setDetailOpen, onApprove: () => { if (detailApproval)
+                    handleApprovalApprove(detailApproval.approvalId); }, onReject: () => { if (detailApproval) {
+                    setDetailOpen(false);
+                    handleApprovalRejectClick(detailApproval);
+                } }, loading: actionLoading !== null }), _jsx(RejectionReasonDialog, { open: rejectOpen, onOpenChange: setRejectOpen, onSubmit: handleApprovalRejectSubmit, loading: actionLoading !== null })] }));
+}

package/console/dist/ui/pages/CentralPage.d.ts

@@ -0,0 +1 @@
+export declare function CentralPage(): import("react/jsx-runtime").JSX.Element;

package/console/dist/ui/pages/CentralPage.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAutoRefresh } from "../hooks/useAutoRefresh.js";
+import { fetchCentralOverview, fetchCentralHealth } from "../api.js";
+import { PageHeader } from "../components/page-header.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card.js";
+import { Badge } from "../components/ui/badge.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+const STATUS_VARIANT = {
+    healthy: "default",
+    degraded: "secondary",
+    error: "destructive",
+};
+function OverallStatusBadge({ status }) {
+    return (_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-2 rounded-full border border-border", children: [_jsx("div", { className: `w-2.5 h-2.5 rounded-full ${status === "healthy"
+                    ? "bg-primary animate-pulse"
+                    : status === "degraded"
+                        ? "bg-amber-500"
+                        : "bg-destructive"}` }), _jsx(Badge, { variant: STATUS_VARIANT[status] ?? "secondary", className: "capitalize", children: status })] }));
+}
+function WorkspaceCard({ ws, t }) {
+    return (_jsx(Card, { className: `border-l-4 ${ws.status === "healthy"
+            ? "border-l-primary"
+            : ws.status === "degraded"
+                ? "border-l-amber-500"
+                : "border-l-destructive"}`, children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: ws.name }), _jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: ws.path })] }), _jsxs("div", { className: "flex gap-6 items-center", children: [_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xl font-bold", children: ws.gfi >= 0 ? ws.gfi : "N/A" }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.gfiLabel") })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xl font-bold", children: ws.principleCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.principlesLabel") })] }), _jsx(OverallStatusBadge, { status: ws.status })] })] }) }) }));
+}
+function HealthDetailCard({ ws, t }) {
+    return (_jsx(Card, { className: `border-l-4 ${ws.status === "healthy"
+            ? "border-l-primary"
+            : ws.status === "degraded"
+                ? "border-l-amber-500"
+                : "border-l-destructive"}`, children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex justify-between items-center mb-3", children: [_jsx("span", { className: "font-semibold", children: ws.name }), _jsx(OverallStatusBadge, { status: ws.status })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "text-center p-2 rounded-md bg-muted/50", children: [_jsx("div", { className: "text-lg font-bold", children: ws.gfi >= 0 ? ws.gfi : "N/A" }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.gfiLabel") })] }), _jsxs("div", { className: "text-center p-2 rounded-md bg-muted/50", children: [_jsx("div", { className: "text-lg font-bold", children: ws.activePrinciples }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.activeLabel") })] }), _jsxs("div", { className: "text-center p-2 rounded-md bg-muted/50", children: [_jsx("div", { className: "text-lg font-bold", children: ws.pendingTasks }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.pendingLabel") })] })] })] }) }));
+}
+export function CentralPage() {
+    const { t } = useTranslation();
+    const overview = useAutoRefresh(fetchCentralOverview, 30000);
+    const health = useAutoRefresh(fetchCentralHealth, 30000);
+    const overviewData = overview.data;
+    const healthData = health.data;
+    const isLoading = overview.loading && !overviewData;
+    const hasError = overview.error && !overviewData;
+    if (isLoading) {
+        return (_jsxs("div", { children: [_jsx(Skeleton, { className: "h-8 w-48 mb-6" }), _jsx(Card, { className: "mb-6", children: _jsx(CardContent, { className: "p-6", children: _jsx(Skeleton, { className: "h-20 w-full" }) }) }), Array.from({ length: 3 }).map((_, i) => (_jsx(Card, { className: "mb-3", children: _jsx(CardContent, { className: "p-4", children: _jsx(Skeleton, { className: "h-12 w-full" }) }) }, i)))] }));
+    }
+    if (hasError) {
+        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6", children: _jsx("p", { className: "text-destructive", children: overview.error }) }) }));
+    }
+    if (!overviewData) {
+        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6 text-center text-muted-foreground", children: t("pages:central.noWorkspaceData") }) }));
+    }
+    const overallStatus = healthData?.overallStatus ?? "error";
+    const healthyCount = overviewData.workspaces.filter((w) => w.status === "healthy").length;
+    const degradedCount = overviewData.workspaces.filter((w) => w.status === "degraded").length;
+    const errorCount = overviewData.workspaces.filter((w) => w.status === "error").length;
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: t("pages:central.title"), description: t("pages:central.description"), onRefresh: () => { overview.refresh(); health.refresh(); }, lastUpdated: overview.lastUpdated ? new Date(overview.lastUpdated) : undefined }), _jsx(Card, { className: "mb-6", children: _jsx(CardContent, { className: "p-6", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: t("pages:central.overallStatus") }), _jsx(OverallStatusBadge, { status: overallStatus })] }), _jsxs("div", { className: "flex gap-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-3xl font-bold text-primary", children: healthyCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.healthy") })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-3xl font-bold text-amber-500", children: degradedCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.degraded") })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-3xl font-bold text-destructive", children: errorCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.error") })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-3xl font-bold", children: overviewData.workspaceCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:central.total") })] })] })] }) }) }), _jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:central.workspaces") }) }), _jsx(CardContent, { children: overviewData.workspaces.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: t("pages:central.noWorkspaces") })) : (_jsx("div", { className: "space-y-3", children: overviewData.workspaces.map((ws) => (_jsx(WorkspaceCard, { ws: ws, t: t }, ws.name))) })) })] }), healthData && healthData.workspaces.length > 0 && (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:central.healthDetails") }) }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-3", children: healthData.workspaces.map((ws) => (_jsx(HealthDetailCard, { ws: ws, t: t }, ws.name))) }) })] }))] }));
+}

package/console/dist/ui/pages/DataFlowPage.d.ts

@@ -0,0 +1 @@
+export declare function DataFlowPage(): import("react/jsx-runtime").JSX.Element | null;

package/console/dist/ui/pages/DataFlowPage.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { PageHeader } from '../components/page-header.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card.js';
+import { Badge } from '../components/ui/badge.js';
+import { formatTime } from '../utils/format.js';
+import { Button } from '../components/ui/button.js';
+import { Skeleton } from '../components/ui/skeleton.js';
+import { AlertTriangle, ArrowRight, CheckCircle, Clock, XCircle, Zap, ListTodo, Sparkles, Shield, ChevronRight, TrendingUp, Activity, } from 'lucide-react';
+import { fetchPipelineStats } from '../api.js';
+const STAGE_META = {
+    pain_signal: {
+        icon: Zap,
+        href: '/event-log?type=pain_signal',
+        gradient: 'from-amber-500 to-orange-500',
+        bgGlow: 'bg-amber-500/10',
+        label: 'Pain Signal',
+    },
+    task_created: {
+        icon: ListTodo,
+        href: '/tasks',
+        gradient: 'from-blue-500 to-indigo-500',
+        bgGlow: 'bg-blue-500/10',
+        label: 'Task Created',
+    },
+    candidate_generated: {
+        icon: Sparkles,
+        href: '/evolution',
+        gradient: 'from-purple-500 to-fuchsia-500',
+        bgGlow: 'bg-purple-500/10',
+        label: 'Candidate Generated',
+    },
+    principle_added: {
+        icon: Shield,
+        href: '/principles',
+        gradient: 'from-emerald-500 to-teal-500',
+        bgGlow: 'bg-emerald-500/10',
+        label: 'Principle Added',
+    },
+};
+const STATUS_CONFIG = {
+    normal: {
+        icon: CheckCircle,
+        label: '正常',
+        badge: 'default',
+        ring: 'ring-green-500/30',
+        pulse: '',
+    },
+    slow: {
+        icon: Clock,
+        label: '缓慢',
+        badge: 'secondary',
+        ring: 'ring-yellow-500/30',
+        pulse: 'animate-pulse',
+    },
+    stuck: {
+        icon: XCircle,
+        label: '卡住',
+        badge: 'destructive',
+        ring: 'ring-red-500/30',
+        pulse: '',
+    },
+};
+function StageCard({ stage, index }) {
+    const navigate = useNavigate();
+    const meta = STAGE_META[stage.id] ?? {
+        icon: Activity,
+        href: '#',
+        gradient: 'from-gray-500 to-gray-600',
+        bgGlow: 'bg-gray-500/10',
+        label: stage.name,
+    };
+    const statusCfg = STATUS_CONFIG[stage.status] ?? STATUS_CONFIG.stuck;
+    const StatusIcon = statusCfg.icon;
+    const StageIcon = meta.icon;
+    const formatDuration = (ms) => {
+        if (ms === null)
+            return '-';
+        if (ms < 60000)
+            return `${Math.round(ms / 1000)}s`;
+        if (ms < 3600000)
+            return `${Math.round(ms / 60000)}m`;
+        return `${Math.round(ms / 3600000)}h`;
+    };
+    const formatTimeAgo = (timestamp) => {
+        if (!timestamp)
+            return '从未';
+        const now = new Date();
+        const time = new Date(timestamp);
+        const diffMs = now.getTime() - time.getTime();
+        const diffMin = Math.floor(diffMs / 60000);
+        if (diffMin < 1)
+            return '刚刚';
+        if (diffMin < 60)
+            return `${diffMin} 分钟前`;
+        const diffHour = Math.floor(diffMin / 60);
+        if (diffHour < 24)
+            return `${diffHour} 小时前`;
+        return `${Math.floor(diffHour / 24)} 天前`;
+    };
+    return (_jsxs("div", { className: "relative", children: [_jsxs(Card, { className: `group cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-[1.01] ring-2 ${statusCfg.ring} overflow-hidden`, onClick: () => navigate(meta.href), children: [_jsx("div", { className: `absolute inset-0 ${meta.bgGlow} opacity-40 group-hover:opacity-60 transition-opacity` }), _jsxs("div", { className: "relative", children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `w-10 h-10 rounded-xl bg-gradient-to-br ${meta.gradient} flex items-center justify-center text-white shadow-md`, children: _jsx(StageIcon, { className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base group-hover:text-primary transition-colors", children: meta.label }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx(StatusIcon, { className: `w-3.5 h-3.5 ${statusCfg.badge === 'destructive' ? 'text-red-500' : statusCfg.badge === 'secondary' ? 'text-yellow-500' : 'text-green-500'}` }), _jsx(Badge, { variant: statusCfg.badge, className: "text-[10px] px-1.5 py-0", children: statusCfg.label })] })] })] }), _jsx(ChevronRight, { className: "w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" })] }) }), _jsxs(CardContent, { className: "space-y-3 pt-0", children: [_jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "\u4ECA\u65E5\u5904\u7406" }), _jsx("p", { className: "text-2xl font-bold mt-0.5", children: stage.count })] }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "\u5E73\u5747\u95F4\u9694" }), _jsx("p", { className: "text-2xl font-bold mt-0.5", children: formatDuration(stage.avgDuration) })] }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "\u4E0A\u6B21\u5904\u7406" }), _jsx("p", { className: "text-sm font-semibold mt-1", children: formatTimeAgo(stage.lastProcessed) })] })] }), stage.gapMinutes !== null && stage.gapMinutes > 5 && (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground bg-muted/50 rounded-md px-2 py-1", children: [_jsx(Clock, { className: "w-3 h-3" }), "\u8DDD\u4E0A\u6B21\u5904\u7406: ", Math.floor(stage.gapMinutes), " \u5206\u949F"] }))] })] })] }), index < 3 && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-1 h-1 rounded-full bg-muted-foreground/40" }), _jsx("div", { className: "w-1 h-1 rounded-full bg-muted-foreground/60" }), _jsx(ArrowRight, { className: "w-4 h-4 text-muted-foreground/80" }), _jsx("div", { className: "w-1 h-1 rounded-full bg-muted-foreground/60" }), _jsx("div", { className: "w-1 h-1 rounded-full bg-muted-foreground/40" })] }) }))] }));
+}
+function BottleneckAlert({ bottleneck }) {
+    return (_jsxs("div", { className: `flex items-center gap-3 p-3 rounded-lg ${bottleneck.severity === 'critical' ? 'bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800' :
+            'bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800'}`, children: [_jsx(AlertTriangle, { className: `w-5 h-5 ${bottleneck.severity === 'critical' ? 'text-red-500' : 'text-yellow-500'}` }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium", children: bottleneck.description }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [bottleneck.fromStage, " \u2192 ", bottleneck.toStage] })] }), _jsxs(Badge, { variant: bottleneck.severity === 'critical' ? 'destructive' : 'secondary', children: [bottleneck.gapMinutes.toFixed(1), " \u5206\u949F\u5EF6\u8FDF"] })] }));
+}
+function LoadingSkeleton() {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsx(Skeleton, { className: "h-8 w-40" }), _jsx(Skeleton, { className: "h-8 w-24" })] }), _jsx("div", { className: "grid grid-cols-3 gap-4 mb-6", children: [1, 2, 3].map(i => _jsx(Skeleton, { className: "h-24" }, i)) }), _jsx("div", { className: "space-y-2", children: [1, 2, 3, 4].map(i => (_jsx("div", { className: "relative", children: _jsx(Skeleton, { className: "h-44 w-full" }) }, i))) })] }));
+}
+function SummaryStatCard({ icon: Icon, label, value, colorClass }) {
+    return (_jsx(Card, { className: "transition-all duration-200 hover:shadow-md", children: _jsx(CardContent, { className: "p-5", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `p-2.5 rounded-xl ${colorClass}`, children: _jsx(Icon, { className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-muted-foreground uppercase tracking-wider", children: label }), _jsx("p", { className: "text-2xl font-bold", children: value })] })] }) }) }));
+}
+export function DataFlowPage() {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const fetchData = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await fetchPipelineStats();
+            if (!result.success) {
+                setError(result.error || 'Failed to fetch pipeline stats');
+            }
+            else if (result.data) {
+                setData(result.data);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Unknown error');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchData();
+        const interval = setInterval(fetchData, 15000);
+        return () => clearInterval(interval);
+    }, []);
+    if (loading && !data) {
+        return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u6570\u636E\u6D41", description: "Pain Chain \u7BA1\u9053\u72B6\u6001\u76D1\u63A7" }), _jsx(LoadingSkeleton, {})] }));
+    }
+    if (error && !data) {
+        return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u6570\u636E\u6D41", description: "Pain Chain \u7BA1\u9053\u72B6\u6001\u76D1\u63A7", onRefresh: fetchData }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-6", children: [_jsxs("p", { className: "text-destructive", children: ["\u52A0\u8F7D\u5931\u8D25: ", error] }), _jsx(Button, { onClick: fetchData, className: "mt-4", children: "\u91CD\u8BD5" })] }) })] }));
+    }
+    if (!data) {
+        return null;
+    }
+    const normalCount = data.stages.filter(s => s.status === 'normal').length;
+    const hasCriticalBottleneck = data.bottlenecks.some(b => b.severity === 'critical');
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(PageHeader, { title: "\u6570\u636E\u6D41", description: "Pain Chain \u7BA1\u9053\u72B6\u6001\u76D1\u63A7", onRefresh: fetchData }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(SummaryStatCard, { icon: TrendingUp, label: "\u4ECA\u65E5\u5904\u7406", value: data.totalProcessed, colorClass: "bg-primary/10 text-primary" }), _jsx(SummaryStatCard, { icon: CheckCircle, label: "\u6B63\u5E38\u8FD0\u884C", value: normalCount, colorClass: "bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400" }), _jsx(SummaryStatCard, { icon: AlertTriangle, label: "\u74F6\u9888\u68C0\u6D4B", value: data.bottlenecks.length, colorClass: hasCriticalBottleneck
+                            ? 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400'
+                            : data.bottlenecks.length > 0
+                                ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400'
+                                : 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400' })] }), data.bottlenecks.length > 0 && (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "w-4 h-4 text-yellow-500" }), "\u68C0\u6D4B\u5230\u7684\u74F6\u9888"] }) }), _jsx(CardContent, { className: "space-y-2", children: data.bottlenecks.map((bottleneck, index) => (_jsx(BottleneckAlert, { bottleneck: bottleneck }, index))) })] })), _jsx("div", { className: "space-y-1", children: data.stages.map((stage, index) => (_jsx(StageCard, { stage: stage, index: index }, stage.id))) }), _jsx(Card, { className: "bg-muted/50", children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: "\u6570\u636E\u5237\u65B0\u95F4\u9694: 15 \u79D2" }), _jsxs("span", { children: ["\u6700\u540E\u66F4\u65B0: ", formatTime(data.generatedAt)] })] }) }) })] }));
+}

package/console/dist/ui/pages/EventLogPage.d.ts

@@ -0,0 +1 @@
+export declare function EventLogPage(): import("react/jsx-runtime").JSX.Element;