create-principles-disciple 1.86.0 → 1.87.0

package/console/dist/ui/pages/pain/pain-card-helpers.js

@@ -0,0 +1,103 @@
+/**
+ * pain-card-helpers.ts — Pure display logic for EvidenceChainCard.
+ *
+ * PRI-344: Extracted from PainPage.tsx for testability.
+ * No React dependency, no I/O. All functions are pure.
+ */
+/**
+ * Map a numeric confidence to a human-readable label.
+ * Thresholds: ≥0.7 → 'high', 0.4–<0.7 → 'mid', <0.4 → 'low'
+ */
+export function mapConfidenceLabel(confidence) {
+    if (confidence >= 0.7)
+        return 'high';
+    if (confidence >= 0.4)
+        return 'mid';
+    return 'low';
+}
+/**
+ * Build the three-layer card data from a record.
+ * - Layer 1: status badges + source + timestamp
+ * - Layer 2: human-readable content (trigger, conclusion, applicability, confidence)
+ * - Layer 3: technical IDs (collapsed by default)
+ */
+export function buildCardLayers(record) {
+    const layer1 = {
+        stateLabel: record.state,
+        sourceLabel: record.sourceKind,
+        observedAt: record.observedAt,
+    };
+    const layer2 = {
+        triggerSummary: record.summary,
+        conclusion: record.candidateTitle ?? null,
+        applicability: record.candidateSummary ?? record.rootCauseSummary ?? null,
+        confidence: record.confidence != null
+            ? { label: mapConfidenceLabel(record.confidence), raw: record.confidence }
+            : null,
+        failureReason: record.failureReason ?? null,
+        degradedReason: record.degradedReason ?? null,
+        nextAction: record.nextAction ?? null,
+    };
+    const layer3 = {
+        id: record.id,
+        linkedTaskId: record.linkedTaskId ?? null,
+        linkedTaskStatus: record.linkedTaskStatus ?? null,
+        linkedCandidateId: record.linkedCandidateId ?? null,
+        linkedPrincipleId: record.linkedPrincipleId ?? null,
+        sourceKind: record.sourceKind,
+        state: record.state,
+        internalizationTaskId: record.internalizationTaskId ?? null,
+        dreamerTaskStatus: record.dreamerTaskStatus ?? null,
+    };
+    return { layer1, layer2, layer3 };
+}
+// ── Debug ID summary (clipboard-friendly) ────────────────────────────────────
+/**
+ * Build a copyable debug ID summary string for developer troubleshooting.
+ * Only includes non-null fields. Format: `key: value` per line.
+ *
+ * Purpose: replaces the 8-row ID table in Layer 3 with one copyable string,
+ * so Owners never need to read raw IDs in the UI — they copy this string
+ * only when reporting an issue to a developer.
+ */
+export function buildDebugIdSummary(record) {
+    const lines = [];
+    lines.push(`pain_id: ${record.id}`);
+    if (record.linkedTaskId)
+        lines.push(`task_id: ${record.linkedTaskId}`);
+    if (record.linkedTaskStatus)
+        lines.push(`task_status: ${record.linkedTaskStatus}`);
+    if (record.linkedCandidateId)
+        lines.push(`candidate_id: ${record.linkedCandidateId}`);
+    if (record.linkedPrincipleId)
+        lines.push(`principle_id: ${record.linkedPrincipleId}`);
+    if (record.internalizationTaskId)
+        lines.push(`internalization_task_id: ${record.internalizationTaskId}`);
+    if (record.dreamerTaskStatus)
+        lines.push(`dreamer_status: ${record.dreamerTaskStatus}`);
+    lines.push(`source_kind: ${record.sourceKind}`);
+    lines.push(`state: ${record.state}`);
+    return lines.join('\n');
+}
+/**
+ * Check if a record's Layer 2 human-readable content is effectively empty.
+ * Used to show an honest placeholder instead of a visually-empty card that
+ * invites the user to expand Layer 3 IDs.
+ *
+ * "Effectively empty" = triggerSummary is blank OR equals a generic state-machine
+ * string, AND no conclusion/applicability/failureReason/degradedReason.
+ */
+export function isLayer2EffectivelyEmpty(record) {
+    const hasText = (value) => typeof value === 'string' && value.trim().length > 0;
+    const hasConclusion = hasText(record.candidateTitle);
+    const hasApplicability = hasText(record.candidateSummary) || hasText(record.rootCauseSummary);
+    const hasFailure = hasText(record.failureReason) || hasText(record.degradedReason);
+    if (hasConclusion || hasApplicability || hasFailure)
+        return false;
+    // triggerSummary is the only required field; if it's blank or a generic
+    // placeholder, the card visually looks empty.
+    const summary = record.summary?.trim();
+    if (!summary)
+        return true;
+    return false;
+}

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

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { PageShell } from "../../components/layout/page-shell.js";
+import { PageLoading } from "../../components/layout/page-loading.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";
+import { fetchPrincipleDetail, fetchApprovalsGrouped, fetchLifecycleMetrics, fetchPrincipleTrajectory, approveApproval, rejectApproval, } from "../../api.js";
 // ── Runtime validation (H section) ──────────────────────────────────────────
 function isString(v) {
     return typeof v === "string";
@@ -96,15 +97,15 @@ function validateLifecycleMetrics(data) {
         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" },
-];
+// ── Trajectory stage labels (i18n key mapping) ─────────────────────────────
+const STAGE_LABEL_KEYS = {
+    evidence: "principles.detail.stageEvidence",
+    diagnosis: "principles.detail.stageDiagnosis",
+    proposal: "principles.detail.stageProposal",
+    review: "principles.detail.stageReview",
+    deploy: "principles.detail.stageDeploy",
+    behavior: "principles.detail.stageBehavior",
+};
 // ── Component ───────────────────────────────────────────────────────────────
 export function PrincipleDetailPage() {
     const { t } = useTranslation("pages");
@@ -113,6 +114,7 @@ export function PrincipleDetailPage() {
     const [principle, setPrinciple] = useState(null);
     const [approvalGroup, setApprovalGroup] = useState(null);
     const [lifecycle, setLifecycle] = useState(null);
+    const [trajectory, setTrajectory] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     // Decision state
@@ -120,17 +122,22 @@ export function PrincipleDetailPage() {
     const [showRejectInput, setShowRejectInput] = useState(false);
     const [rejectReason, setRejectReason] = useState("");
     const [actionLoading, setActionLoading] = useState(false);
+    // Evidence ID copy state (Wave 6: stop showing raw UUIDs as primary content)
+    const [evidenceCopied, setEvidenceCopied] = useState(false);
+    const [evidenceExpanded, setEvidenceExpanded] = useState(false);
     // Fetch data
     const loadData = useCallback(async () => {
         if (!id)
             return;
         setLoading(true);
         setError(null);
+        setApprovalGroup(null); // Clear previous approval group to prevent stale actionability (P1)
         try {
-            const [pResult, aResult, lResult] = await Promise.all([
+            const [pResult, aResult, lResult, tResult] = await Promise.all([
                 fetchPrincipleDetail(id),
                 fetchApprovalsGrouped(),
                 fetchLifecycleMetrics(id),
+                fetchPrincipleTrajectory(id),
             ]);
             if (!pResult.success) {
                 setError(pResult.error ?? "Failed to load principle");
@@ -147,11 +154,22 @@ export function PrincipleDetailPage() {
                 const group = aData.groups.find((g) => g.principleId === id);
                 setApprovalGroup(group ?? null);
             }
+            else {
+                setApprovalGroup(null);
+            }
             const lData = lResult.success ? validateLifecycleMetrics(lResult.data) : null;
             setLifecycle(lData);
+            // Trajectory — validated at request layer via validateTrajectoryData
+            if (tResult.success && tResult.data) {
+                setTrajectory(tResult.data);
+            }
+            else {
+                setTrajectory(null);
+            }
         }
         catch (err) {
             setError(err instanceof Error ? err.message : "Unknown error");
+            setApprovalGroup(null);
         }
         finally {
             setLoading(false);
@@ -161,7 +179,37 @@ export function PrincipleDetailPage() {
         loadData();
     }, [loadData]);
     // ── Actions ─────────────────────────────────────────────────────────────
-    const handleApprove = () => setShowConfirm(true);
+    // Actionable Approval Check (PRI-387)
+    let isActionable = false;
+    let reasonKey = "";
+    let defaultReason = "";
+    if (!approvalGroup) {
+        reasonKey = "principles.detail.reasonDataUnavailable";
+        defaultReason = "数据暂不可用";
+    }
+    else if (approvalGroup.status !== "pending") {
+        reasonKey = "principles.detail.reasonAlreadyHandled";
+        defaultReason = "已处理";
+    }
+    else if (approvalGroup.records.length === 0) {
+        reasonKey = "principles.detail.reasonNoRecords";
+        defaultReason = "暂无待审批记录";
+    }
+    else {
+        const hasMvpChannel = approvalGroup.records.some((r) => r.channel === "prompt" || r.channel === "defer_archive");
+        if (!hasMvpChannel) {
+            reasonKey = "principles.detail.reasonUnsupportedChannel";
+            defaultReason = "不是 MVP 支持通道";
+        }
+        else {
+            isActionable = true;
+        }
+    }
+    const handleApprove = () => {
+        if (!isActionable)
+            return;
+        setShowConfirm(true);
+    };
     const cancelConfirm = () => setShowConfirm(false);
     // ── Apply decision to all records in the group ──────────────────────────
     // Constraint: "多通道审批记录在 UI 上收拢成对一条原则的单次治理决策"
@@ -187,7 +235,7 @@ export function PrincipleDetailPage() {
         };
     }
     const confirmApprove = async () => {
-        if (!approvalGroup || actionLoading)
+        if (!isActionable || !approvalGroup || actionLoading)
             return;
         setActionLoading(true);
         try {
@@ -214,13 +262,17 @@ export function PrincipleDetailPage() {
             setActionLoading(false);
         }
     };
-    const handleReject = () => setShowRejectInput(true);
+    const handleReject = () => {
+        if (!isActionable)
+            return;
+        setShowRejectInput(true);
+    };
     const cancelReject = () => {
         setShowRejectInput(false);
         setRejectReason("");
     };
     const confirmReject = async () => {
-        if (!approvalGroup || !rejectReason.trim() || actionLoading)
+        if (!isActionable || !approvalGroup || !rejectReason.trim() || actionLoading)
             return;
         setActionLoading(true);
         try {
@@ -249,16 +301,43 @@ export function PrincipleDetailPage() {
         }
     };
     const handlePark = () => {
-        toast.success(t("principles.detail.parked"));
+        // No-op: Park is disabled and not available in this version.
     };
     // ── Render ──────────────────────────────────────────────────────────────
     if (loading) {
-        return (_jsx(PageShell, { children: _jsx("p", { className: "text-ink-3 text-sm", children: t("principles.loading", { defaultValue: "Loading…" }) }) }));
+        return (_jsx(PageShell, { children: _jsx(PageLoading, { cardCount: 1, label: 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: "此原则已拒绝。" })] }) }))] }));
+    return (_jsx(PageShell, { children: _jsxs("div", { className: "animate-[pdFadeIn_400ms_ease-out]", 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") }), _jsxs("div", { className: "mt-2 flex items-center gap-3 flex-wrap", children: [_jsx("p", { className: "text-ink-2 text-[14px] leading-relaxed", children: t("principles.detail.evidenceCount", {
+                                                defaultValue: "已关联 {{count}} 条证据记录",
+                                                count: principle.derivedFromPainIds.length,
+                                            }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: async () => {
+                                                try {
+                                                    const summary = principle.derivedFromPainIds
+                                                        .map((pid, i) => `pain_${i + 1}_id: ${pid}`)
+                                                        .join("\n");
+                                                    await navigator.clipboard.writeText(summary);
+                                                    setEvidenceCopied(true);
+                                                    setTimeout(() => setEvidenceCopied(false), 2000);
+                                                }
+                                                catch (error) {
+                                                    // clipboard unavailable — expand as fallback
+                                                    console.warn("Evidence ID copy failed; expanding technical details.", error);
+                                                    if (!evidenceExpanded)
+                                                        setEvidenceExpanded(true);
+                                                }
+                                            }, className: "font-mono text-[11px] h-7", children: evidenceCopied
+                                                ? t("principles.detail.evidenceCopied", { defaultValue: "已复制" })
+                                                : t("principles.detail.copyEvidenceId", { defaultValue: "复制证据 ID" }) }), _jsx("button", { type: "button", onClick: () => setEvidenceExpanded((v) => !v), className: "font-mono text-[11px] text-ink-4 hover:text-ink-3 transition-colors underline-offset-2 hover:underline", children: t("principles.detail.expandTechDetails", { defaultValue: "展开技术细节" }) }), _jsx(Link, { to: "/evidence", className: "font-mono text-[11px] text-gov hover:underline transition-colors", children: t("principles.detail.viewEvidenceChain", { defaultValue: "在证据链页查看 →" }) })] }), evidenceExpanded && (_jsx("div", { className: "mt-3 p-3 bg-paper-2 border border-line rounded-[var(--radius-sm)]", children: _jsx("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-[13px]", children: principle.derivedFromPainIds.map((painId, idx) => (_jsxs("div", { className: "contents", children: [_jsx("span", { className: "font-mono text-ink-4", children: t("principles.detail.evidenceIdLabel", {
+                                                        defaultValue: "证据 {{n}} ID",
+                                                        n: idx + 1,
+                                                    }) }), _jsx("span", { className: "font-mono text-ink-2 break-all", children: painId })] }, `${painId}-${idx}`))) }) }))] }))] }), _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: [trajectory?.degraded && (_jsxs("div", { className: "mb-4 p-3 bg-amber/5 border border-amber/20 rounded-[var(--radius-sm)]", children: [_jsx("p", { className: "text-amber text-[12px] font-mono", children: trajectory.degraded.reason }), _jsx("p", { className: "text-ink-4 text-[11px] mt-1", children: trajectory.degraded.nextAction })] })), _jsx("div", { className: "space-y-4", children: (trajectory?.stages ?? []).length > 0 ? (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(STAGE_LABEL_KEYS[stage.key] ?? `principles.detail.stage${stage.key}`, { defaultValue: stage.key }) }), _jsx("div", { className: "flex-1", children: stage.status === 'available' ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-ink-2 text-[13px]", children: stage.summary }), stage.detail && (_jsx("p", { className: "text-ink-3 text-[12px] mt-0.5", children: stage.detail })), stage.timestamp && (_jsx("p", { className: "text-ink-4 text-[11px] mt-0.5 font-mono", children: stage.timestamp }))] })) : (_jsxs("p", { className: "text-ink-4 text-[13px]", children: [stage.unavailableReason ?? '—', stage.nextAction && (_jsx("span", { className: "block text-ink-4 text-[11px] mt-0.5", children: stage.nextAction }))] })) })] }, stage.key)))) : (
+                                    // Fallback: show loading state or no-data message
+                                    ['evidence', 'diagnosis', 'proposal', 'review', 'deploy', 'behavior'].map((key) => (_jsxs("div", { className: "flex gap-4", children: [_jsx("span", { className: "font-mono text-[12px] text-ink-3 min-w-[80px]", children: t(STAGE_LABEL_KEYS[key] ?? `principles.detail.stage${key}`, { defaultValue: key }) }), _jsx("div", { className: "flex-1", children: _jsx("p", { className: "text-ink-4 text-[13px]", children: trajectory === null
+                                                        ? t("principles.detail.trajectoryLoadFailed", { defaultValue: "无法加载轨迹数据" })
+                                                        : "—" }) })] }, 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: "无法加载生命周期指标。你可以稍后重试。" }) }) }))] })] }), _jsxs("div", { className: "border-t border-line pt-6 mt-6", children: [_jsx(SectionTitle, { children: t("principles.detail.decisionTitle", { defaultValue: "决策操作" }) }), _jsxs("div", { className: "flex gap-3 flex-wrap items-center", children: [_jsx(Button, { variant: "default", onClick: handleApprove, disabled: !isActionable || actionLoading, children: t("principles.detail.approve") }), _jsx(Button, { variant: "outline", onClick: handlePark, disabled: true, children: t("principles.detail.park") }), _jsx(Button, { variant: "destructive", onClick: handleReject, disabled: !isActionable || actionLoading, children: t("principles.detail.reject") }), _jsxs("span", { className: "text-ink-4 text-[13px]", children: ["(", t("principles.detail.parkUnavailable", { defaultValue: "暂存尚未可用" }), ")"] })] }), !isActionable && (_jsxs("p", { className: "text-danger text-[13px] mt-3 font-mono", children: [t("principles.detail.unactionableReasonPrefix", { defaultValue: "不可操作原因: " }), t(reasonKey, { defaultValue: defaultReason })] })), isActionable && 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") })] })] })), isActionable && 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") })] })] }))] })] }) }));
 }

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

@@ -5,7 +5,9 @@ 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 { Skeleton } from "../../components/ui/skeleton.js";
 import { fetchPrinciples, fetchApprovalsGrouped, } from "../../api.js";
+import { enumLabel } from "../../utils/enum-labels.js";
 // ── Map principle status to review status ───────────────────────────────────
 function toReviewStatus(principleStatus, approvalStatus) {
     if (approvalStatus === "approved")
@@ -222,13 +224,13 @@ export function PrinciplesPage() {
                                         : "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'
+                                    : "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("div", { className: "grid gap-3 animate-[pdFadeIn_200ms_ease-out]", role: "status", "aria-live": "polite", "aria-label": t("principles.loading", { defaultValue: "Loading…" }), children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "bg-panel border border-line rounded-[var(--radius-md)] p-4 border-l-[3px] border-l-transparent", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 mb-3", children: [_jsx(Skeleton, { className: "h-5 w-[55%] rounded-sm" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-[2px]" })] }), _jsx(Skeleton, { className: "h-4 w-full rounded-sm mb-2" }), _jsx(Skeleton, { className: "h-4 w-[80%] rounded-sm mb-4" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-20 rounded-sm" }), _jsx(Skeleton, { className: "h-3.5 w-24 rounded-sm" })] })] }, i))) })), 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 " +
+                            : 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 animate-[pdFadeIn_400ms_ease-out]", 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 " +
+                        "transition-[border-color,background,transform] duration-150 " +
+                        "hover:border-line-2 hover:bg-surface hover:-translate-y-px " +
                         "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();
@@ -236,9 +238,7 @@ export function PrinciplesPage() {
                         }
                     }, 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'
+                                        " 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: enumLabel('channel', ch, t) }, 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))) }))] }));
+                                        : t("principles.languageHintEn") })), _jsxs("span", { className: "font-mono text-[11px] text-ink-4", children: [t("principles.confidence"), ": ", enumLabel('confidence', card.confidence, t)] })] }), 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))) }))] }));
 }

package/console/dist/ui/pages/report-problem/ReportProblemPage.js

@@ -3,8 +3,10 @@ import { useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { PageShell } from "../../components/layout/page-shell.js";
+import { PageLoading } from "../../components/layout/page-loading.js";
 import { SectionTitle } from "../../components/layout/section-title.js";
 import { createFeedbackReport, listFeedbackReports, getFeedbackReport, deleteFeedbackReport, } from "../../api.js";
+import { enumLabel } from "../../utils/enum-labels.js";
 import { parseDraftRecord, parseDraftSummary, parseEnvelopeReport, getErrorMessage, } from "../ReportProblemValidators.js";
 const INITIAL_FORM = {
     type: "bug",
@@ -62,7 +64,7 @@ function DraftCard({ draft, onCopyMarkdown, onCopyEmail, onOpenGithub, onDelete
 }
 function SavedDraftsSection({ drafts, onLoad, onDelete }) {
     const { t } = useTranslation();
-    return (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-saved", children: [_jsx(SectionTitle, { id: "section-saved", children: t("pages.reportProblem.saved.title") }), drafts.length === 0 ? (_jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed py-2", children: "\u2014" })) : (_jsx("div", { className: "space-y-3", children: drafts.map((draft) => (_jsxs("article", { className: "bg-panel border border-line rounded-[6px] px-4 py-3 flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "font-mono text-[11px] text-ink-3 mb-1", children: [draft.type, " \u00B7 ", draft.createdAt] }), _jsx("div", { className: "text-ink text-sm truncate", children: draft.title })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx("button", { type: "button", onClick: () => onLoad(draft.id), className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.reportProblem.saved.load") }), _jsx("button", { type: "button", onClick: () => onDelete(draft.id), className: "border border-red-200 text-red-600 rounded-[3px] px-[10px] py-[6px] text-[12px] hover:bg-red-50 transition-colors focus-visible:outline-2 focus-visible:outline-red-400 focus-visible:outline-offset-2", children: t("pages.reportProblem.draft.delete") })] })] }, draft.id))) }))] }));
+    return (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-saved", children: [_jsx(SectionTitle, { id: "section-saved", children: t("pages.reportProblem.saved.title") }), drafts.length === 0 ? (_jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed py-2", children: "\u2014" })) : (_jsx("div", { className: "space-y-3", children: drafts.map((draft) => (_jsxs("article", { className: "bg-panel border border-line rounded-[6px] px-4 py-3 flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "font-mono text-[11px] text-ink-3 mb-1", children: [enumLabel('feedbackType', draft.type, t), " \u00B7 ", draft.createdAt] }), _jsx("div", { className: "text-ink text-sm truncate", children: draft.title })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx("button", { type: "button", onClick: () => onLoad(draft.id), className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.reportProblem.saved.load") }), _jsx("button", { type: "button", onClick: () => onDelete(draft.id), className: "border border-red-200 text-red-600 rounded-[3px] px-[10px] py-[6px] text-[12px] hover:bg-red-50 transition-colors focus-visible:outline-2 focus-visible:outline-red-400 focus-visible:outline-offset-2", children: t("pages.reportProblem.draft.delete") })] })] }, draft.id))) }))] }));
 }
 export function ReportProblemPage() {
     const { t } = useTranslation();
@@ -219,27 +221,27 @@ export function ReportProblemPage() {
     }, [t, currentDraft]);
     // ── Loading state ────────────────────────────────────────────────────────
     if (loadingState === "loading") {
-        return (_jsx(PageShell, { children: _jsxs("div", { className: "text-ink-3 text-sm", role: "status", "aria-live": "polite", children: [t("common.loading"), "\u2026"] }) }));
+        return (_jsx(PageShell, { children: _jsx(PageLoading, { cardCount: 3, label: t("common.loading") }) }));
     }
     // ── Error state (ERR-002: degradation with reason) ───────────────────────
     if (loadingState === "error") {
         return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.reportProblem.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.reportProblem.title") }), _jsxs("div", { className: "mt-6 p-4 bg-panel border border-line rounded-[6px] text-ink-2 text-sm", children: [_jsx("p", { children: t("pages.reportProblem.loadError") }), loadError && (_jsx("p", { className: "mt-2 text-ink-4 text-[13px] font-mono", children: loadError }))] })] }));
     }
     // ── Loaded state ─────────────────────────────────────────────────────────
-    return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.reportProblem.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.reportProblem.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.reportProblem.subtitle") }), _jsx(NoAutoUploadBanner, {}), _jsxs("section", { "aria-labelledby": "section-form", children: [_jsx(SectionTitle, { id: "section-form", children: t("pages.reportProblem.form.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-4", children: t("pages.reportProblem.form.description") }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-panel border border-line rounded-[6px] p-5 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-type", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.type") }), _jsx("select", { id: "feedback-type", value: form.type, onChange: (e) => {
-                                            const val = e.target.value;
-                                            if (VALID_FEEDBACK_TYPES.has(val)) {
-                                                handleFieldChange("type", val);
-                                            }
-                                        }, className: "border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov", children: FEEDBACK_TYPES.map((ft) => (_jsx("option", { value: ft, children: t(`pages.reportProblem.form.types.${ft}`) }, ft))) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-severity", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.severity") }), _jsxs("select", { id: "feedback-severity", value: form.severity ?? "", onChange: (e) => {
-                                            const val = e.target.value;
-                                            if (val === "") {
-                                                handleFieldChange("severity", undefined);
-                                            }
-                                            else if (VALID_SEVERITY_OPTIONS.has(val)) {
-                                                handleFieldChange("severity", val);
-                                            }
-                                        }, className: "border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov", children: [_jsx("option", { value: "", children: t("pages.reportProblem.form.severityNotSet") }), SEVERITY_OPTIONS.map((sev) => (_jsx("option", { value: sev, children: t(`pages.reportProblem.form.severity${sev.charAt(0).toUpperCase() + sev.slice(1)}`) }, sev)))] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-title", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.titleLabel") }), _jsx("input", { id: "feedback-title", type: "text", value: form.title, onChange: (e) => handleFieldChange("title", e.target.value), className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-description", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.descriptionLabel") }), _jsx("textarea", { id: "feedback-description", value: form.description, onChange: (e) => handleFieldChange("description", e.target.value), rows: 4, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-steps", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.stepsLabel") }), _jsx("textarea", { id: "feedback-steps", value: form.stepsToReproduce, onChange: (e) => handleFieldChange("stepsToReproduce", e.target.value), rows: 3, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-expected", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.expectedLabel") }), _jsx("textarea", { id: "feedback-expected", value: form.expectedBehavior, onChange: (e) => handleFieldChange("expectedBehavior", e.target.value), rows: 2, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-actual", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.actualLabel") }), _jsx("textarea", { id: "feedback-actual", value: form.actualBehavior, onChange: (e) => handleFieldChange("actualBehavior", e.target.value), rows: 2, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsx("button", { type: "submit", disabled: form.submitting, className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: form.submitting ? t("pages.reportProblem.form.submitting") : t("pages.reportProblem.form.submit") }), currentDraft && (_jsx("button", { type: "button", onClick: () => setShowPreview((prev) => !prev), className: "border border-line bg-surface text-ink rounded-[3px] px-[14px] py-[6px] text-[12.5px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: showPreview
-                                            ? t("pages.reportProblem.form.hidePreview")
-                                            : t("pages.reportProblem.form.showPreview") }))] })] }), showPreview && currentDraft && (_jsxs("div", { className: "mt-4 bg-panel border border-line rounded-[6px] p-4", children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-3", children: "Markdown" }), _jsx("pre", { className: "whitespace-pre-wrap text-ink-2 text-[13px] leading-relaxed bg-surface border border-line rounded-[3px] p-3 max-h-[400px] overflow-auto", children: currentDraft.outputs.markdown })] }))] }), _jsx(PrivacySection, { draft: currentDraft }), currentDraft && (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-current-draft", children: [_jsx(SectionTitle, { id: "section-current-draft", children: t("pages.reportProblem.draft.title") }), _jsx(DraftCard, { draft: currentDraft, onCopyMarkdown: () => handleCopyMarkdown(currentDraft), onCopyEmail: () => handleCopyEmail(currentDraft), onOpenGithub: () => handleOpenGithub(currentDraft), onDelete: () => handleDeleteDraft(currentDraft.id) })] })), loadError && (_jsxs("div", { className: "mt-4 p-3 bg-panel border border-amber/20 rounded-[6px] text-ink-2 text-[13px]", children: [_jsx("p", { children: t("pages.reportProblem.loadError") }), _jsx("p", { className: "mt-1 text-ink-4 text-[12px] font-mono", children: loadError })] })), _jsx(SavedDraftsSection, { drafts: drafts, onLoad: handleLoadDraft, onDelete: handleDeleteDraft }), _jsx("footer", { className: "mt-12 pt-6 border-t border-line text-ink-3 text-[13px]", children: t("pages.reportProblem.privacy.guarantee") })] }));
+    return (_jsx(PageShell, { children: _jsxs("div", { className: "animate-[pdFadeIn_400ms_ease-out]", children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.reportProblem.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.reportProblem.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.reportProblem.subtitle") }), _jsx(NoAutoUploadBanner, {}), _jsxs("section", { "aria-labelledby": "section-form", children: [_jsx(SectionTitle, { id: "section-form", children: t("pages.reportProblem.form.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-4", children: t("pages.reportProblem.form.description") }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-panel border border-line rounded-[6px] p-5 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-type", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.type") }), _jsx("select", { id: "feedback-type", value: form.type, onChange: (e) => {
+                                                const val = e.target.value;
+                                                if (VALID_FEEDBACK_TYPES.has(val)) {
+                                                    handleFieldChange("type", val);
+                                                }
+                                            }, className: "border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov", children: FEEDBACK_TYPES.map((ft) => (_jsx("option", { value: ft, children: t(`pages.reportProblem.form.types.${ft}`) }, ft))) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-severity", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.severity") }), _jsxs("select", { id: "feedback-severity", value: form.severity ?? "", onChange: (e) => {
+                                                const val = e.target.value;
+                                                if (val === "") {
+                                                    handleFieldChange("severity", undefined);
+                                                }
+                                                else if (VALID_SEVERITY_OPTIONS.has(val)) {
+                                                    handleFieldChange("severity", val);
+                                                }
+                                            }, className: "border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov", children: [_jsx("option", { value: "", children: t("pages.reportProblem.form.severityNotSet") }), SEVERITY_OPTIONS.map((sev) => (_jsx("option", { value: sev, children: t(`pages.reportProblem.form.severity${sev.charAt(0).toUpperCase() + sev.slice(1)}`) }, sev)))] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-title", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.titleLabel") }), _jsx("input", { id: "feedback-title", type: "text", value: form.title, onChange: (e) => handleFieldChange("title", e.target.value), className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-description", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.descriptionLabel") }), _jsx("textarea", { id: "feedback-description", value: form.description, onChange: (e) => handleFieldChange("description", e.target.value), rows: 4, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-steps", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.stepsLabel") }), _jsx("textarea", { id: "feedback-steps", value: form.stepsToReproduce, onChange: (e) => handleFieldChange("stepsToReproduce", e.target.value), rows: 3, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-expected", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.expectedLabel") }), _jsx("textarea", { id: "feedback-expected", value: form.expectedBehavior, onChange: (e) => handleFieldChange("expectedBehavior", e.target.value), rows: 2, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-actual", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.actualLabel") }), _jsx("textarea", { id: "feedback-actual", value: form.actualBehavior, onChange: (e) => handleFieldChange("actualBehavior", e.target.value), rows: 2, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsx("button", { type: "submit", disabled: form.submitting, className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: form.submitting ? t("pages.reportProblem.form.submitting") : t("pages.reportProblem.form.submit") }), currentDraft && (_jsx("button", { type: "button", onClick: () => setShowPreview((prev) => !prev), className: "border border-line bg-surface text-ink rounded-[3px] px-[14px] py-[6px] text-[12.5px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: showPreview
+                                                ? t("pages.reportProblem.form.hidePreview")
+                                                : t("pages.reportProblem.form.showPreview") }))] })] }), showPreview && currentDraft && (_jsxs("div", { className: "mt-4 bg-panel border border-line rounded-[6px] p-4", children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-3", children: "Markdown" }), _jsx("pre", { className: "whitespace-pre-wrap text-ink-2 text-[13px] leading-relaxed bg-surface border border-line rounded-[3px] p-3 max-h-[400px] overflow-auto", children: currentDraft.outputs.markdown })] }))] }), _jsx(PrivacySection, { draft: currentDraft }), currentDraft && (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-current-draft", children: [_jsx(SectionTitle, { id: "section-current-draft", children: t("pages.reportProblem.draft.title") }), _jsx(DraftCard, { draft: currentDraft, onCopyMarkdown: () => handleCopyMarkdown(currentDraft), onCopyEmail: () => handleCopyEmail(currentDraft), onOpenGithub: () => handleOpenGithub(currentDraft), onDelete: () => handleDeleteDraft(currentDraft.id) })] })), loadError && (_jsxs("div", { className: "mt-4 p-3 bg-panel border border-amber/20 rounded-[6px] text-ink-2 text-[13px]", children: [_jsx("p", { children: t("pages.reportProblem.loadError") }), _jsx("p", { className: "mt-1 text-ink-4 text-[12px] font-mono", children: loadError })] })), _jsx(SavedDraftsSection, { drafts: drafts, onLoad: handleLoadDraft, onDelete: handleDeleteDraft }), _jsx("footer", { className: "mt-12 pt-6 border-t border-line text-ink-3 text-[13px]", children: t("pages.reportProblem.privacy.guarantee") })] }) }));
 }