create-principles-disciple 1.82.0 → 1.83.0

package/console/dist/ui/pages/principles/PrincipleDetailPage.js

@@ -0,0 +1,264 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { PageShell } from "../../components/layout/page-shell.js";
+import { SectionTitle } from "../../components/layout/section-title.js";
+import { Button } from "../../components/ui/button.js";
+import { fetchPrincipleDetail, fetchApprovalsGrouped, fetchLifecycleMetrics, approveApproval, rejectApproval, } from "../../api.js";
+// ── Runtime validation (H section) ──────────────────────────────────────────
+function isString(v) {
+    return typeof v === "string";
+}
+function isRecord(v) {
+    return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function safeStringArray(v) {
+    if (!Array.isArray(v))
+        return [];
+    return v.filter(isString);
+}
+function safeString(v, fallback = "") {
+    return typeof v === "string" ? v : fallback;
+}
+/**
+ * Validate and normalize a PrincipleDetail from untrusted network data.
+ * Returns a normalized object with safe defaults for all fields the page
+ * actually accesses. Never returns null for individual fields — only for
+ * completely unparseable top-level structures.
+ *
+ * Fields the page uses: id, text, status, triggerPattern, action,
+ * derivedFromPainIds (length + map), rules (length).
+ */
+function validatePrincipleDetail(data) {
+    if (!isRecord(data))
+        return null;
+    if (!Object.hasOwn(data, "principle") || !isRecord(data.principle))
+        return null;
+    const raw = data.principle;
+    // Required fields — fail loud if missing
+    if (!Object.hasOwn(raw, "id") || !isString(raw.id))
+        return null;
+    if (!Object.hasOwn(raw, "text") || !isString(raw.text))
+        return null;
+    if (!Object.hasOwn(raw, "status") || !isString(raw.status))
+        return null;
+    // Normalize fields the page accesses with safe defaults
+    const normalized = {
+        ...raw,
+        triggerPattern: safeString(raw.triggerPattern),
+        action: safeString(raw.action),
+        derivedFromPainIds: safeStringArray(raw.derivedFromPainIds),
+        rules: Array.isArray(raw.rules) ? raw.rules : [],
+    };
+    return { principle: normalized };
+}
+function validateApprovalsGrouped(data) {
+    if (!isRecord(data))
+        return null;
+    if (!Object.hasOwn(data, "groups") || !Array.isArray(data.groups))
+        return null;
+    for (const g of data.groups) {
+        if (!isRecord(g))
+            return null;
+        if (!Object.hasOwn(g, "principleId") || !isString(g.principleId))
+            return null;
+        if (!Object.hasOwn(g, "status") || !isString(g.status))
+            return null;
+        if (!Object.hasOwn(g, "records") || !Array.isArray(g.records))
+            return null;
+        for (const r of g.records) {
+            if (!isRecord(r))
+                return null;
+            if (!Object.hasOwn(r, "id") || !isString(r.id))
+                return null;
+            if (!Object.hasOwn(r, "channel") || !isString(r.channel))
+                return null;
+        }
+    }
+    return data;
+}
+function validateLifecycleMetrics(data) {
+    if (!isRecord(data))
+        return null;
+    if (!Object.hasOwn(data, "adherence") || !isRecord(data.adherence))
+        return null;
+    const a = data.adherence;
+    if (!Object.hasOwn(a, "insufficientData") || typeof a.insufficientData !== "boolean")
+        return null;
+    if (!Object.hasOwn(a, "note") || !isString(a.note))
+        return null;
+    // rate can be number or null
+    if (Object.hasOwn(a, "rate") && a.rate !== null && typeof a.rate !== "number")
+        return null;
+    if (!Object.hasOwn(data, "ruleMetrics") || !Array.isArray(data.ruleMetrics))
+        return null;
+    return data;
+}
+// ── Trajectory stages for Layer 3 ───────────────────────────────────────────
+const TRAJECTORY_STAGES = [
+    { key: "evidence", label: "evidence" },
+    { key: "diagnosis", label: "diagnosis" },
+    { key: "proposal", label: "proposal" },
+    { key: "review", label: "review" },
+    { key: "deploy", label: "deploy" },
+    { key: "behavior", label: "behavior" },
+];
+// ── Component ───────────────────────────────────────────────────────────────
+export function PrincipleDetailPage() {
+    const { t } = useTranslation("pages");
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [principle, setPrinciple] = useState(null);
+    const [approvalGroup, setApprovalGroup] = useState(null);
+    const [lifecycle, setLifecycle] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Decision state
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [showRejectInput, setShowRejectInput] = useState(false);
+    const [rejectReason, setRejectReason] = useState("");
+    const [actionLoading, setActionLoading] = useState(false);
+    // Fetch data
+    const loadData = useCallback(async () => {
+        if (!id)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const [pResult, aResult, lResult] = await Promise.all([
+                fetchPrincipleDetail(id),
+                fetchApprovalsGrouped(),
+                fetchLifecycleMetrics(id),
+            ]);
+            if (!pResult.success) {
+                setError(pResult.error ?? "Failed to load principle");
+                return;
+            }
+            const pData = validatePrincipleDetail(pResult.data);
+            if (!pData) {
+                setError("Invalid principle data received");
+                return;
+            }
+            setPrinciple(pData.principle);
+            const aData = aResult.success ? validateApprovalsGrouped(aResult.data) : null;
+            if (aData) {
+                const group = aData.groups.find((g) => g.principleId === id);
+                setApprovalGroup(group ?? null);
+            }
+            const lData = lResult.success ? validateLifecycleMetrics(lResult.data) : null;
+            setLifecycle(lData);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unknown error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [id]);
+    useEffect(() => {
+        loadData();
+    }, [loadData]);
+    // ── Actions ─────────────────────────────────────────────────────────────
+    const handleApprove = () => setShowConfirm(true);
+    const cancelConfirm = () => setShowConfirm(false);
+    // ── Apply decision to all records in the group ──────────────────────────
+    // Constraint: "多通道审批记录在 UI 上收拢成对一条原则的单次治理决策"
+    // When owner approves/rejects a principle, ALL pending records must receive
+    // the same decision. Partial failure is reported loudly (ERR-002 / EP-03).
+    async function applyDecisionToAllRecords(action, reason) {
+        if (!approvalGroup)
+            return { allSucceeded: false, failedCount: 0, totalCount: 0 };
+        const records = approvalGroup.records;
+        let failedCount = 0;
+        for (const record of records) {
+            const result = action === "approve"
+                ? await approveApproval(record.id)
+                : await rejectApproval(record.id, reason ?? "");
+            if (!result.success) {
+                failedCount++;
+            }
+        }
+        return {
+            allSucceeded: failedCount === 0,
+            failedCount,
+            totalCount: records.length,
+        };
+    }
+    const confirmApprove = async () => {
+        if (!approvalGroup || actionLoading)
+            return;
+        setActionLoading(true);
+        try {
+            const { allSucceeded, failedCount, totalCount } = await applyDecisionToAllRecords("approve");
+            if (allSucceeded) {
+                toast.success(t("principles.detail.approved"));
+                setShowConfirm(false);
+                loadData();
+            }
+            else {
+                // Partial failure — fail loud (EP-03)
+                toast.error(t("principles.detail.partialFailure", {
+                    defaultValue: `批准完成，但 ${failedCount}/${totalCount} 条记录失败。请检查后重试。`,
+                    failedCount,
+                    totalCount,
+                }));
+                loadData();
+            }
+        }
+        catch {
+            toast.error(t("principles.detail.approveFailed"));
+        }
+        finally {
+            setActionLoading(false);
+        }
+    };
+    const handleReject = () => setShowRejectInput(true);
+    const cancelReject = () => {
+        setShowRejectInput(false);
+        setRejectReason("");
+    };
+    const confirmReject = async () => {
+        if (!approvalGroup || !rejectReason.trim() || actionLoading)
+            return;
+        setActionLoading(true);
+        try {
+            const { allSucceeded, failedCount, totalCount } = await applyDecisionToAllRecords("reject", rejectReason.trim());
+            if (allSucceeded) {
+                toast.success(t("principles.detail.rejected"));
+                setShowRejectInput(false);
+                setRejectReason("");
+                loadData();
+            }
+            else {
+                // Partial failure — fail loud (EP-03)
+                toast.error(t("principles.detail.partialFailure", {
+                    defaultValue: `拒绝完成，但 ${failedCount}/${totalCount} 条记录失败。请检查后重试。`,
+                    failedCount,
+                    totalCount,
+                }));
+                loadData();
+            }
+        }
+        catch {
+            toast.error(t("principles.detail.rejectFailed"));
+        }
+        finally {
+            setActionLoading(false);
+        }
+    };
+    const handlePark = () => {
+        toast.success(t("principles.detail.parked"));
+    };
+    // ── Render ──────────────────────────────────────────────────────────────
+    if (loading) {
+        return (_jsx(PageShell, { children: _jsx("p", { className: "text-ink-3 text-sm", children: t("principles.loading", { defaultValue: "Loading…" }) }) }));
+    }
+    if (error || !principle) {
+        return (_jsxs(PageShell, { children: [_jsxs(Button, { variant: "ghost", onClick: () => navigate("/principles"), className: "mb-4", children: ["\u2190 ", t("principles.detail.backToList")] }), _jsxs("div", { className: "border border-danger/30 rounded-[var(--radius-md)] p-4", children: [_jsx("p", { className: "text-danger text-sm", children: error ?? t("principles.notFound") }), _jsx(Button, { variant: "outline", size: "sm", onClick: loadData, className: "mt-2", children: t("principles.retry", { defaultValue: "Retry" }) })] })] }));
+    }
+    const isPending = approvalGroup?.status === "pending" || principle.status === "candidate" || principle.status === "probation";
+    const hasRules = principle.rules.length > 0;
+    return (_jsxs(PageShell, { children: [_jsxs(Button, { variant: "ghost", onClick: () => navigate("/principles"), className: "mb-4 -ml-2", children: ["\u2190 ", t("principles.detail.backToList")] }), _jsxs("section", { className: "mb-8", children: [_jsx(SectionTitle, { children: t("principles.detail.conclusion") }), _jsx("h1", { className: "text-[22px] font-semibold text-ink leading-snug mb-3", children: principle.text }), _jsx("p", { className: "text-ink-3 text-[14px] leading-relaxed mb-3", children: t("principles.detail.policyNote") }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: true, children: t("principles.detail.modifyWording") }), _jsx("span", { className: "text-ink-4 text-[13px]", children: t("principles.detail.modifyWordingNote") })] })] }), _jsxs("section", { className: "mb-8", children: [_jsx(SectionTitle, { children: t("principles.detail.channel") }), _jsx("p", { className: "text-ink-2 text-[14px] leading-relaxed", children: t("principles.detail.channelPromptReversible") })] }), _jsxs("section", { className: "mb-8", children: [_jsx(SectionTitle, { children: t("principles.detail.whyExists") }), _jsxs("div", { className: "space-y-3 mb-6", children: [_jsxs("div", { children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3", children: t("principles.detail.applicable", { defaultValue: "适用场景" }) }), _jsx("p", { className: "text-ink-2 text-[14px] leading-relaxed", children: principle.triggerPattern || t("principles.detail.notSpecified", { defaultValue: "未指定" }) })] }), _jsxs("div", { children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3", children: t("principles.detail.expectedBehavior", { defaultValue: "预期行为" }) }), _jsx("p", { className: "text-ink-2 text-[14px] leading-relaxed", children: principle.action || t("principles.detail.notSpecified", { defaultValue: "未指定" }) })] })] }), principle.derivedFromPainIds.length > 0 && (_jsxs("div", { children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3", children: t("principles.detail.evidence") }), _jsx("ul", { className: "mt-2 space-y-1", children: principle.derivedFromPainIds.map((painId, idx) => (_jsxs("li", { className: "text-ink-2 text-[13px] font-mono", children: [idx + 1, ". ", painId] }, painId))) })] }))] }), _jsxs("section", { className: "mb-8 border-t border-line pt-6", children: [_jsx(SectionTitle, { children: t("principles.detail.ownerReflection") }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "border-l-2 border-l-gov pl-3 text-ink-2 text-[13px] leading-relaxed", children: t("principles.detail.reflectionQ1") }), _jsx("div", { className: "border-l-2 border-l-gov pl-3 text-ink-2 text-[13px] leading-relaxed", children: t("principles.detail.reflectionQ2") }), _jsx("div", { className: "border-l-2 border-l-gov pl-3 text-ink-2 text-[13px] leading-relaxed", children: t("principles.detail.reflectionQ3") })] })] }), _jsxs("details", { className: "mb-8 border border-line rounded-[var(--radius-md)]", children: [_jsx("summary", { className: "px-4 py-3 cursor-pointer font-mono text-[11px] uppercase tracking-[0.1em] text-ink-3 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", children: t("principles.detail.trajectory") }), _jsxs("div", { className: "px-4 pb-4 border-t border-line pt-4", children: [_jsx("div", { className: "space-y-4", children: TRAJECTORY_STAGES.map((stage) => (_jsxs("div", { className: "flex gap-4", children: [_jsx("span", { className: "font-mono text-[12px] text-ink-3 min-w-[80px]", children: t("principles.detail.stage" + stage.key.charAt(0).toUpperCase() + stage.key.slice(1), { defaultValue: stage.label }) }), _jsx("div", { className: "flex-1", children: _jsx("p", { className: "text-ink-3 text-[13px]", children: t("principles.detail.stage" + stage.key.charAt(0).toUpperCase() + stage.key.slice(1) + "Desc", { defaultValue: "—" }) }) })] }, stage.key))) }), hasRules && lifecycle && (_jsxs("div", { className: "mt-6 pt-4 border-t border-line", children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3", children: t("principles.detail.lifecycleMetrics", { defaultValue: "生命周期指标" }) }), _jsx("p", { className: "text-amber text-[12px] font-mono mt-1 mb-3", children: t("principles.detail.lifecycleNote") }), lifecycle.adherence.insufficientData ? (_jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed", children: t("principles.detail.insufficientData") })) : (_jsxs("div", { children: [_jsxs("p", { className: "text-ink-2 text-[14px]", children: [t("principles.detail.adherenceRate", { defaultValue: "遵守率" }), ": ", lifecycle.adherence.rate !== null ? `${(lifecycle.adherence.rate * 100).toFixed(1)}%` : "—"] }), _jsx("p", { className: "text-ink-3 text-[12px] mt-1", children: lifecycle.adherence.note })] })), lifecycle.ruleMetrics.length > 0 && (_jsx("div", { className: "mt-3", children: lifecycle.ruleMetrics.map((rm) => (_jsxs("div", { className: "flex gap-3 text-[12px] font-mono text-ink-3", children: [_jsx("span", { children: rm.ruleId }), _jsxs("span", { children: [t("principles.detail.triggered", { defaultValue: "触发" }), ": ", rm.triggered] })] }, rm.ruleId))) }))] })), hasRules && !lifecycle && (_jsx("div", { className: "mt-6 pt-4 border-t border-line", children: _jsx("p", { className: "text-ink-3 text-[13px]", children: t("principles.detail.lifecycleLoadFailed", { defaultValue: "无法加载生命周期指标。你可以稍后重试。" }) }) }))] })] }), isPending && (_jsxs("div", { className: "border-t border-line pt-6", children: [_jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(Button, { variant: "default", onClick: handleApprove, disabled: actionLoading, children: t("principles.detail.approve") }), _jsx(Button, { variant: "outline", onClick: handlePark, disabled: actionLoading, children: t("principles.detail.park") }), _jsx(Button, { variant: "destructive", onClick: handleReject, disabled: actionLoading, children: t("principles.detail.reject") })] }), showConfirm && (_jsxs("div", { className: "mt-4 p-3 bg-gov/5 border border-gov/20 rounded-[var(--radius-md)]", children: [_jsx("p", { className: "text-ink-2 text-[13px] mb-3", children: t("principles.detail.confirmApprove") }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", onClick: confirmApprove, disabled: actionLoading, children: t("principles.detail.confirm") }), _jsx(Button, { variant: "outline", size: "sm", onClick: cancelConfirm, children: t("principles.detail.cancel") })] })] })), showRejectInput && (_jsxs("div", { className: "mt-4 p-3 border border-danger/20 rounded-[var(--radius-md)]", children: [_jsx("label", { className: "block font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-2", children: t("principles.detail.rejectReasonLabel", { defaultValue: "拒绝原因" }) }), _jsx("textarea", { value: rejectReason, onChange: (e) => setRejectReason(e.target.value), placeholder: t("principles.detail.rejectReasonPlaceholder"), className: "w-full border border-line rounded-[var(--radius-md)] bg-surface text-ink px-3 py-2 text-[13px] min-h-[80px] resize-y focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", "aria-label": t("principles.detail.rejectReasonPlaceholder") }), _jsxs("div", { className: "flex gap-2 mt-2", children: [_jsx(Button, { variant: "destructive", size: "sm", onClick: confirmReject, disabled: !rejectReason.trim() || actionLoading, children: t("principles.detail.confirmReject") }), _jsx(Button, { variant: "outline", size: "sm", onClick: cancelReject, children: t("principles.detail.cancel") })] })] }))] })), !isPending && approvalGroup && (_jsx("div", { className: "border-t border-line pt-6", children: _jsxs("p", { className: "text-ink-3 text-[13px]", children: [approvalGroup.status === "approved" && t("principles.detail.alreadyApproved", { defaultValue: "此原则已批准。" }), approvalGroup.status === "rejected" && t("principles.detail.alreadyRejected", { defaultValue: "此原则已拒绝。" })] }) }))] }));
+}

package/console/dist/ui/pages/principles/PrinciplesPage.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { PageShell } from "../../components/layout/page-shell.js";
+import { SectionTitle } from "../../components/layout/section-title.js";
+import { Button } from "../../components/ui/button.js";
+import { fetchPrinciples, fetchApprovalsGrouped, } from "../../api.js";
+// ── Map principle status to review status ───────────────────────────────────
+function toReviewStatus(principleStatus, approvalStatus) {
+    if (approvalStatus === "approved")
+        return "approved";
+    if (approvalStatus === "rejected")
+        return "rejected";
+    if (principleStatus === "active")
+        return "approved";
+    if (principleStatus === "archived")
+        return "parked";
+    if (principleStatus === "deprecated")
+        return "rejected";
+    if (principleStatus === "probation")
+        return "pending";
+    return "pending";
+}
+// ── Status visual mapping ───────────────────────────────────────────────────
+const STATUS_BORDER = {
+    pending: "border-l-gov",
+    approved: "border-l-green",
+    rejected: "border-l-danger",
+    parked: "border-l-ink-3",
+};
+const STATUS_TEXT = {
+    pending: "text-gov",
+    approved: "text-green",
+    rejected: "text-danger",
+    parked: "text-ink-3",
+};
+const CHANNEL_LABELS = {
+    prompt: "channelPrompt",
+    defer_archive: "channelDeferArchive",
+    code_tool_hook: "channelCodeToolHook",
+};
+// ── Runtime validation helpers (H section) ──────────────────────────────────
+function isString(v) {
+    return typeof v === "string";
+}
+function isRecord(v) {
+    return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function isStringArray(v) {
+    return Array.isArray(v) && v.every(isString);
+}
+function validatePrinciplesData(data) {
+    if (!isRecord(data))
+        return null;
+    if (!Object.hasOwn(data, "principles") || !Array.isArray(data.principles))
+        return null;
+    // Validate each principle element has required string fields
+    for (const item of data.principles) {
+        if (!isRecord(item))
+            return null;
+        if (!Object.hasOwn(item, "id") || !isString(item.id))
+            return null;
+        if (!Object.hasOwn(item, "text") || !isString(item.text))
+            return null;
+        if (!Object.hasOwn(item, "status") || !isString(item.status))
+            return null;
+        if (!Object.hasOwn(item, "updatedAt") || !isString(item.updatedAt))
+            return null;
+        if (!Object.hasOwn(item, "createdAt") || !isString(item.createdAt))
+            return null;
+    }
+    return data;
+}
+function validateApprovalsGrouped(data) {
+    if (!isRecord(data))
+        return null;
+    if (!Object.hasOwn(data, "groups") || !Array.isArray(data.groups))
+        return null;
+    // Validate each group element
+    for (const g of data.groups) {
+        if (!isRecord(g))
+            return null;
+        if (!Object.hasOwn(g, "principleId") || !isString(g.principleId))
+            return null;
+        if (!Object.hasOwn(g, "status") || !isString(g.status))
+            return null;
+        if (!Object.hasOwn(g, "records") || !Array.isArray(g.records))
+            return null;
+        for (const r of g.records) {
+            if (!isRecord(r))
+                return null;
+            if (!Object.hasOwn(r, "id") || !isString(r.id))
+                return null;
+            if (!Object.hasOwn(r, "channel") || !isString(r.channel))
+                return null;
+        }
+    }
+    return data;
+}
+// ── Component ───────────────────────────────────────────────────────────────
+export function PrinciplesPage() {
+    const { t, i18n } = useTranslation("pages");
+    const navigate = useNavigate();
+    const [principles, setPrinciples] = useState([]);
+    const [approvalGroups, setApprovalGroups] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Search / filter / sort
+    const [search, setSearch] = useState("");
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [sortBy, setSortBy] = useState("updatedAt");
+    // PRI-330: Default to actionable filter
+    const [filterMode, setFilterMode] = useState('actionable');
+    const [categories, setCategories] = useState();
+    // Fetch data
+    const loadData = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [pResult, aResult] = await Promise.all([
+                fetchPrinciples(filterMode),
+                fetchApprovalsGrouped(),
+            ]);
+            if (!pResult.success) {
+                setError(pResult.error ?? "Failed to load principles");
+                return;
+            }
+            const pData = validatePrinciplesData(pResult.data);
+            if (!pData) {
+                setError("Invalid principles data received");
+                return;
+            }
+            setPrinciples(pData.principles);
+            // PRI-330: Store categories for UI display
+            setCategories(pData.categories);
+            const aData = aResult.success ? validateApprovalsGrouped(aResult.data) : null;
+            setApprovalGroups(aData?.groups ?? []);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unknown error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [filterMode]);
+    useEffect(() => {
+        loadData();
+    }, [loadData]);
+    // Build approval lookup
+    const approvalByPrinciple = new Map();
+    for (const g of approvalGroups) {
+        approvalByPrinciple.set(g.principleId, g);
+    }
+    // Merge principle + approval data into cards
+    const cards = principles.map((p) => {
+        const ag = approvalByPrinciple.get(p.id);
+        const channels = ag
+            ? ag.records.map((r) => r.channel).filter(isString)
+            : ["prompt"];
+        const uniqueChannels = [...new Set(channels)];
+        const confidence = p.evaluability === "deterministic"
+            ? "high"
+            : p.evaluability === "weak_heuristic"
+                ? "low"
+                : "medium";
+        // PRI-332: Determine display title with bounded fallback for unreadable titles
+        const rawTitle = p.triggerPattern || p.text.slice(0, 80);
+        const detectedLang = p.detectedLanguage ?? 'unknown';
+        const readWarningCode = p.readabilityWarningCode;
+        let displayTitle = rawTitle;
+        let usedFallback = false;
+        if (readWarningCode) {
+            displayTitle = t("principles.readabilityFallbackTitle");
+            usedFallback = true;
+        }
+        return {
+            principleId: p.id,
+            title: displayTitle,
+            originalTitle: rawTitle,
+            titleUsedFallback: usedFallback,
+            text: p.text,
+            status: toReviewStatus(p.status, ag?.status),
+            channels: uniqueChannels,
+            confidence,
+            updatedAt: p.updatedAt,
+            createdAt: p.createdAt,
+            priority: p.priority,
+            detectedLanguage: detectedLang,
+            readabilityWarningCode: readWarningCode,
+        };
+    });
+    // Filter + sort
+    const filtered = cards
+        .filter((c) => {
+        if (statusFilter !== "all" && c.status !== statusFilter)
+            return false;
+        if (search) {
+            const q = search.toLowerCase();
+            if (!c.text.toLowerCase().includes(q) && !c.title.toLowerCase().includes(q))
+                return false;
+        }
+        return true;
+    })
+        .sort((a, b) => {
+        const key = sortBy === "updatedAt" ? "updatedAt" : "createdAt";
+        return new Date(b[key]).getTime() - new Date(a[key]).getTime();
+    });
+    const statusFilters = [
+        { value: "all", label: t("principles.allStatuses") },
+        { value: "pending", label: t("principles.statusPending") },
+        { value: "approved", label: t("principles.statusApproved") },
+        { value: "rejected", label: t("principles.statusRejected") },
+        { value: "parked", label: t("principles.statusParked") },
+    ];
+    return (_jsxs(PageShell, { children: [_jsx(SectionTitle, { children: t("principles.reviewTitle") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("principles.reviewSubtitle") }), _jsx("p", { className: "text-ink-3 text-[14px] leading-relaxed mb-6", children: t("principles.reviewDescription") }), _jsxs("div", { className: "flex flex-wrap items-center gap-3 mb-6", children: [_jsxs("div", { className: "flex gap-1", role: "group", "aria-label": "Filter mode", children: [_jsxs("button", { onClick: () => setFilterMode('actionable'), className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-1 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov " +
+                                    (filterMode === 'actionable'
+                                        ? "bg-gov text-paper border-gov"
+                                        : "bg-surface text-ink-3 border-line hover:border-line-2"), children: [t("principles.filterActionable", { defaultValue: "Actionable" }), categories?.owner_actionable ? ` (${categories.owner_actionable})` : ''] }), _jsxs("button", { onClick: () => setFilterMode('all'), className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-1 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov " +
+                                    (filterMode === 'all'
+                                        ? "bg-gov text-paper border-gov"
+                                        : "bg-surface text-ink-3 border-line hover:border-line-2"), children: [t("principles.filterAll", { defaultValue: "Show All" }), categories ? ` (${Object.values(categories).reduce((a, b) => a + b, 0)})` : ''] })] }), _jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: t("principles.searchPlaceholder"), className: "flex-1 min-w-[200px] border border-line rounded-[var(--radius-md)] bg-surface text-ink px-3 py-2 text-[13px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", "aria-label": t("principles.searchPlaceholder") }), _jsx("div", { className: "flex gap-1", role: "group", "aria-label": "Status filter", children: statusFilters.map((sf) => (_jsx("button", { onClick: () => setStatusFilter(sf.value), className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-1 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov " +
+                                (statusFilter === sf.value
+                                    ? "bg-gov text-paper border-gov"
+                                    : "bg-surface text-ink-3 border-line hover:border-line-2"), children: sf.label }, sf.value))) }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "border border-line rounded-[var(--radius-md)] bg-surface text-ink-3 px-2 py-1 text-[12px] font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", "aria-label": "Sort order", children: [_jsx("option", { value: "updatedAt", children: t("principles.sortByUpdated") }), _jsx("option", { value: "createdAt", children: t("principles.sortByCreated") })] })] }), loading && (_jsx("p", { className: "text-ink-3 text-sm", children: t("principles.loading", { defaultValue: "Loading…" }) })), error && (_jsxs("div", { className: "border border-danger/30 rounded-[var(--radius-md)] p-4 mb-4", children: [_jsx("p", { className: "text-danger text-sm", children: error }), _jsx(Button, { variant: "outline", size: "sm", onClick: loadData, className: "mt-2", children: t("principles.retry", { defaultValue: "Retry" }) })] })), !loading && !error && filtered.length === 0 && principles.length === 0 && (_jsxs("div", { className: "text-center py-12", children: [_jsx("h2", { className: "text-ink-2 text-lg font-semibold mb-2", children: t("principles.emptyTitle") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[480px] mx-auto leading-relaxed", children: filterMode === 'actionable'
+                            ? t("principles.emptyActionable", { defaultValue: "No owner-actionable principles at this time. When PD captures behavior deviation signals, principle candidates will appear here for your review." })
+                            : t("principles.emptyDescription") }), categories && filterMode === 'actionable' && (_jsx("div", { className: "flex justify-center gap-2 flex-wrap mt-4", children: Object.entries(categories).map(([cat, count]) => (_jsxs("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-4", children: [cat, ": ", count] }, cat))) }))] })), !loading && !error && filtered.length === 0 && principles.length > 0 && (_jsx("p", { className: "text-ink-3 text-sm", children: t("principles.noResults") })), !loading && !error && filtered.length > 0 && (_jsx("div", { className: "grid gap-3", children: filtered.map((card) => (_jsxs("article", { onClick: () => navigate(`/principles/${card.principleId}`), className: "bg-panel border border-line rounded-[var(--radius-md)] p-4 cursor-pointer " +
+                        "border-l-[3px] " +
+                        STATUS_BORDER[card.status] + " " +
+                        "transition-[border-color,background] duration-150 " +
+                        "hover:border-line-2 hover:bg-surface " +
+                        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", tabIndex: 0, role: "link", "aria-label": card.title, onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            navigate(`/principles/${card.principleId}`);
+                        }
+                    }, children: [_jsxs("div", { className: "flex items-center gap-2 mb-2 flex-wrap", children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-0.5 " +
+                                        STATUS_TEXT[card.status] +
+                                        " border-current/20", children: t("principles.status" + card.status.charAt(0).toUpperCase() + card.status.slice(1)) }), card.channels.map((ch) => (_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-3", children: CHANNEL_LABELS[ch]
+                                        ? t("principles." + CHANNEL_LABELS[ch])
+                                        : ch }, ch))), card.detectedLanguage && card.detectedLanguage !== 'unknown' && (_jsx("span", { className: "font-mono text-[11px] tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-4", children: card.detectedLanguage === 'zh'
+                                        ? t("principles.languageHintZh")
+                                        : t("principles.languageHintEn") })), _jsxs("span", { className: "font-mono text-[11px] text-ink-4", children: [t("principles.confidence"), ": ", card.confidence] })] }), card.readabilityWarningCode && (_jsx("div", { className: "mb-2 px-3 py-1.5 bg-amber/5 border border-amber/20 rounded-[3px] text-ink-3 text-[12px] leading-snug", children: t("principles.readabilityWarning." + card.readabilityWarningCode, { defaultValue: t("principles.readabilityFallbackTitle") }) })), card.detectedLanguage && card.detectedLanguage !== 'unknown' && i18n.language && !i18n.language.startsWith(card.detectedLanguage) && (_jsx("div", { className: "mb-2 px-3 py-1.5 bg-surface/60 border-l-2 border-line rounded-[3px] text-ink-4 text-[12px] leading-snug", children: t("principles.languageMismatchHint", { lang: card.detectedLanguage === 'en' ? 'English' : '中文' }) })), _jsx("h3", { className: "font-semibold text-ink mb-1", children: card.title }), card.titleUsedFallback && card.originalTitle && (_jsxs("details", { className: "mb-1", children: [_jsx("summary", { className: "text-ink-4 text-[11px] font-mono cursor-pointer hover:underline", children: t("principles.readabilityOriginalLabel") }), _jsx("div", { className: "text-ink-4 text-[12px] leading-snug mt-1 font-mono bg-surface/40 px-2 py-1 rounded-[3px] break-all", children: card.originalTitle })] })), _jsx("p", { className: "text-ink-3 text-[13px] line-clamp-3 leading-relaxed", children: card.text }), _jsxs("p", { className: "font-mono text-[11px] text-ink-4 mt-2", children: [t("principles.updatedAt"), ": ", new Date(card.updatedAt).toLocaleDateString()] })] }, card.principleId))) }))] }));
+}