create-principles-disciple 1.85.0 → 1.87.0

package/console/dist/ui/pages/focus/FocusPage.js

@@ -1,10 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
 import { 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 { fetchGovernanceQueue, fetchApprovalsGrouped, } from "../../api.js";
+import { DailyThoughtCard } from "../../components/focus/daily-thought-card.js";
+import { fetchGovernanceQueue, fetchApprovalsGrouped, approveApproval, rejectApproval, } from "../../api.js";
+export function summarizeDecisionResults(results) {
+    const failures = results.filter((result) => !result.success);
+    const first = failures[0];
+    return {
+        allSucceeded: failures.length === 0,
+        failedCount: failures.length,
+        ...(first
+            ? { failureReason: first.nextAction ? `${first.error} ${first.nextAction}` : first.error }
+            : {}),
+    };
+}
 // ── Approval group validator (not in validators.ts, page-specific) ─────────
 /** Type guard: is this a non-null object with own properties (not inherited)? */
 function isRecord(value) {
@@ -38,10 +52,12 @@ function validateApprovalGroup(raw) {
             !Object.hasOwn(r, "artifactId") ||
             !Object.hasOwn(r, "channel") ||
             !Object.hasOwn(r, "createdAt") ||
+            !Object.hasOwn(r, "status") ||
             typeof r.id !== "string" ||
             typeof r.artifactId !== "string" ||
             typeof r.channel !== "string" ||
-            typeof r.createdAt !== "string") {
+            typeof r.createdAt !== "string" ||
+            typeof r.status !== "string") {
             return null;
         }
         validRecords.push({
@@ -49,11 +65,22 @@ function validateApprovalGroup(raw) {
             artifactId: r.artifactId,
             channel: r.channel,
             createdAt: r.createdAt,
+            status: r.status,
         });
     }
+    // Wave 7: candidateDescription is optional — present when backend could
+    // extract human-readable content from the artifact contentJson.
+    // ERR-009: if field exists but is wrong type, fail loud (return null).
+    let candidateDescription;
+    if (Object.hasOwn(raw, "candidateDescription")) {
+        if (typeof raw.candidateDescription !== "string")
+            return null;
+        candidateDescription = raw.candidateDescription;
+    }
     return {
         principleId,
         principleTitle,
+        candidateDescription,
         status: status,
         records: validRecords,
     };
@@ -123,16 +150,106 @@ function getChannelLabel(channel, t) {
     }
 }
 // ── Sub-components ───────────────────────────────────────────────────────────
-function ProseSummary({ pendingCount, deviationCount, stagnationCount, }) {
+function ProseSummary({ pendingCount, deviationCount, stagnationCount, evidenceCount, }) {
     const { t } = useTranslation();
-    return (_jsxs("div", { className: "text-sm leading-relaxed text-ink-2 mb-7 px-[18px] py-[14px] bg-panel border border-line rounded-[6px]", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryLabel") }), " ", _jsx("span", { className: "font-mono font-semibold text-ink", children: pendingCount }), " ", _jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryPending") }), " ", "/", " ", _jsx("span", { className: "font-mono font-semibold text-ink", children: deviationCount }), " ", _jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryDeviation") }), " ", "/", " ", _jsx("span", { className: "font-mono font-semibold text-ink", children: stagnationCount }), " ", _jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryStagnation") })] }));
+    return (_jsxs("div", { className: "text-sm leading-relaxed text-ink-2 mb-7 px-[18px] py-[14px] bg-panel border border-line rounded-[6px]", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryLabel") }), " ", _jsx("span", { className: "font-mono font-semibold text-ink", children: pendingCount }), " ", _jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryPending") }), " ", "/", " ", evidenceCount > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono font-semibold text-ink", children: evidenceCount }), " ", _jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryEvidence") }), " "] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono font-semibold text-ink", children: deviationCount }), " ", _jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryDeviation") }), " "] })), "/", " ", _jsx("span", { className: "font-mono font-semibold text-ink", children: stagnationCount }), " ", _jsx("span", { className: "text-ink-3", children: t("pages.focus.summaryStagnation") })] }));
 }
-function PendingReviewCard({ group, }) {
+// ── Wave 4: Feedback Stratification ──────────────────────────────────────────
+// Shows three feedback layers by timescale, so the Owner sees what the system
+// already handled vs. what actually needs their judgment. Implements the
+// "feedback latency stratification" principle from the co-evolution article.
+function FeedbackStratification({ gateBlocksToday, inProgressCount, pendingCount, }) {
+    const { t } = useTranslation();
+    // Hide entirely when all three are zero — no feedback to stratify.
+    if (gateBlocksToday === 0 && inProgressCount === 0 && pendingCount === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "mb-7 px-[18px] py-[14px] bg-panel border border-line rounded-[6px]", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-3", children: t("pages.focus.stratLabel") }), _jsxs("div", { className: "flex items-stretch gap-3 flex-wrap", children: [_jsxs("div", { className: "flex-1 min-w-[140px] px-3 py-2 bg-surface/60 border border-line rounded-[4px]", children: [_jsxs("div", { className: "flex items-baseline gap-1.5", children: [_jsx("span", { className: "font-mono font-semibold text-[18px] text-ink-4 tabular-nums", children: gateBlocksToday }), _jsx("span", { className: "text-[12px] text-ink-3", children: t("pages.focus.stratGateBlocks") })] }), _jsx("div", { className: "text-[11px] text-ink-4 mt-0.5 leading-snug", children: t("pages.focus.stratGateBlocksHint") })] }), _jsxs("div", { className: "flex-1 min-w-[140px] px-3 py-2 bg-surface/60 border border-line rounded-[4px]", children: [_jsxs("div", { className: "flex items-baseline gap-1.5", children: [_jsx("span", { className: "font-mono font-semibold text-[18px] text-teal-600 tabular-nums", children: inProgressCount }), _jsx("span", { className: "text-[12px] text-ink-3", children: t("pages.focus.stratInProgress") })] }), _jsx("div", { className: "text-[11px] text-ink-4 mt-0.5 leading-snug", children: t("pages.focus.stratInProgressHint") })] }), _jsxs("div", { className: "flex-1 min-w-[140px] px-3 py-2 bg-gov/5 border border-gov/30 rounded-[4px] relative", children: [_jsxs("div", { className: "flex items-baseline gap-1.5", children: [_jsx("span", { className: "font-mono font-semibold text-[18px] text-gov tabular-nums", children: pendingCount }), _jsx("span", { className: "text-[12px] text-gov", children: t("pages.focus.stratPendingReview") })] }), _jsx("div", { className: "text-[11px] text-ink-4 mt-0.5 leading-snug", children: t("pages.focus.stratPendingReviewHint") }), _jsx("span", { className: "absolute -top-2 right-2 inline-flex items-center border border-gov/40 text-gov bg-panel rounded-[2px] px-[6px] py-0.5 font-mono text-[9px] uppercase tracking-wider", children: t("pages.focus.stratYouAreHere") })] })] })] }));
+}
+function PendingReviewCard({ group, onDecisionApplied, }) {
     const { t } = useTranslation();
     const primaryChannel = group.records[0]?.channel ?? "prompt";
     const channelLabel = getChannelLabel(primaryChannel, t);
     const isReversible = primaryChannel === "prompt" || primaryChannel === "defer_archive";
-    return (_jsxs("article", { className: "relative pl-[22px] py-[18px] pr-[18px] bg-panel border border-line rounded-[6px] cursor-pointer transition-colors hover:border-line-2", children: [_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-[3px] rounded-l-[6px] bg-gov" }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "inline-flex items-center border border-line rounded-[2px] px-[7px] py-1 font-mono text-[11px] text-ink-3 bg-surface/80 uppercase", children: channelLabel }), isReversible && (_jsx("span", { className: "inline-flex items-center border border-amber/35 text-amber rounded-[2px] px-[7px] py-1 font-mono text-[11px] uppercase", children: primaryChannel === "prompt" ? t("pages.focus.tagReversible") : t("pages.focus.tagLowRisk") }))] }), _jsx("div", { className: "mt-[14px] mb-2 font-semibold text-ink", children: group.principleTitle }), _jsx("div", { className: "mt-2 px-3 py-2 bg-surface/60 border-l-2 border-gov text-ink-3 text-[13px] leading-snug", children: t("pages.focus.evidenceSummary", { count: group.records.length }) }), _jsxs("div", { className: "flex gap-2 mt-4", children: [_jsx(Link, { to: `/principles/${group.principleId}`, className: "inline-flex items-center 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", "data-testid": `review-principle-${group.principleId}`, children: t("pages.focus.reviewAction") }), _jsx(Link, { to: `/principles/${group.principleId}`, className: "inline-flex items-center 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: t("pages.focus.viewFullChain") })] })] }));
+    // Inline review state (Wave 7: no more 404 jump to /principles/<fake-id>)
+    const [actionLoading, setActionLoading] = useState(false);
+    const [showRejectInput, setShowRejectInput] = useState(false);
+    const [rejectReason, setRejectReason] = useState("");
+    // Display title: prefer candidateDescription (human-readable) over principleTitle
+    // (which falls back to a fabricated principleId when the principle isn't in ledger).
+    const displayTitle = group.candidateDescription
+        ?? group.principleTitle
+        ?? t("pages.focus.untitledCandidate", { defaultValue: "待命名候选原则" });
+    async function applyDecisionToAllRecords(action, reason) {
+        // Only process pending records — skip already-approved/rejected to avoid
+        // stable partial failures on mixed-status groups.
+        const pendingRecords = group.records.filter((r) => r.status === "pending");
+        const results = [];
+        for (const record of pendingRecords) {
+            const result = action === "approve"
+                ? await approveApproval(record.id)
+                : await rejectApproval(record.id, reason ?? "");
+            results.push(result);
+        }
+        return { ...summarizeDecisionResults(results), totalCount: pendingRecords.length };
+    }
+    const handleApprove = async () => {
+        if (actionLoading)
+            return;
+        setActionLoading(true);
+        try {
+            const { allSucceeded, failedCount, totalCount, failureReason } = await applyDecisionToAllRecords("approve");
+            if (allSucceeded) {
+                toast.success(t("pages.focus.approveSucceeded", { defaultValue: "已批准" }));
+                onDecisionApplied();
+            }
+            else {
+                toast.error(t("pages.focus.partialFailure", {
+                    defaultValue: `批准完成，但 ${failedCount}/${totalCount} 条记录失败。`,
+                    failedCount,
+                    totalCount,
+                    reason: failureReason ?? t("pages.focus.unknownFailure", { defaultValue: "请检查服务日志。" }),
+                }));
+                onDecisionApplied();
+            }
+        }
+        catch {
+            toast.error(t("pages.focus.approveFailed", { defaultValue: "批准失败，请稍后重试。" }));
+        }
+        finally {
+            setActionLoading(false);
+        }
+    };
+    const handleReject = async () => {
+        if (actionLoading || !rejectReason.trim())
+            return;
+        setActionLoading(true);
+        try {
+            const { allSucceeded, failedCount, totalCount, failureReason } = await applyDecisionToAllRecords("reject", rejectReason.trim());
+            if (allSucceeded) {
+                toast.success(t("pages.focus.rejectSucceeded", { defaultValue: "已拒绝" }));
+                setShowRejectInput(false);
+                setRejectReason("");
+                onDecisionApplied();
+            }
+            else {
+                toast.error(t("pages.focus.partialFailure", {
+                    defaultValue: `拒绝完成，但 ${failedCount}/${totalCount} 条记录失败。`,
+                    failedCount,
+                    totalCount,
+                    reason: failureReason ?? t("pages.focus.unknownFailure", { defaultValue: "请检查服务日志。" }),
+                }));
+                onDecisionApplied();
+            }
+        }
+        catch {
+            toast.error(t("pages.focus.rejectFailed", { defaultValue: "拒绝失败，请稍后重试。" }));
+        }
+        finally {
+            setActionLoading(false);
+        }
+    };
+    return (_jsxs("article", { className: "relative pl-[22px] py-[18px] pr-[18px] bg-panel border border-line rounded-[6px] transition-colors", children: [_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-[3px] rounded-l-[6px] bg-gov" }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "inline-flex items-center border border-line rounded-[2px] px-[7px] py-1 font-mono text-[11px] text-ink-3 bg-surface/80 uppercase", children: channelLabel }), isReversible && (_jsx("span", { className: "inline-flex items-center border border-amber/35 text-amber rounded-[2px] px-[7px] py-1 font-mono text-[11px] uppercase", children: primaryChannel === "prompt" ? t("pages.focus.tagReversible") : t("pages.focus.tagLowRisk") }))] }), _jsx("div", { className: "mt-[14px] mb-2 font-semibold text-ink leading-snug", children: displayTitle }), _jsx("div", { className: "mt-2 px-3 py-2 bg-surface/60 border-l-2 border-gov text-ink-3 text-[13px] leading-snug", children: t("pages.focus.evidenceSummary", { count: group.records.length }) }), _jsxs("div", { className: "flex gap-2 mt-4 flex-wrap items-center", children: [_jsx("button", { type: "button", onClick: handleApprove, disabled: actionLoading, className: "inline-flex items-center 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: actionLoading ? t("common.loading") + "…" : t("pages.focus.approveAction", { defaultValue: "批准" }) }), _jsx("button", { type: "button", onClick: () => setShowRejectInput((v) => !v), disabled: actionLoading, className: "inline-flex items-center border border-line bg-surface text-ink rounded-[3px] px-[14px] py-[6px] text-[12.5px] hover:border-line-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.focus.rejectAction", { defaultValue: "拒绝" }) }), _jsx(Link, { to: "/evidence", className: "inline-flex items-center text-gov text-[12.5px] hover:underline focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.focus.viewFullChain") })] }), showRejectInput && (_jsxs("div", { className: "mt-3 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("pages.focus.rejectReasonLabel", { defaultValue: "拒绝原因（必填）" }) }), _jsx("textarea", { value: rejectReason, onChange: (e) => setRejectReason(e.target.value), placeholder: t("pages.focus.rejectReasonPlaceholder", { defaultValue: "请说明拒绝原因" }), 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" }), _jsxs("div", { className: "flex gap-2 mt-2", children: [_jsx("button", { type: "button", onClick: handleReject, disabled: !rejectReason.trim() || actionLoading, className: "inline-flex items-center border border-danger text-danger bg-surface rounded-[3px] px-[14px] py-[6px] text-[12.5px] hover:bg-danger/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", children: t("pages.focus.confirmReject", { defaultValue: "确认拒绝" }) }), _jsx("button", { type: "button", onClick: () => { setShowRejectInput(false); setRejectReason(""); }, className: "inline-flex items-center border border-line bg-surface text-ink rounded-[3px] px-[14px] py-[6px] text-[12.5px] hover:border-line-2 transition-colors", children: t("pages.focus.cancelAction", { defaultValue: "取消" }) })] })] }))] }));
 }
 function StagnationSignalCard({ signal }) {
     const { t } = useTranslation();
@@ -230,7 +347,7 @@ export function FocusPage() {
     }, [loadData]);
     // ── 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") {
@@ -247,19 +364,23 @@ export function FocusPage() {
     const nextActionCode = queueData?.nextActionCode ?? "wait_for_pipeline";
     const inProgressSummary = queueData?.inProgressSummary;
     const degradedSignals = queueData?.degradedSignals;
+    const evidenceCount = queueData?.evidenceInProgressCount ?? 0;
+    const gateBlocksToday = queueData?.gateBlocksToday ?? 0;
     const approvalDataUnavailable = (groupedData === null || groupedData.groups.length === 0) && pendingCount > 0;
     // Map codes to i18n text
     const stateReason = getStateReasonText(stateReasonCode, t, pendingCount);
     const nextAction = getNextActionText(nextActionCode, t);
-    return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.focus.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.focus.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.focus.subtitle") }), _jsxs("div", { className: "mb-7 px-[18px] py-[14px] bg-panel border border-line rounded-[6px]", children: [_jsx("div", { className: "flex items-center gap-2 mb-1", children: _jsx("span", { className: `inline-flex items-center rounded-[2px] px-[7px] py-1 font-mono text-[11px] uppercase ${governanceState === "owner_review_ready"
-                                ? "bg-gov/10 text-gov border border-gov/20"
-                                : governanceState === "degraded"
-                                    ? "bg-amber/10 text-amber border border-amber/20"
-                                    : governanceState === "in_progress"
-                                        ? "bg-green/10 text-green border border-green/20"
-                                        : "text-ink-4 border border-line bg-surface/80"}`, role: "status", children: t(`pages.focus.stateLabel.${governanceState}`) }) }), _jsx("div", { className: "text-ink-2 text-[13px] leading-relaxed mt-1", children: stateReason }), _jsxs("div", { className: "text-ink-4 text-[13px] leading-relaxed mt-1", children: [_jsx("span", { className: "font-medium", children: t("pages.focus.nextActionLabel") }), " ", nextAction] })] }), _jsx(ProseSummary, { pendingCount: pendingCount, deviationCount: deviationCount, stagnationCount: stagnationCount }), governanceState === "none" && pendingCount === 0 && deviationCount === 0 && stagnationCount === 0 && (stateReasonCode === "state_db_missing" ? (_jsx(ZeroStateDbMissing, {})) : (_jsxs(_Fragment, { children: [_jsx(ZeroStateHealthy, {}), _jsx("div", { className: "mt-4", children: _jsx(OnboardingGuide, {}) })] }))), governanceState === "in_progress" && inProgressSummary && (_jsx(InProgressGuide, { summary: inProgressSummary })), degradedSignals && degradedSignals.length > 0 && (_jsx(DegradedSummary, { signals: degradedSignals })), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-pending", children: [_jsx(SectionTitle, { id: "section-pending", children: t("pages.focus.sectionPending") }), pendingGroups.length > 0 ? (_jsx("div", { className: "space-y-[14px]", children: pendingGroups.map((group) => (_jsx(PendingReviewCard, { group: group }, group.principleId))) })) : (_jsx("div", { className: "text-ink-3 text-[13px] leading-relaxed py-3", children: approvalDataUnavailable
-                            ? (groupedErrorReason
-                                ? `${t("pages.focus.loadError")} (${groupedErrorReason})`
-                                : t("pages.focus.loadError"))
-                            : t("pages.focus.emptyPending") }))] }), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-deviation", children: [_jsx(SectionTitle, { id: "section-deviation", children: t("pages.focus.sectionDeviation") }), deviationCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-ink-2 text-sm mb-3", children: [_jsx("span", { className: "font-mono font-semibold text-ink", children: deviationCount }), " ", t("pages.focus.deviationCount", { count: deviationCount })] }), _jsx("div", { className: "text-ink-4 text-[13px] bg-surface/60 border-l-2 border-amber px-3 py-2 mb-4", children: t("pages.focus.deviationDisclaimer") }), _jsxs("details", { className: "group", children: [_jsx("summary", { className: "text-gov text-[13px] cursor-pointer hover:underline focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.focus.viewFullChain") }), _jsx("div", { className: "mt-2 pl-4 border-l-2 border-line text-ink-3 text-[13px]", children: t("pages.focus.deviationDetailPending") })] })] })) : (_jsx("div", { className: "text-ink-3 text-[13px] leading-relaxed py-3", children: t("pages.focus.emptyDeviation") }))] }), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-signals", children: [_jsx(SectionTitle, { id: "section-signals", children: t("pages.focus.sectionSignals") }), stagnationSignals.length > 0 ? (_jsx("div", { className: "space-y-[10px]", children: stagnationSignals.map((signal) => (_jsx(StagnationSignalCard, { signal: signal }, signal.principleId))) })) : (_jsx("div", { className: "text-ink-3 text-[13px] leading-relaxed py-3", children: t("pages.focus.emptySignals") }))] }), _jsx("footer", { className: "mt-12 pt-6 border-t border-line text-ink-3 text-[13px]", children: t("pages.focus.footer") })] }));
+    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.focus.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.focus.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.focus.subtitle") }), _jsxs("div", { className: "mb-7 px-[18px] py-[14px] bg-panel border border-line rounded-[6px]", children: [_jsx("div", { className: "flex items-center gap-2 mb-1", children: _jsx("span", { className: `inline-flex items-center rounded-[2px] px-[7px] py-1 font-mono text-[11px] uppercase ${governanceState === "owner_review_ready"
+                                    ? "bg-gov/10 text-gov border border-gov/20"
+                                    : governanceState === "degraded"
+                                        ? "bg-amber/10 text-amber border border-amber/20"
+                                        : governanceState === "in_progress"
+                                            ? "bg-green/10 text-green border border-green/20"
+                                            : "text-ink-4 border border-line bg-surface/80"}`, role: "status", children: t(`pages.focus.stateLabel.${governanceState}`) }) }), _jsx("div", { className: "text-ink-2 text-[13px] leading-relaxed mt-1", children: stateReason }), _jsxs("div", { className: "text-ink-4 text-[13px] leading-relaxed mt-1", children: [_jsx("span", { className: "font-medium", children: t("pages.focus.nextActionLabel") }), " ", nextAction] })] }), _jsx(ProseSummary, { pendingCount: pendingCount, deviationCount: deviationCount, stagnationCount: stagnationCount, evidenceCount: evidenceCount }), _jsx(DailyThoughtCard, {}), _jsx(FeedbackStratification, { gateBlocksToday: gateBlocksToday, inProgressCount: evidenceCount, pendingCount: pendingCount }), governanceState === "none" && pendingCount === 0 && deviationCount === 0 && stagnationCount === 0 && (stateReasonCode === "state_db_missing" ? (_jsx(ZeroStateDbMissing, {})) : (_jsxs(_Fragment, { children: [_jsx(ZeroStateHealthy, {}), _jsx("div", { className: "mt-4", children: _jsx(OnboardingGuide, {}) })] }))), governanceState === "in_progress" && inProgressSummary && (_jsx(InProgressGuide, { summary: inProgressSummary })), degradedSignals && degradedSignals.length > 0 && (_jsx(DegradedSummary, { signals: degradedSignals })), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-pending", children: [_jsx(SectionTitle, { id: "section-pending", children: t("pages.focus.sectionPending") }), pendingGroups.length > 0 ? (_jsx("div", { className: "space-y-[14px]", children: pendingGroups.map((group) => (_jsx(PendingReviewCard, { group: group, onDecisionApplied: loadData }, group.principleId))) })) : (_jsx("div", { className: "text-ink-3 text-[13px] leading-relaxed py-3", children: approvalDataUnavailable
+                                ? (groupedErrorReason
+                                    ? `${t("pages.focus.loadError")} (${groupedErrorReason})`
+                                    : t("pages.focus.loadError"))
+                                : t("pages.focus.emptyPending") }))] }), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-deviation", children: [_jsx(SectionTitle, { id: "section-deviation", children: evidenceCount > 0
+                                ? t("pages.focus.sectionEvidenceInProgress")
+                                : t("pages.focus.sectionDeviation") }), deviationCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-ink-2 text-sm mb-3", children: [_jsx("span", { className: "font-mono font-semibold text-ink", children: deviationCount }), " ", t("pages.focus.deviationCount", { count: deviationCount })] }), _jsx("div", { className: "text-ink-4 text-[13px] bg-surface/60 border-l-2 border-amber px-3 py-2 mb-4", children: t("pages.focus.deviationDisclaimer") }), _jsxs("details", { className: "group", children: [_jsx("summary", { className: "text-gov text-[13px] cursor-pointer hover:underline focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.focus.viewFullChain") }), _jsx("div", { className: "mt-2 pl-4 border-l-2 border-line text-ink-3 text-[13px]", children: t("pages.focus.deviationDetailPending") })] })] })) : evidenceCount > 0 ? (_jsx("div", { className: "text-ink-3 text-[13px] leading-relaxed py-3", children: t("pages.focus.evidenceInProgress", { count: evidenceCount }) })) : (_jsx("div", { className: "text-ink-3 text-[13px] leading-relaxed py-3", children: t("pages.focus.emptyDeviation") }))] }), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-signals", children: [_jsx(SectionTitle, { id: "section-signals", children: t("pages.focus.sectionSignals") }), stagnationSignals.length > 0 ? (_jsx("div", { className: "space-y-[10px]", children: stagnationSignals.map((signal) => (_jsx(StagnationSignalCard, { signal: signal }, signal.principleId))) })) : (_jsx("div", { className: "text-ink-3 text-[13px] leading-relaxed py-3", children: t("pages.focus.emptySignals") }))] }), _jsx("footer", { className: "mt-12 pt-6 border-t border-line text-ink-3 text-[13px]", children: t("pages.focus.footer") })] }) }));
 }

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

@@ -13,34 +13,35 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PageShell } from '../../components/layout/page-shell.js';
+import { PageLoading } from '../../components/layout/page-loading.js';
 import { Badge } from '../../components/ui/badge.js';
 import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card.js';
 import { Button } from '../../components/ui/button.js';
 import { fetchEvidenceChain } from '../../api.js';
 import { formatDate } from '../../utils/format.js';
-/**
- * Translate with fallback — if the i18n key doesn't exist (returns the key itself),
- * return the fallback instead. Prevents raw keys like "pages.pain.source_unknown_value"
- * from being displayed to the user.
- */
-function tFallback(t, key, fallback) {
-    const result = t(key);
-    return result === key ? fallback : result;
-}
+import { buildCardLayers, buildDebugIdSummary, isLayer2EffectivelyEmpty } from './pain-card-helpers.js';
+import { enumLabel } from '../../utils/enum-labels.js';
 function groupForState(state) {
     switch (state) {
-        case 'pain_recorded':
-        case 'diagnosis_queued':
-        case 'diagnosis_running':
-        case 'diagnosis_succeeded':
-        case 'candidate_generated':
-        case 'internalization_started':
-            return 'active_chain';
-        case 'evidence_only':
+        case 'evidence-only':
             return 'evidence_only';
-        case 'diagnosis_failed':
-        case 'diagnosis_retry_wait':
+        case 'recorded-only':
+        case 'diagnosis-queued':
+        case 'diagnosis-running':
+        case 'diagnosis-succeeded':
+        case 'candidate-generated':
+        case 'internalization-missing':
+        case 'internalization-pending':
+        case 'internalization-running':
+        case 'internalization-succeeded':
+        case 'owner-reviewable':
+            return 'active_chain';
+        case 'diagnosis-failed':
+        case 'diagnosis-retry-wait':
+        case 'internalization-failed':
             return 'failed';
+        case 'malformed':
+        case 'degraded':
         default:
             return 'evidence_only';
     }
@@ -83,9 +84,10 @@ export function PainPage() {
             return next;
         });
     };
-    return (_jsxs(PageShell, { children: [_jsxs("div", { className: "mb-8", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.14em] text-ink-3", children: t('pages.pain.eyebrow') }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mt-3 mb-2", children: t('pages.pain.title') }), _jsx("p", { className: "text-ink-3 text-sm leading-relaxed max-w-[712px]", children: t('pages.pain.description') })] }), _jsx("div", { className: "mb-6 p-3 bg-panel border border-line rounded-[var(--radius-md)] text-ink-3 text-[13px] leading-relaxed", children: t('pages.pain.honestyNote') }), state.status === 'loading' && (_jsxs("div", { className: "text-ink-3 text-sm py-8", children: [t('common.loading'), "\u2026"] })), state.status === 'error' && (_jsxs("div", { className: "py-8", children: [_jsxs("div", { className: "text-danger text-sm mb-2", children: [t('pages.pain.loadError'), ": ", state.message] }), _jsx(Button, { variant: "outline", size: "sm", onClick: loadData, children: t('common.refresh') })] })), state.status === 'loaded' && (_jsx(LoadedContent, { data: state.data, expandedIds: expandedIds, onToggle: toggleExpanded, onRefresh: loadData, t: t }))] }));
+    return (_jsxs(PageShell, { children: [_jsxs("div", { className: "mb-8", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.14em] text-ink-3", children: t('pages.pain.eyebrow') }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mt-3 mb-2", children: t('pages.pain.title') }), _jsx("p", { className: "text-ink-3 text-sm leading-relaxed max-w-[712px]", children: t('pages.pain.description') })] }), _jsx("div", { className: "mb-6 p-3 bg-panel border border-line rounded-[var(--radius-md)] text-ink-3 text-[13px] leading-relaxed", children: t('pages.pain.honestyNote') }), state.status === 'loading' && (_jsx(PageLoading, { cardCount: 4, label: t('common.loading') })), state.status === 'error' && (_jsxs("div", { className: "py-8", children: [_jsxs("div", { className: "text-danger text-sm mb-2", children: [t('pages.pain.loadError'), ": ", state.message] }), _jsx(Button, { variant: "outline", size: "sm", onClick: loadData, children: t('common.refresh') })] })), state.status === 'loaded' && (_jsx("div", { className: "animate-[pdFadeIn_400ms_ease-out]", children: _jsx(LoadedContent, { data: state.data, expandedIds: expandedIds, onToggle: toggleExpanded, onRefresh: loadData, t: t }) }))] }));
 }
 function LoadedContent({ data, expandedIds, onToggle, onRefresh, t }) {
+    const [reviewQueueExpanded, setReviewQueueExpanded] = useState(false);
     // Show degraded banner if data sources are partially unavailable
     const hasDegraded = !!data.degradedReason;
     // Group records by state category
@@ -101,6 +103,17 @@ function LoadedContent({ data, expandedIds, onToggle, onRefresh, t }) {
                     const records = grouped.get(group);
                     if (!records || records.length === 0)
                         return null;
+                    // For active_chain group, fold owner-reviewable records into a count
+                    // row when there are 2+ — they are already in the governance queue
+                    // and repeating each as a full card here is noise. Single record
+                    // stays expanded. Click the fold row to expand in-place.
+                    if (group === 'active_chain') {
+                        const inReview = records.filter((r) => r.state === 'owner-reviewable');
+                        const others = records.filter((r) => r.state !== 'owner-reviewable');
+                        const foldReviewQueue = inReview.length >= 2;
+                        const reviewQueueLabel = t('pages.pain.inReviewQueueCount').replace('{{count}}', String(inReview.length));
+                        return (_jsxs("div", { children: [_jsxs("div", { className: "font-mono text-[11px] uppercase tracking-[0.12em] text-ink-4 mb-3", children: [t(`pages.pain.group_${group}`), " (", records.length, ")"] }), _jsxs("div", { className: "space-y-4", children: [others.map((record) => (_jsx(EvidenceChainCard, { record: record, expanded: expandedIds.has(record.id), onToggle: () => onToggle(record.id), t: t }, record.id))), foldReviewQueue && !reviewQueueExpanded && (_jsxs("button", { type: "button", onClick: () => setReviewQueueExpanded(true), className: "w-full text-left p-3 bg-panel border border-line rounded-[var(--radius-md)] text-ink-3 text-sm hover:bg-paper-2 transition-colors", children: [reviewQueueLabel, " \u00B7 ", t('pages.pain.goToGovernance')] })), (!foldReviewQueue || reviewQueueExpanded) && inReview.map((record) => (_jsx(EvidenceChainCard, { record: record, expanded: expandedIds.has(record.id), onToggle: () => onToggle(record.id), t: t }, record.id))), foldReviewQueue && reviewQueueExpanded && (_jsxs("button", { type: "button", onClick: () => setReviewQueueExpanded(false), className: "font-mono text-[11px] text-ink-4 hover:text-ink-3 transition-colors", children: [reviewQueueLabel, " \u25B2"] }))] })] }, group));
+                    }
                     return (_jsxs("div", { children: [_jsxs("div", { className: "font-mono text-[11px] uppercase tracking-[0.12em] text-ink-4 mb-3", children: [t(`pages.pain.group_${group}`), " (", records.length, ")"] }), _jsx("div", { className: "space-y-4", children: records.map((record) => (_jsx(EvidenceChainCard, { record: record, expanded: expandedIds.has(record.id), onToggle: () => onToggle(record.id), t: t }, record.id))) })] }, group));
                 }) })), _jsxs("div", { className: "mt-8 font-mono text-[11px] text-ink-4", children: [t('pages.pain.generatedAt'), ": ", formatDate(data.generatedAt)] })] }));
 }
@@ -109,27 +122,53 @@ function EmptyState({ t }) {
     return (_jsx("div", { className: "py-8", children: _jsxs("div", { className: "p-5 bg-panel border border-line rounded-[var(--radius-md)]", children: [_jsx("h3", { className: "text-[17px] font-semibold text-ink mb-2", children: t('pages.pain.emptyTitle') }), _jsx("p", { className: "text-ink-3 text-sm leading-relaxed", children: t('pages.pain.emptyDescription') })] }) }));
 }
 function EvidenceChainCard({ record, expanded, onToggle, t }) {
+    const [copied, setCopied] = useState(false);
+    const layer2Empty = isLayer2EffectivelyEmpty(record);
     const stateVariant = stateToVariant(record.state);
-    const stateLabel = tFallback(t, `pages.pain.state_${record.state}`, record.state);
-    const sourceLabel = tFallback(t, `pages.pain.source_${record.sourceKind}`, record.sourceKind);
-    return (_jsxs(Card, { className: "overflow-hidden", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx(Badge, { variant: stateVariant, children: stateLabel }), _jsx(Badge, { variant: "outline", children: sourceLabel }), record.admissionDecision && (_jsx(Badge, { variant: "secondary", children: tFallback(t, `pages.pain.admission_${record.admissionDecision}`, record.admissionDecision) }))] }), _jsx("span", { className: "font-mono text-[11px] text-ink-4 whitespace-nowrap", children: formatDate(record.observedAt) })] }), _jsx(CardTitle, { className: "mt-2", children: record.summary })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "space-y-3 mb-4", children: [record.failureReason && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldFailureReason') }), _jsx("p", { className: "text-danger text-sm leading-relaxed", children: record.failureReason })] })), record.nextAction && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldNextAction') }), _jsx("p", { className: "text-ink-2 text-sm leading-relaxed", children: record.nextAction })] })), record.degradedReason && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldDegradedReason') }), _jsx("p", { className: "text-amber text-sm leading-relaxed", children: record.degradedReason })] }))] }), _jsxs("details", { open: expanded, onToggle: onToggle, children: [_jsx("summary", { className: "font-mono text-[11px] uppercase tracking-[0.1em] text-ink-3 cursor-pointer select-none hover:text-ink transition-colors", children: t('pages.pain.chainToggle') }), _jsx("div", { className: "mt-3 p-3 bg-paper-2 border border-line rounded-[var(--radius-sm)]", children: _jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-[13px]", children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainId') }), _jsx("span", { className: "font-mono text-ink-2", children: record.id }), record.linkedTaskId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainTaskId') }), _jsx("span", { className: "font-mono text-ink-2", children: record.linkedTaskId })] })), record.linkedTaskStatus && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainTaskStatus') }), _jsx("span", { className: "font-mono text-ink-2", children: record.linkedTaskStatus })] })), record.linkedCandidateId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainCandidateId') }), _jsx("span", { className: "font-mono text-ink-2", children: record.linkedCandidateId })] })), record.linkedPrincipleId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainPrincipleId') }), _jsx("span", { className: "font-mono text-ink-2", children: record.linkedPrincipleId })] })), _jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainSourceKind') }), _jsx("span", { className: "font-mono text-ink-2", children: record.sourceKind }), _jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainState') }), _jsx("span", { className: "font-mono text-ink-2", children: record.state })] }) })] })] })] }));
+    const stateLabel = enumLabel('evidenceState', record.state, t);
+    const sourceLabel = enumLabel('sourceKind', record.sourceKind, t);
+    const layers = buildCardLayers(record);
+    // Confidence label — resolve via enumLabel for consistent i18n
+    const confidenceDisplay = layers.layer2.confidence
+        ? `${enumLabel('confidence', layers.layer2.confidence.label, t)} (${layers.layer2.confidence.raw.toFixed(2)})`
+        : null;
+    return (_jsxs(Card, { className: "overflow-hidden", children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx(Badge, { variant: stateVariant, children: stateLabel }), _jsx(Badge, { variant: "outline", children: sourceLabel }), record.admissionDecision && (_jsx(Badge, { variant: "secondary", children: enumLabel('admission', record.admissionDecision, t) }))] }), _jsx("span", { className: "font-mono text-[11px] text-ink-4 whitespace-nowrap", children: formatDate(record.observedAt) })] }) }), _jsxs(CardContent, { children: [_jsxs("div", { className: "space-y-3 mb-4", children: [_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldTrigger') }), layer2Empty ? (_jsx("p", { className: "text-ink-3 text-sm italic leading-relaxed", children: t('pages.pain.noHumanSummary') })) : (_jsx(CardTitle, { className: "text-[15px] leading-relaxed", children: layers.layer2.triggerSummary }))] }), layers.layer2.conclusion && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldConclusion') }), _jsx("p", { className: "text-ink text-sm leading-relaxed font-medium", children: layers.layer2.conclusion })] })), layers.layer2.applicability && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldApplicability') }), _jsx("p", { className: "text-ink-2 text-sm leading-relaxed", children: layers.layer2.applicability })] })), confidenceDisplay && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldConfidence') }), _jsx("p", { className: "text-ink-2 text-sm", children: confidenceDisplay })] })), layers.layer2.failureReason && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldFailureReason') }), _jsx("p", { className: "text-danger text-sm leading-relaxed", children: layers.layer2.failureReason })] })), layers.layer2.degradedReason && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldDegradedReason') }), _jsx("p", { className: "text-amber text-sm leading-relaxed", children: layers.layer2.degradedReason })] })), layers.layer2.nextAction && (_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.fieldNextAction') }), _jsx("p", { className: "text-ink-2 text-sm leading-relaxed", children: layers.layer2.nextAction })] }))] }), _jsxs("div", { className: "mt-4 pt-3 border-t border-line", children: [_jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: async () => {
+                                            try {
+                                                await navigator.clipboard.writeText(buildDebugIdSummary(record));
+                                                setCopied(true);
+                                                setTimeout(() => setCopied(false), 2000);
+                                            }
+                                            catch (error) {
+                                                // clipboard unavailable — expand details as fallback
+                                                console.warn("Debug ID copy failed; falling back to expanded details.", error);
+                                                if (!expanded)
+                                                    onToggle();
+                                            }
+                                        }, className: "font-mono text-[11px] h-7", children: copied ? t('pages.pain.copied') : t('pages.pain.copyDebugId') }), _jsx("button", { type: "button", onClick: onToggle, className: "font-mono text-[11px] text-ink-4 hover:text-ink-3 transition-colors underline-offset-2 hover:underline", children: t('pages.pain.expandTechDetails') })] }), expanded && (_jsx("div", { className: "mt-3 p-3 bg-paper-2 border border-line rounded-[var(--radius-sm)]", children: _jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-[13px]", children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainId') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.id }), layers.layer3.linkedTaskId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainTaskId') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.linkedTaskId })] })), layers.layer3.linkedTaskStatus && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainTaskStatus') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.linkedTaskStatus })] })), layers.layer3.linkedCandidateId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainCandidateId') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.linkedCandidateId })] })), layers.layer3.linkedPrincipleId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainPrincipleId') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.linkedPrincipleId })] })), layers.layer3.internalizationTaskId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainInternalizationTask') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.internalizationTaskId })] })), layers.layer3.dreamerTaskStatus && (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainDreamerStatus') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.dreamerTaskStatus })] })), _jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainSourceKind') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.sourceKind }), _jsx("span", { className: "font-mono text-ink-4", children: t('pages.pain.chainState') }), _jsx("span", { className: "font-mono text-ink-2", children: layers.layer3.state })] }) }))] })] })] }));
 }
 // ── Helpers ────────────────────────────────────────────────────────────────────
 function stateToVariant(state) {
     switch (state) {
-        case 'pain_recorded':
-        case 'diagnosis_queued':
-        case 'diagnosis_running':
+        case 'evidence-only':
+            return 'secondary';
+        case 'recorded-only':
+        case 'diagnosis-queued':
+        case 'diagnosis-running':
+        case 'internalization-pending':
+        case 'internalization-running':
             return 'amber';
-        case 'diagnosis_succeeded':
-        case 'candidate_generated':
-        case 'internalization_started':
+        case 'diagnosis-succeeded':
+        case 'candidate-generated':
+        case 'internalization-succeeded':
+        case 'owner-reviewable':
             return 'green';
-        case 'diagnosis_failed':
+        case 'diagnosis-failed':
+        case 'internalization-failed':
             return 'destructive';
-        case 'diagnosis_retry_wait':
+        case 'diagnosis-retry-wait':
             return 'amber';
-        case 'evidence_only':
+        case 'malformed':
+        case 'degraded':
         default:
             return 'secondary';
     }

package/console/dist/ui/pages/pain/pain-card-helpers.d.ts

@@ -0,0 +1,100 @@
+/**
+ * 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.
+ */
+export type ConfidenceLabel = 'high' | 'mid' | 'low';
+/**
+ * Map a numeric confidence to a human-readable label.
+ * Thresholds: ≥0.7 → 'high', 0.4–<0.7 → 'mid', <0.4 → 'low'
+ */
+export declare function mapConfidenceLabel(confidence: number): ConfidenceLabel;
+export interface Layer1Data {
+    stateLabel: string;
+    sourceLabel: string;
+    observedAt: string;
+}
+export interface Layer2Data {
+    /** trigger behavior summary — always present */
+    triggerSummary: string;
+    /** PD conclusion — only when candidateTitle exists */
+    conclusion: string | null;
+    /** applicability — candidateSummary or rootCauseSummary */
+    applicability: string | null;
+    /** confidence level label + raw value */
+    confidence: {
+        label: ConfidenceLabel;
+        raw: number;
+    } | null;
+    /** failure reason — only for failed states */
+    failureReason: string | null;
+    /** degraded reason — when data is degraded */
+    degradedReason: string | null;
+    /** next action guidance */
+    nextAction: string | null;
+}
+export interface Layer3Data {
+    id: string;
+    linkedTaskId: string | null;
+    linkedTaskStatus: string | null;
+    linkedCandidateId: string | null;
+    linkedPrincipleId: string | null;
+    sourceKind: string;
+    state: string;
+    /** PRI-380: internalization task linkage */
+    internalizationTaskId: string | null;
+    dreamerTaskStatus: string | null;
+}
+export interface CardLayers {
+    layer1: Layer1Data;
+    layer2: Layer2Data;
+    layer3: Layer3Data;
+}
+export interface RecordData {
+    id: string;
+    sourceKind: string;
+    observedAt: string;
+    state: string;
+    summary: string;
+    candidateTitle?: string;
+    candidateSummary?: string;
+    rootCauseSummary?: string;
+    confidence?: number;
+    recommendationKind?: string;
+    failureReason?: string;
+    degradedReason?: string;
+    nextAction?: string;
+    linkedTaskId?: string;
+    linkedTaskStatus?: string;
+    linkedCandidateId?: string;
+    linkedPrincipleId?: string;
+    /** PRI-380: internalization task linkage */
+    internalizationTaskId?: string;
+    dreamerTaskStatus?: string;
+}
+/**
+ * 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 declare function buildCardLayers(record: RecordData): CardLayers;
+/**
+ * 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 declare function buildDebugIdSummary(record: RecordData): string;
+/**
+ * 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 declare function isLayer2EffectivelyEmpty(record: RecordData): boolean;