create-principles-disciple 1.0.0 → 1.74.0

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

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { PageHeader } from '../components/page-header.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card.js';
+import { Button } from '../components/ui/button.js';
+import { Badge } from '../components/ui/badge.js';
+import { Input } from '../components/ui/input.js';
+import { ChevronLeft, ChevronRight, Filter, RefreshCw, Link, Clock, AlertTriangle, Search, } from 'lucide-react';
+import { fetchEvents, fetchEventsGrouped, fetchRelatedEvents } from '../api.js';
+import { formatDate } from '../utils/format.js';
+const EVENT_COLORS = {
+    pain_signal: 'destructive',
+    gate_block: 'destructive',
+    empathy_rollback: 'secondary',
+};
+const COMMON_EVENT_TYPES = [
+    'all',
+    'pain_signal',
+    'gate_block',
+    'diagnosis_task',
+    'evolution_task',
+    'principle_candidate',
+    'rule_promotion',
+    'empathy_rollback',
+];
+export function EventLogPage() {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { t } = useTranslation();
+    const [events, setEvents] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [page, setPage] = useState(() => {
+        const p = searchParams.get("page");
+        return p ? Math.max(1, parseInt(p, 10) || 1) : 1;
+    });
+    const [totalPages, setTotalPages] = useState(0);
+    const [total, setTotal] = useState(0);
+    const [pageSize] = useState(50);
+    const [selectedTypes, setSelectedTypes] = useState(() => {
+        const typesParam = searchParams.get("types");
+        if (typesParam) {
+            return typesParam.split(",").filter((t) => COMMON_EVENT_TYPES.includes(t));
+        }
+        const typeParam = searchParams.get("type");
+        return typeParam && COMMON_EVENT_TYPES.includes(typeParam) ? [typeParam] : [];
+    });
+    const [searchQuery, setSearchQuery] = useState(() => searchParams.get("search") ?? "");
+    const [startDate, setStartDate] = useState(() => searchParams.get("start") ?? "");
+    const [endDate, setEndDate] = useState(() => searchParams.get("end") ?? "");
+    const [typeCounts, setTypeCounts] = useState(null);
+    const [selectedEventId, setSelectedEventId] = useState(null);
+    const [relatedEvents, setRelatedEvents] = useState(null);
+    const [loadingRelated, setLoadingRelated] = useState(false);
+    const [showFilters, setShowFilters] = useState(false);
+    const loadEvents = async (newPage = 1) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await fetchEvents({
+                types: selectedTypes.length > 0 ? selectedTypes : undefined,
+                startDate: startDate || undefined,
+                endDate: endDate || undefined,
+                searchQuery: searchQuery || undefined,
+                page: newPage,
+                pageSize,
+            });
+            if (!result.success) {
+                setError(result.error || 'Failed to load events');
+            }
+            else if (result.data) {
+                setEvents(result.data.events);
+                setTotal(result.data.total);
+                setTotalPages(result.data.totalPages);
+                setPage(newPage);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Unknown error');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const loadTypeCounts = async () => {
+        try {
+            const result = await fetchEventsGrouped();
+            if (result.success && result.data) {
+                setTypeCounts(result.data);
+            }
+        }
+        catch {
+            // ignore
+        }
+    };
+    const loadRelatedEvents = async (eventId) => {
+        setLoadingRelated(true);
+        try {
+            const result = await fetchRelatedEvents(eventId, 10);
+            if (result.success && result.data) {
+                setRelatedEvents(result.data.events);
+            }
+        }
+        catch {
+            // ignore
+        }
+        finally {
+            setLoadingRelated(false);
+        }
+    };
+    useEffect(() => {
+        loadEvents();
+        loadTypeCounts();
+    }, []);
+    useEffect(() => {
+        setPage(1);
+        loadEvents(1);
+    }, [selectedTypes, searchQuery, startDate, endDate]);
+    useEffect(() => {
+        const params = new URLSearchParams();
+        if (selectedTypes.length > 0)
+            params.set("types", selectedTypes.join(","));
+        if (searchQuery)
+            params.set("search", searchQuery);
+        if (startDate)
+            params.set("start", startDate);
+        if (endDate)
+            params.set("end", endDate);
+        if (page > 1)
+            params.set("page", String(page));
+        setSearchParams(params, { replace: true });
+    }, [selectedTypes, searchQuery, startDate, endDate, page, setSearchParams]);
+    const handleTypeToggle = (type) => {
+        if (type === 'all') {
+            setSelectedTypes([]);
+        }
+        else {
+            if (selectedTypes.includes(type)) {
+                setSelectedTypes(selectedTypes.filter(t => t !== type));
+            }
+            else {
+                setSelectedTypes([...selectedTypes, type]);
+            }
+        }
+    };
+    const handleEventClick = (event) => {
+        if (selectedEventId === event.id) {
+            setSelectedEventId(null);
+            setRelatedEvents(null);
+        }
+        else {
+            setSelectedEventId(event.id);
+            loadRelatedEvents(event.id);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: t("pages:eventLog.title"), description: t("pages:eventLog.description"), onRefresh: () => loadEvents(page) }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsx(CardTitle, { className: "text-base", children: t("pages:eventLog.filter") }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setShowFilters(!showFilters), children: [_jsx(Filter, { className: "w-4 h-4 mr-2" }), showFilters ? t("pages:eventLog.collapse") : t("pages:eventLog.expand")] })] }) }), showFilters && (_jsxs(CardContent, { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t("pages:eventLog.eventType") }), _jsx("div", { className: "flex flex-wrap gap-2", children: COMMON_EVENT_TYPES.map(type => (_jsxs(Badge, { variant: type === 'all'
+                                                ? selectedTypes.length === 0
+                                                    ? 'default'
+                                                    : 'outline'
+                                                : selectedTypes.includes(type)
+                                                    ? EVENT_COLORS[type] || 'default'
+                                                    : 'outline', className: "cursor-pointer", role: "button", tabIndex: 0, onClick: () => handleTypeToggle(type), onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") {
+                                                e.preventDefault();
+                                                handleTypeToggle(type);
+                                            } }, children: [type, typeCounts && typeCounts[type] !== undefined && (_jsxs("span", { className: "ml-1", children: ["(", typeCounts[type], ")"] }))] }, type))) })] }), _jsxs("div", { className: "flex gap-4 flex-wrap", children: [_jsxs("div", { className: "flex-1 min-w-[200px]", children: [_jsx("label", { htmlFor: "start-date", className: "text-sm text-muted-foreground mb-1 block", children: t("pages:eventLog.startDate") }), _jsx(Input, { id: "start-date", type: "date", value: startDate, onChange: (e) => setStartDate(e.target.value), className: "h-9" })] }), _jsxs("div", { className: "flex-1 min-w-[200px]", children: [_jsx("label", { htmlFor: "end-date", className: "text-sm text-muted-foreground mb-1 block", children: t("pages:eventLog.endDate") }), _jsx(Input, { id: "end-date", type: "date", value: endDate, onChange: (e) => setEndDate(e.target.value), className: "h-9" })] }), _jsxs("div", { className: "flex-1 min-w-[200px]", children: [_jsx("label", { htmlFor: "event-search", className: "text-sm text-muted-foreground mb-1 block", children: t("common:search") }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }), _jsx(Input, { id: "event-search", type: "text", placeholder: t("pages:eventLog.searchPlaceholder"), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "h-9 pl-8" })] }), _jsx(Button, { onClick: () => setSearchQuery(''), variant: "ghost", children: t("pages:eventLog.clear") })] })] })] }), _jsxs("div", { className: "flex justify-end", children: [_jsx(Button, { onClick: () => {
+                                            setSelectedTypes([]);
+                                            setSearchQuery('');
+                                            setStartDate('');
+                                            setEndDate('');
+                                            setSearchParams({}, { replace: true });
+                                        }, variant: "ghost", children: t("pages:eventLog.reset") }), _jsxs(Button, { onClick: () => loadEvents(page), className: "ml-2", children: [_jsx(RefreshCw, { className: "w-4 h-4 mr-2" }), t("pages:eventLog.apply")] })] })] }))] }), error && (_jsx(Card, { className: "border-destructive/20 bg-destructive/10", children: _jsx(CardContent, { className: "p-4", children: _jsxs("div", { className: "flex items-center gap-2 text-destructive", children: [_jsx(AlertTriangle, { className: "w-4 h-4" }), _jsx("p", { children: error })] }) }) })), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [_jsxs("div", { className: "lg:col-span-2 space-y-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["\u663E\u793A ", (page - 1) * pageSize + 1, "-", Math.min(page * pageSize, total), " / ", total] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: page <= 1 || loading, onClick: () => loadEvents(page - 1), children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsxs("span", { className: "py-2 px-3 text-sm", children: [page, " / ", totalPages || 1] }), _jsx(Button, { variant: "ghost", size: "sm", disabled: page >= totalPages || loading, onClick: () => loadEvents(page + 1), children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] })] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsx("div", { className: "h-[600px] overflow-y-auto", children: loading && !events.length ? (_jsx("div", { className: "p-8 text-center", children: _jsx("div", { className: "animate-pulse text-muted-foreground", children: t("pages:eventLog.loading") }) })) : events.length === 0 ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: t("pages:eventLog.noMatchingEvents") })) : (_jsx("div", { className: "divide-y", children: events.map((event) => (_jsxs("div", { className: `p-4 hover:bg-muted/50 cursor-pointer transition-colors ${selectedEventId === event.id ? 'bg-muted' : ''}`, role: "button", tabIndex: 0, onClick: () => handleEventClick(event), onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") {
+                                                    e.preventDefault();
+                                                    handleEventClick(event);
+                                                } }, children: [_jsxs("div", { className: "flex items-start justify-between mb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: EVENT_COLORS[event.type] || 'default', children: event.type }), _jsxs("span", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), formatDate(event.ts)] })] }), event.category && (_jsx(Badge, { variant: "outline", children: event.category }))] }), event.data && (_jsx("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: JSON.stringify(event.data, null, 2) }))] }, event.id))) })) }) }) })] }), _jsxs("div", { className: "lg:col-span-1", children: [selectedEventId && relatedEvents && (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [_jsx(Link, { className: "w-4 h-4" }), t("pages:eventLog.relatedEvents")] }) }), _jsx(CardContent, { className: "space-y-3", children: loadingRelated ? (_jsx("div", { className: "text-sm text-muted-foreground animate-pulse", children: t("pages:eventLog.loading") })) : relatedEvents.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground", children: t("pages:eventLog.noRelatedEvents") })) : (_jsx("div", { className: "space-y-2", children: relatedEvents.map((event) => (_jsxs("div", { className: `p-2 rounded text-sm ${event.id === selectedEventId ? 'bg-primary/10' : 'bg-muted'}`, children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx(Badge, { variant: EVENT_COLORS[event.type] || 'outline', className: "text-xs", children: event.type }), event.id === selectedEventId && (_jsx(Badge, { variant: "default", className: "text-xs", children: t("pages:eventLog.current") }))] }), _jsx("p", { className: "text-xs text-muted-foreground", children: formatDate(event.ts) })] }, event.id))) })) })] })), typeCounts && (_jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-base", children: t("pages:eventLog.eventStats") }) }), _jsx(CardContent, { className: "space-y-2", children: Object.entries(typeCounts).sort((a, b) => b[1] - a[1]).map(([type, count]) => (_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "flex items-center gap-2", children: _jsx(Badge, { variant: EVENT_COLORS[type] || 'outline', className: "text-xs", children: type }) }), _jsx("span", { className: "font-mono", children: count })] }, type))) })] }))] })] })] }));
+}

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

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

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

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { fetchEvolutionStats, fetchEvolutionTasks, fetchEvolutionPrinciples, fetchEvolutionQueue } from "../api.js";
+import { PageHeader } from "../components/page-header.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card.js";
+import { Button } from "../components/ui/button.js";
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "../components/ui/select.js";
+import { Badge } from "../components/ui/badge.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { formatDate } from "../utils/format.js";
+const STATUS_COLORS = {
+    pending: "text-amber-500",
+    leased: "text-blue-500",
+    succeeded: "text-primary",
+    retry_wait: "text-purple-500",
+    failed: "text-destructive",
+};
+const PRINCIPLE_STATUS_COLORS = {
+    candidate: "text-amber-500",
+    probation: "text-blue-500",
+    active: "text-primary",
+    deprecated: "text-destructive",
+    archived: "text-muted-foreground",
+};
+function StatCard({ label, value, color }) {
+    return (_jsx(Card, { className: "transition-all duration-200 hover:shadow-md", children: _jsxs(CardContent, { className: "p-4 text-center", children: [_jsx("div", { className: `text-2xl font-bold ${color}`, children: value }), _jsx("div", { className: "text-xs text-muted-foreground mt-1", children: label })] }) }));
+}
+export function EvolutionPage() {
+    const { t } = useTranslation();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [stats, setStats] = useState(null);
+    const [tasks, setTasks] = useState(null);
+    const [principles, setPrinciples] = useState(null);
+    const [queue, setQueue] = useState(null);
+    const [error, setError] = useState("");
+    const [statusFilter, setStatusFilter] = useState(() => searchParams.get("status") ?? "all");
+    const [page, setPage] = useState(() => {
+        const p = searchParams.get("page");
+        return p ? Math.max(1, parseInt(p, 10) || 1) : 1;
+    });
+    useEffect(() => {
+        const params = new URLSearchParams();
+        if (statusFilter !== "all")
+            params.set("status", statusFilter);
+        if (page > 1)
+            params.set("page", String(page));
+        setSearchParams(params, { replace: true });
+    }, [statusFilter, page, setSearchParams]);
+    useEffect(() => {
+        Promise.all([
+            fetchEvolutionStats(),
+            fetchEvolutionPrinciples(),
+            fetchEvolutionQueue(),
+        ]).then(([statsRes, principlesRes, queueRes]) => {
+            if (statsRes.success)
+                setStats(statsRes.data);
+            if (principlesRes.success)
+                setPrinciples(principlesRes.data);
+            if (queueRes.success)
+                setQueue(queueRes.data);
+            setError("");
+        }).catch((err) => setError(String(err)));
+    }, []);
+    useEffect(() => {
+        fetchEvolutionTasks(statusFilter, page).then((result) => {
+            if (result.success) {
+                setTasks(result.data);
+                setError("");
+            }
+            else {
+                setError(result.error);
+            }
+        });
+    }, [statusFilter, page]);
+    const refreshAll = async () => {
+        try {
+            const [statsRes, principlesRes, queueRes] = await Promise.all([
+                fetchEvolutionStats(),
+                fetchEvolutionPrinciples(),
+                fetchEvolutionQueue(),
+            ]);
+            if (statsRes.success)
+                setStats(statsRes.data);
+            if (principlesRes.success)
+                setPrinciples(principlesRes.data);
+            if (queueRes.success)
+                setQueue(queueRes.data);
+            const tasksRes = await fetchEvolutionTasks(statusFilter, page);
+            if (tasksRes.success)
+                setTasks(tasksRes.data);
+            const errors = [statsRes, principlesRes, queueRes, tasksRes]
+                .filter((r) => !r.success)
+                .map((r) => r.error)
+                .filter(Boolean);
+            if (errors.length > 0) {
+                setError(errors.join("; "));
+            }
+            else {
+                setError("");
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    };
+    if (error && !stats) {
+        return (_jsx(Card, { children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-destructive", children: error }), _jsx(Button, { variant: "outline", className: "mt-4", onClick: () => window.location.reload(), children: t("components:errorBoundary.retry") })] }) }));
+    }
+    if (!stats) {
+        return (_jsxs("div", { children: [_jsx(Skeleton, { className: "h-8 w-48 mb-6" }), _jsx("div", { className: "flex gap-3 mb-6", children: Array.from({ length: 4 }).map((_, i) => (_jsx(Card, { children: _jsx(CardContent, { className: "p-4", children: _jsx(Skeleton, { className: "h-10 w-20" }) }) }, i))) })] }));
+    }
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: t("pages:evolution.title"), description: t("pages:evolution.description"), onRefresh: refreshAll }), _jsxs("div", { className: "flex gap-3 mb-6 flex-wrap", children: [_jsx(StatCard, { label: t("common:pending"), value: stats.pending, color: STATUS_COLORS.pending }), _jsx(StatCard, { label: t("pages:evolution.inProgress"), value: stats.inProgress, color: STATUS_COLORS.leased }), _jsx(StatCard, { label: t("common:completed"), value: stats.completed, color: STATUS_COLORS.succeeded }), _jsx(StatCard, { label: t("common:failed"), value: stats.failed, color: STATUS_COLORS.failed })] }), principles && (_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm", children: t("pages:evolution.principleLifecycle") }) }), _jsxs(CardContent, { children: [_jsxs("div", { className: "flex gap-2 mb-4 flex-wrap", children: [Object.entries(principles.summary)
+                                                .filter(([k]) => k !== "total")
+                                                .map(([key, value]) => (_jsxs(Badge, { variant: "outline", className: PRINCIPLE_STATUS_COLORS[key] ?? "", children: [key, ": ", _jsx("strong", { className: "ml-1", children: value })] }, key))), _jsxs(Badge, { variant: "secondary", children: ["total: ", _jsx("strong", { className: "ml-1", children: principles.summary.total })] })] }), principles.recent.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: t("pages:evolution.recentTransitions") }), principles.recent.slice(0, 5).map((p, i) => (_jsxs("div", { className: "py-2 border-b border-border last:border-0", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-xs", children: p.principleId }), _jsx(Badge, { variant: "outline", className: "text-xs", children: p.status })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(p.updatedAt) })] }), _jsx("p", { className: "text-xs text-muted-foreground mt-1 line-clamp-1", children: (p.text ?? "").slice(0, 100) })] }, `${p.principleId}-${i}`)))] }))] })] }), queue && (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm", children: t("pages:evolution.queueHealth") }) }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "p-3 rounded-md bg-amber-500/10", children: [_jsx("div", { className: "text-xl font-bold text-amber-500", children: queue.pendingCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("common:pending") })] }), _jsxs("div", { className: "p-3 rounded-md bg-primary/10", children: [_jsx("div", { className: "text-xl font-bold text-primary", children: queue.readyTaskCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:evolution.ready") })] }), _jsxs("div", { className: "p-3 rounded-md bg-purple-500/10", children: [_jsx("div", { className: "text-xl font-bold text-purple-500", children: queue.retryWaitCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:evolution.retryWait") })] }), _jsxs("div", { className: "p-3 rounded-md bg-destructive/10", children: [_jsx("div", { className: "text-xl font-bold text-destructive", children: queue.blockedCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: t("pages:evolution.blocked") })] })] }), queue.noReadyTasksReason && (_jsxs("div", { className: "mt-3 p-2 rounded-md bg-destructive/10 text-xs text-destructive", children: ["No ready tasks: ", queue.noReadyTasksReason] })), Object.keys(queue.countsByTaskKind).length > 0 && (_jsxs("div", { className: "mt-3", children: [_jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: t("pages:evolution.byTaskKind") }), Object.entries(queue.countsByTaskKind).map(([kind, count]) => (_jsxs("div", { className: "flex justify-between text-xs py-1", children: [_jsx("span", { className: "text-muted-foreground", children: kind }), _jsx("strong", { children: count })] }, kind)))] }))] })] }))] })), stats.stageDistribution.length > 0 && (_jsx(Card, { className: "mb-6", children: _jsxs(CardContent, { className: "p-4", children: [_jsx("h3", { className: "text-sm font-medium mb-3", children: t("pages:evolution.stageDistribution") }), _jsx("div", { className: "flex gap-2 flex-wrap", children: stats.stageDistribution.map((stage) => (_jsxs(Badge, { variant: "outline", children: [_jsx("span", { className: STATUS_COLORS[stage.stage] ?? "", children: stage.stage }), ": ", stage.count] }, stage.stage))) })] }) })), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex justify-between items-center", children: [_jsx(CardTitle, { className: "text-sm", children: t("pages:evolution.taskList") }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("label", { className: "text-xs text-muted-foreground", children: [t("common:status"), ":"] }), _jsxs(Select, { value: statusFilter, onValueChange: (v) => { setStatusFilter(v); setPage(1); }, children: [_jsx(SelectTrigger, { className: "h-8 text-xs w-[120px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: t("common:all") }), _jsx(SelectItem, { value: "pending", children: t("common:pending") }), _jsx(SelectItem, { value: "leased", children: t("pages:evolution.leased") }), _jsx(SelectItem, { value: "succeeded", children: t("common:completed") }), _jsx(SelectItem, { value: "retry_wait", children: t("pages:evolution.retryWait") }), _jsx(SelectItem, { value: "failed", children: t("common:failed") })] })] })] })] }) }), _jsxs(CardContent, { className: "max-h-[400px] overflow-y-auto", children: [tasks && tasks.items.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: t("components:zoneSection.empty") })), tasks && tasks.items.map((task) => (_jsxs("div", { className: "py-2 border-b border-border last:border-0", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("div", { children: [_jsxs("span", { className: `font-medium text-xs ${STATUS_COLORS[task.status] ?? ""}`, children: [task.taskId.slice(0, 16), "\u2026"] }), _jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: task.taskKind })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "text-xs", children: task.status }), task.leaseOwner && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["leased by ", task.leaseOwner.slice(0, 8)] }))] })] }), _jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: formatDate(task.createdAt) })] }, task.taskId)))] }), tasks && tasks.pagination.totalPages > 1 && (_jsxs("div", { className: "flex justify-center items-center gap-3 p-3 border-t border-border", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: page <= 1, onClick: () => setPage(page - 1), children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [tasks.pagination.page, " / ", tasks.pagination.totalPages] }), _jsx(Button, { variant: "outline", size: "sm", disabled: page >= tasks.pagination.totalPages, onClick: () => setPage(page + 1), children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }))] })] }));
+}

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

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

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAutoRefresh } from "../hooks/useAutoRefresh.js";
+import { fetchFeedbackGfi, fetchEmpathyEvents, fetchFeedbackGateBlocks } 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";
+import { Separator } from "../components/ui/separator.js";
+import { formatDate } from "../utils/format.js";
+const SEVERITY_VARIANT = {
+    low: "default",
+    medium: "secondary",
+    high: "destructive",
+};
+function GfiGauge({ gfi }) {
+    const { t } = useTranslation();
+    if (!gfi) {
+        return (_jsx(Card, { className: "mb-6", children: _jsxs(CardContent, { className: "p-6", children: [_jsx(Skeleton, { className: "h-4 w-32 mb-4" }), _jsx(Skeleton, { className: "h-10 w-20 mb-2" }), _jsx(Skeleton, { className: "h-3 w-full" })] }) }));
+    }
+    const threshold = gfi.threshold || 1;
+    const percentage = Math.min((gfi.current / threshold) * 100, 100);
+    const barColor = percentage < 50
+        ? "bg-primary"
+        : percentage < 80
+            ? "bg-amber-500"
+            : "bg-destructive";
+    return (_jsx(Card, { className: "mb-6", children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground mb-3", children: t("pages:feedback.gfiFull") }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "text-4xl font-bold text-primary", children: gfi.current }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "h-3 rounded-full bg-muted overflow-hidden", children: _jsx("div", { className: `h-full rounded-full transition-all duration-300 ${barColor}`, style: { width: `${percentage}%` } }) }), _jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mt-1", children: [_jsx("span", { children: "0" }), _jsxs("span", { children: [t("pages:feedback.source"), ": ", gfi.threshold] })] })] })] }), _jsxs("p", { className: "text-xs text-muted-foreground mt-2", children: [t("pages:feedback.peakToday"), " ", gfi.peakToday] }), Object.keys(gfi.sources).length > 0 && (_jsxs("div", { className: "mt-4", children: [_jsx(Separator, { className: "mb-3" }), _jsx("p", { className: "text-xs text-muted-foreground mb-2", children: t("pages:feedback.source") }), Object.entries(gfi.sources).map(([source, value]) => (_jsxs("div", { className: "flex justify-between text-sm py-1", children: [_jsx("span", { children: source }), _jsx("span", { className: "font-bold", children: value })] }, source)))] }))] }) }));
+}
+export function FeedbackPage() {
+    const { t } = useTranslation();
+    const gfi = useAutoRefresh(fetchFeedbackGfi, 30000);
+    const empathy = useAutoRefresh(() => fetchEmpathyEvents(20), 30000);
+    const blocks = useAutoRefresh(() => fetchFeedbackGateBlocks(20), 30000);
+    const refreshAll = () => {
+        gfi.refresh();
+        empathy.refresh();
+        blocks.refresh();
+    };
+    const lastUpdated = gfi.lastUpdated ?? empathy.lastUpdated ?? blocks.lastUpdated;
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: t("pages:feedback.title"), description: t("pages:feedback.description"), onRefresh: refreshAll, lastUpdated: lastUpdated ? new Date(lastUpdated) : undefined }), _jsx(GfiGauge, { gfi: gfi.data }), _jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:feedback.empathyEvents") }) }), _jsxs(CardContent, { children: [empathy.error && (_jsx("p", { className: "text-destructive mb-3", children: empathy.error })), !empathy.data || empathy.data.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: t("components:zoneSection.empty") })) : (_jsx("div", { className: "flex flex-col gap-3", children: empathy.data.map((event, i) => (_jsx(Card, { className: `border-l-4 ${event.severity === "high"
+                                        ? "border-l-destructive"
+                                        : event.severity === "medium"
+                                            ? "border-l-amber-500"
+                                            : "border-l-primary"}`, children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx(Badge, { variant: SEVERITY_VARIANT[event.severity] ?? "secondary", children: event.severity }), _jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(event.timestamp) })] }), _jsx("p", { className: "mt-2 text-sm", children: event.reason }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [t("pages:feedback.origin"), " ", event.origin, " | ", t("pages:feedback.gfiAfter"), " ", event.gfiAfter] })] }) }, i))) }))] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:feedback.gateBlocks") }) }), _jsxs(CardContent, { children: [blocks.error && (_jsx("p", { className: "text-destructive mb-3", children: blocks.error })), !blocks.data || blocks.data.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: t("components:zoneSection.empty") })) : (_jsx("div", { className: "flex flex-col gap-3", children: blocks.data.map((block, i) => (_jsx(Card, { className: "border-l-4 border-l-destructive", children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "font-bold text-sm", children: block.toolName }), _jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(block.timestamp) })] }), _jsx("p", { className: "mt-2 text-sm", children: block.reason }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Type: ", block.gateType, " | GFI: ", block.gfi, " | Trust Stage:", " ", block.trustStage] })] }) }, i))) }))] })] })] }));
+}

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

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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAutoRefresh } from "../hooks/useAutoRefresh.js";
+import { fetchGateStats, fetchGateBlocks } 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";
+import { formatDate } from "../utils/format.js";
+const STATUS_VARIANT = {
+    healthy: "default",
+    warning: "secondary",
+    critical: "destructive",
+};
+export function GatesPage() {
+    const { t } = useTranslation();
+    const stats = useAutoRefresh(fetchGateStats, 30000);
+    const blocks = useAutoRefresh(() => fetchGateBlocks(50), 30000);
+    const refreshAll = () => {
+        stats.refresh();
+        blocks.refresh();
+    };
+    if (stats.error && !stats.data) {
+        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6", children: _jsx("p", { className: "text-destructive", children: stats.error }) }) }));
+    }
+    if (!stats.data) {
+        return (_jsxs("div", { children: [_jsx(Skeleton, { className: "h-8 w-48 mb-6" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-6", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Card, { children: _jsxs(CardContent, { className: "p-6", children: [_jsx(Skeleton, { className: "h-4 w-24 mb-3" }), _jsx(Skeleton, { className: "h-8 w-20 mb-2" }), _jsx(Skeleton, { className: "h-3 w-32" })] }) }, i))) })] }));
+    }
+    const statsData = stats.data;
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: t("pages:gates.title"), description: t("pages:gates.description"), onRefresh: refreshAll, lastUpdated: stats.lastUpdated ? new Date(stats.lastUpdated) : undefined }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-6", children: [_jsx(Card, { className: "border-l-4 border-l-primary", children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: t("pages:gates.trustStatus") }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-2xl font-bold capitalize", children: statsData.trust.status }), _jsx(Badge, { variant: STATUS_VARIANT[statsData.trust.status] ?? "secondary", children: statsData.trust.stage })] }), _jsxs("p", { className: "text-sm text-muted-foreground mb-2", children: [t("pages:gates.score"), " ", statsData.trust.score] })] }) }), _jsx(Card, { className: "border-l-4 border-l-amber-500", children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: t("pages:gates.gfiLabel") }), _jsx("div", { className: "text-2xl font-bold", children: statsData.gfi.current }), _jsx(Badge, { variant: "secondary", className: "mt-1 capitalize", children: statsData.gfi.stage }), _jsxs("p", { className: "text-xs text-muted-foreground mt-2", children: [t("pages:gates.peak"), " ", statsData.gfi.peakToday, " | ", t("pages:gates.threshold"), " ", statsData.gfi.threshold] })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: t("pages:gates.todayBlocks") }), _jsxs("div", { className: "space-y-1 text-sm", children: [_jsxs("div", { children: [t("pages:gates.gfiBlocks"), ": ", _jsx("strong", { children: statsData.today.gfiBlocks })] }), _jsxs("div", { children: [t("pages:gates.stageBlocks"), ": ", _jsx("strong", { children: statsData.today.stageBlocks })] }), _jsxs("div", { children: [t("pages:gates.bypassAttempts"), ": ", _jsx("strong", { children: statsData.today.bypassAttempts })] })] })] }) })] }), Object.keys(statsData.gfi.sources).length > 0 && (_jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:gates.sourceBreakdown") }) }), _jsx(CardContent, { children: Object.entries(statsData.gfi.sources).map(([source, value]) => (_jsxs("div", { className: "flex justify-between py-2 border-b border-border last:border-0", children: [_jsx("span", { className: "text-sm", children: source }), _jsx("span", { className: "text-sm font-bold", children: value })] }, source))) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:gates.blockHistory") }) }), _jsxs(CardContent, { children: [blocks.error && (_jsx("p", { className: "text-destructive mb-3", children: blocks.error })), !blocks.data || blocks.data.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: t("components:zoneSection.empty") })) : (_jsx("div", { className: "flex flex-col gap-3", children: blocks.data.map((block, i) => (_jsx(Card, { className: "border-l-4 border-l-destructive", children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "font-bold text-sm", children: block.toolName }), _jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(block.timestamp) })] }), _jsx("p", { className: "mt-2 text-sm", children: block.reason }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Type: ", block.gateType, " | GFI: ", block.gfi, " | Trust Stage:", " ", block.trustStage, block.filePath && _jsxs("span", { children: [" | File: ", block.filePath] })] })] }) }, i))) }))] })] })] }));
+}

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

@@ -0,0 +1,5 @@
+interface LoginPageProps {
+    onAuthSuccess: () => void;
+}
+export declare function LoginPage({ onAuthSuccess }: LoginPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { setToken, clearToken, checkAuth } from "../api.js";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../components/ui/card.js";
+import { Button } from "../components/ui/button.js";
+import { Input } from "../components/ui/input.js";
+import { Dna, Eye, EyeOff } from "lucide-react";
+export function LoginPage({ onAuthSuccess }) {
+    const { t } = useTranslation();
+    const [token, setTokenValue] = useState("");
+    const [error, setError] = useState(null);
+    const [checking, setChecking] = useState(false);
+    const [showToken, setShowToken] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        const trimmed = token.trim();
+        if (!trimmed) {
+            setError(t("pages:login.errorEmpty"));
+            return;
+        }
+        setChecking(true);
+        setError(null);
+        setToken(trimmed);
+        const isValid = await checkAuth();
+        setChecking(false);
+        if (isValid) {
+            onAuthSuccess();
+        }
+        else {
+            clearToken();
+            setError(t("pages:login.errorInvalid"));
+        }
+    }
+    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-background p-4", children: _jsxs(Card, { className: "w-full max-w-md", children: [_jsxs(CardHeader, { className: "text-center pb-2", children: [_jsx("div", { className: "flex justify-center mb-4", children: _jsx("div", { className: "p-3 rounded-full bg-primary/10", children: _jsx(Dna, { className: "h-8 w-8 text-primary" }) }) }), _jsx(CardTitle, { className: "text-2xl", children: "PD Console" }), _jsx("p", { className: "text-sm text-primary font-medium tracking-wider mt-1", children: t("pages:login.slogan") }), _jsx(CardDescription, { className: "mt-2", children: t("pages:login.description") })] }), _jsxs(CardContent, { children: [_jsxs("form", { onSubmit: handleSubmit, children: [_jsx("label", { className: "block text-sm font-medium mb-1.5", children: t("pages:login.bearerToken") }), _jsxs("div", { className: "relative", children: [_jsx(Input, { type: showToken ? "text" : "password", value: token, onChange: (e) => {
+                                                setTokenValue(e.target.value);
+                                                setError(null);
+                                            }, placeholder: t("pages:login.enterAccessToken"), autoFocus: true, className: error ? "border-destructive pr-10" : "pr-10" }), _jsx("button", { type: "button", onClick: () => setShowToken(!showToken), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: showToken ? _jsx(EyeOff, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) })] }), error && (_jsx("p", { className: "mt-2 text-sm text-destructive", children: error })), _jsx(Button, { type: "submit", disabled: checking || !token.trim(), className: "w-full mt-5", children: checking ? t("pages:login.verifying") : t("pages:login.signIn") })] }), _jsxs("div", { className: "mt-6 pt-4 border-t border-border text-xs text-muted-foreground text-center", children: [t("pages:login.tokenSessionOnly"), _jsx("br", {}), t("pages:login.noAuthFlag")] })] })] }) }));
+}

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

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

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAutoRefresh } from "../hooks/useAutoRefresh.js";
+import { fetchOverview, fetchSystemHealth } 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";
+import { HealthDiagnosticCard } from "../components/health-diagnostic-card.js";
+import { DataFreshnessIndicator } from "../components/data-freshness-indicator.js";
+const STATUS_COLORS = {
+    healthy: "default",
+    degraded: "secondary",
+    error: "destructive",
+};
+const STATUS_LABELS = {
+    healthy: "pages:overview.healthy",
+    degraded: "pages:overview.degraded",
+    error: "pages:overview.error",
+};
+function HealthCard({ health }) {
+    const { t } = useTranslation();
+    const statusColor = STATUS_COLORS[health.status] || "secondary";
+    return (_jsx(Card, { className: "border-l-4 border-primary mb-6", children: _jsx(CardContent, { className: "p-6", children: _jsx("div", { className: "flex items-start justify-between", children: _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: t("pages:overview.health") }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-2xl font-bold capitalize", children: t(STATUS_LABELS[health.status] || health.status) }), _jsx(Badge, { variant: statusColor, children: health.status.toUpperCase() })] }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["GFI: ", health.gfi.current, " (", health.gfi.stage, ")"] })] }) }) }) }));
+}
+function StatCard({ label, value }) {
+    return (_jsx(Card, { className: "transition-all duration-200 hover:shadow-md", children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: label }), _jsx("p", { className: "text-3xl font-bold", children: value })] }) }));
+}
+function LoadingSkeleton() {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsx(Skeleton, { className: "h-8 w-32" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-8 w-20" })] })] }), _jsx(Card, { className: "border-l-4 border-primary mb-6", children: _jsxs(CardContent, { className: "p-6", children: [_jsx(Skeleton, { className: "h-4 w-24 mb-4" }), _jsx(Skeleton, { className: "h-8 w-32 mb-2" }), _jsx(Skeleton, { className: "h-4 w-48" })] }) }), _jsx(Skeleton, { className: "h-6 w-40 mb-4" }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Card, { children: _jsxs(CardContent, { className: "p-6", children: [_jsx(Skeleton, { className: "h-4 w-24 mb-2" }), _jsx(Skeleton, { className: "h-8 w-full" })] }) }, i))) })] }));
+}
+export function OverviewPage() {
+    const { t } = useTranslation();
+    const { data, error, loading, refresh, lastUpdated } = useAutoRefresh(fetchOverview, 30000);
+    const { data: healthData, error: healthError, loading: healthLoading, refresh: refreshHealth, lastUpdated: healthLastUpdated } = useAutoRefresh(fetchSystemHealth, 30000);
+    if (loading && !data) {
+        return _jsx(LoadingSkeleton, {});
+    }
+    if (error && !data) {
+        return (_jsx(Card, { children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-destructive", children: t("components:errorBoundary.title") }), _jsx("p", { className: "text-muted-foreground mt-2", children: error })] }) }));
+    }
+    if (!data) {
+        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6 text-center", children: _jsx("p", { className: "text-muted-foreground", children: t("common:loading") }) }) }));
+    }
+    const handleRefreshAll = () => {
+        refresh();
+        refreshHealth();
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(PageHeader, { title: t("pages:overview.title"), description: t("pages:overview.description"), onRefresh: handleRefreshAll, lastUpdated: lastUpdated ? new Date(lastUpdated) : undefined }), healthData && (_jsx(HealthDiagnosticCard, { overall: healthData.overall, checks: healthData.checks, onRefresh: refreshHealth, loading: healthLoading })), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [healthData?.pipeline.lastPainSignal && (_jsx(DataFreshnessIndicator, { label: t("pages:overview.painSignals"), lastUpdateTime: healthData.pipeline.lastPainSignal })), healthData?.pipeline.lastTaskCreated && (_jsx(DataFreshnessIndicator, { label: t("pages:overview.tasks"), lastUpdateTime: healthData.pipeline.lastTaskCreated })), healthData?.pipeline.lastCandidateGenerated && (_jsx(DataFreshnessIndicator, { label: t("pages:overview.candidates"), lastUpdateTime: healthData.pipeline.lastCandidateGenerated }))] }), _jsx(HealthCard, { health: data.health }), _jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:overview.stats") }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4", children: [_jsx(StatCard, { label: t("pages:overview.principles"), value: data.summary.principleEventCount }), _jsx(StatCard, { label: t("pages:overview.painEvents"), value: data.summary.painEvents }), _jsx(StatCard, { label: t("pages:overview.pendingSamples"), value: data.summary.pendingSamples }), _jsx(StatCard, { label: t("pages:overview.approvedSamples"), value: data.summary.approvedSamples }), _jsx(StatCard, { label: t("pages:overview.taskOutcomes"), value: data.summary.taskOutcomes }), _jsx(StatCard, { label: t("pages:overview.gateBlocks"), value: data.summary.gateBlocks })] }) })] }), _jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:overview.principles") }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsx(StatCard, { label: t("pages:overview.activePrinciples"), value: data.health.principles.active }), _jsx(StatCard, { label: t("pages:overview.candidatePrinciples"), value: data.health.principles.candidate }), _jsx(StatCard, { label: t("pages:overview.probationPrinciples"), value: data.health.principles.probation }), _jsx(StatCard, { label: t("pages:overview.deprecatedPrinciples"), value: data.health.principles.deprecated })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:overview.queue") }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx(StatCard, { label: t("common:pending"), value: data.health.queue.pending }), _jsx(StatCard, { label: t("pages:overview.inProgress"), value: data.health.queue.inProgress }), _jsx(StatCard, { label: t("common:completed"), value: data.health.queue.completed })] }) })] })] }));
+}

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

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

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAutoRefresh } from "../hooks/useAutoRefresh.js";
+import { fetchFeedbackGfi, fetchEmpathyEvents, fetchFeedbackGateBlocks } 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 { Button } from "../components/ui/button.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+import { Separator } from "../components/ui/separator.js";
+import { formatDate } from "../utils/format.js";
+const SEVERITY_VARIANT = {
+    low: "default",
+    medium: "secondary",
+    high: "destructive",
+};
+function GfiGauge({ gfi, error, onRetry }) {
+    const { t } = useTranslation();
+    if (error && !gfi) {
+        return (_jsx(Card, { className: "mb-6", 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: onRetry, children: t("common:refresh") })] }) }));
+    }
+    if (!gfi) {
+        return (_jsx(Card, { className: "mb-6", children: _jsxs(CardContent, { className: "p-6", children: [_jsx(Skeleton, { className: "h-4 w-32 mb-4" }), _jsx(Skeleton, { className: "h-10 w-20 mb-2" }), _jsx(Skeleton, { className: "h-3 w-full" })] }) }));
+    }
+    const threshold = gfi.threshold || 1;
+    const percentage = Math.min((gfi.current / threshold) * 100, 100);
+    const barColor = percentage < 50
+        ? "bg-primary"
+        : percentage < 80
+            ? "bg-amber-500"
+            : "bg-destructive";
+    return (_jsx(Card, { className: "mb-6", children: _jsxs(CardContent, { className: "p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground mb-3", children: t("pages:pain.gfiFull") }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "text-4xl font-bold text-primary", children: gfi.current }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "h-3 rounded-full bg-muted overflow-hidden", children: _jsx("div", { className: `h-full rounded-full transition-all duration-300 ${barColor}`, style: { width: `${percentage}%` } }) }), _jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mt-1", children: [_jsx("span", { children: "0" }), _jsxs("span", { children: [t("pages:pain.source"), ": ", gfi.threshold] })] })] })] }), _jsxs("p", { className: "text-xs text-muted-foreground mt-2", children: [t("pages:pain.peakToday"), " ", gfi.peakToday] }), Object.keys(gfi.sources).length > 0 && (_jsxs("div", { className: "mt-4", children: [_jsx(Separator, { className: "mb-3" }), _jsx("p", { className: "text-xs text-muted-foreground mb-2", children: t("pages:pain.source") }), Object.entries(gfi.sources).map(([source, value]) => (_jsxs("div", { className: "flex justify-between text-sm py-1", children: [_jsx("span", { children: source }), _jsx("span", { className: "font-bold", children: value })] }, source)))] }))] }) }));
+}
+export function PainPage() {
+    const { t } = useTranslation();
+    const gfi = useAutoRefresh(fetchFeedbackGfi, 30000);
+    const empathy = useAutoRefresh(() => fetchEmpathyEvents(20), 30000);
+    const blocks = useAutoRefresh(() => fetchFeedbackGateBlocks(20), 30000);
+    const refreshAll = () => {
+        gfi.refresh();
+        empathy.refresh();
+        blocks.refresh();
+    };
+    const lastUpdated = gfi.lastUpdated ?? empathy.lastUpdated ?? blocks.lastUpdated;
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: t("pages:pain.title"), description: t("pages:pain.description"), onRefresh: refreshAll, lastUpdated: lastUpdated ? new Date(lastUpdated) : undefined }), _jsx(GfiGauge, { gfi: gfi.data, error: gfi.error, onRetry: gfi.refresh }), _jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:pain.empathyEvents") }) }), _jsxs(CardContent, { children: [empathy.error && (_jsx("p", { className: "text-destructive mb-3", children: empathy.error })), !empathy.data || empathy.data.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: t("pages:pain.emptyHint") })) : (_jsx("div", { className: "flex flex-col gap-3", children: empathy.data.map((event, i) => (_jsx(Card, { className: `border-l-4 ${event.severity === "high"
+                                        ? "border-l-destructive"
+                                        : event.severity === "medium"
+                                            ? "border-l-amber-500"
+                                            : "border-l-primary"}`, children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx(Badge, { variant: SEVERITY_VARIANT[event.severity] ?? "secondary", children: event.severity }), _jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(event.timestamp) })] }), _jsx("p", { className: "mt-2 text-sm", children: event.reason }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [t("pages:pain.origin"), " ", event.origin, " | ", t("pages:pain.gfiAfter"), " ", event.gfiAfter] })] }) }, i))) }))] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t("pages:pain.gateBlocks") }) }), _jsxs(CardContent, { children: [blocks.error && (_jsx("p", { className: "text-destructive mb-3", children: blocks.error })), !blocks.data || blocks.data.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: t("pages:pain.emptyHint") })) : (_jsx("div", { className: "flex flex-col gap-3", children: blocks.data.map((block, i) => (_jsx(Card, { className: "border-l-4 border-l-destructive", children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "font-bold text-sm", children: block.toolName }), _jsx("span", { className: "text-xs text-muted-foreground", children: formatDate(block.timestamp) })] }), _jsx("p", { className: "mt-2 text-sm", children: block.reason }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Type: ", block.gateType, " | GFI: ", block.gfi, " | Trust Stage:", " ", block.trustStage] })] }) }, i))) }))] })] })] }));
+}

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

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