create-principles-disciple 1.94.0 → 1.96.0

package/console/dist/ui/pages/intent/IntentPage.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { 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 { fetchIntentSummary, fetchIntentDecisionSummary, patchFeatureFlag, fetchIntentContent, fetchIntentVersions } from "../../api.js";
+import { IntentEditor, CreateIntentButton, EditButton } from "./IntentOnboarding.js";
+import { computeVersionDiff } from "@principles/core/runtime-v2/intent-browser";
+// ── Sub-components ────────────────────────────────────────────────────────────
+function FlagStatusBadge({ enabled }) {
+    const { t } = useTranslation();
+    // SPEC §22.1.1: Intent Page must show intent_engineering flag status.
+    // Badge has a text label, not color-only (SPEC §23.14.10).
+    const label = enabled
+        ? t("pages.intent.flagStatus.enabled")
+        : t("pages.intent.flagStatus.disabled");
+    return (_jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-[3px] text-[11px] font-mono border ${enabled
+            ? "border-emerald/40 text-emerald bg-emerald/5"
+            : "border-line text-ink-3 bg-surface"}`, role: "status", "aria-label": t("pages.intent.flagStatus.ariaLabel"), children: [_jsx("span", { className: `w-1.5 h-1.5 rounded-full ${enabled ? "bg-emerald" : "bg-ink-4"}`, "aria-hidden": "true" }), label] }));
+}
+function EditEntry({ filePath }) {
+    const { t } = useTranslation();
+    // SPEC §22.1.1 line 1402: Intent Page must show "edit INTENT.md 入口".
+    // INTENT.md is Owner-owned; PD never auto-modifies it. This entry only
+    // surfaces the file path so the Owner can edit it in their own editor.
+    return (_jsxs("div", { className: "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-2", children: t("pages.intent.editEntry.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-2", children: t("pages.intent.editEntry.description") }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "text-[12px] text-ink-2 bg-surface border border-line rounded-[3px] px-2 py-1 break-all", children: filePath }), _jsx("button", { type: "button", onClick: () => {
+                            // Copy to clipboard — Owner pastes into their editor.
+                            void navigator.clipboard?.writeText(filePath);
+                        }, className: "shrink-0 border border-line bg-surface text-ink-2 rounded-[3px] px-2 py-1 text-[11px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", "aria-label": t("pages.intent.editEntry.copyAriaLabel"), children: t("pages.intent.editEntry.copy") })] })] }));
+}
+function FlagToggleCard({ flagEnabled, onAfterEnable }) {
+    const { t } = useTranslation();
+    const [busy, setBusy] = useState(false);
+    const [acknowledged, setAcknowledged] = useState(false);
+    // Only show when disabled and not yet acknowledged.
+    // flagEnabled === true → already on, nothing to toggle.
+    // acknowledged === true → owner just enabled, parent will re-fetch and
+    //   flagEnabled will flip to true; this prevents a flash of the card.
+    if (flagEnabled || acknowledged)
+        return null;
+    return (_jsxs("div", { className: "bg-panel border border-amber/20 border-l-2 border-l-amber rounded-[6px] p-4 mb-5", children: [_jsx("h2", { className: "text-ink text-[15px] font-semibold mb-2", children: t("pages.intent.flagDisabled.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-3", children: t("pages.intent.flagDisabled.description") }), _jsx("button", { type: "button", disabled: busy, onClick: async () => {
+                    setBusy(true);
+                    try {
+                        const res = await patchFeatureFlag("intent_engineering", true);
+                        if (!res.success) {
+                            toast.error(res.error ?? t("pages.intent.flagStatus.enableFailed"));
+                            return;
+                        }
+                        setAcknowledged(true);
+                        onAfterEnable?.();
+                    }
+                    finally {
+                        setBusy(false);
+                    }
+                }, 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 focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", "aria-label": t("pages.intent.flagStatus.enable"), children: busy ? t("pages.intent.flagStatus.enabling") : t("pages.intent.flagStatus.enable") })] }));
+}
+function NotFoundBanner({ onCreated, lang }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "bg-panel border border-line rounded-[6px] p-5", children: [_jsx("h2", { className: "text-ink text-[15px] font-semibold mb-2", children: t("pages.intent.notFound.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-3", children: t("pages.intent.notFound.description") }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CreateIntentButton, { onCreated: onCreated, showOnboarding: true, lang: lang }), _jsx("span", { className: "text-ink-4 text-[12px] font-mono", children: t("pages.intent.notFound.nextAction") })] })] }));
+}
+function OversizedBanner() {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "bg-panel border border-amber/30 rounded-[6px] p-5", children: [_jsx("h2", { className: "text-ink text-[15px] font-semibold mb-2", children: t("pages.intent.oversized.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-3", children: t("pages.intent.oversized.description") }), _jsx("div", { className: "font-mono text-[12px] text-ink-2 bg-surface border border-line rounded-[3px] px-3 py-2", children: t("pages.intent.oversized.nextAction") })] }));
+}
+function WarningItem({ warning }) {
+    const { t } = useTranslation();
+    // SPEC: warnings are rendered as governance hints via i18n code key,
+    // not raw server-side English message text (P2 i18n fix).
+    const labelKey = `pages.intent.warnings.${warning.code}`;
+    return (_jsxs("li", { className: "flex items-start gap-2 text-ink-2 text-[13px]", children: [_jsx("span", { className: "text-amber shrink-0 mt-0.5", "aria-hidden": "true", children: "!" }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: t(labelKey) }), warning.section && (_jsxs("span", { className: "text-ink-3 font-mono ml-2", children: ["[", warning.section, "]"] }))] })] }));
+}
+function SectionContent({ label, content }) {
+    if (content === undefined || content.trim() === "")
+        return null;
+    return (_jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-1.5", children: label }), _jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed whitespace-pre-wrap", children: content })] }));
+}
+function MetaRow({ label, value }) {
+    return (_jsxs("div", { className: "flex items-baseline gap-3", children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 w-32 shrink-0", children: label }), _jsx("span", { className: "text-ink-2 text-[12px] font-mono break-all", children: value })] }));
+}
+function VersionEntry({ version, previousContent, reasonLabel, defaultExpanded = false }) {
+    const { t } = useTranslation();
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    // Compute section-level diff between previous and this version.
+    // For the oldest version (no previous), diff against "" so all non-empty
+    // sections show as "changed" — gives the user a visual of what was filled.
+    const diff = computeVersionDiff(previousContent, version.contentSnapshot);
+    // Localize the timestamp for display (avoid showing raw UTC to end users).
+    const localizedTime = (() => {
+        try {
+            return new Date(version.createdAt).toLocaleString(undefined, {
+                year: 'numeric', month: '2-digit', day: '2-digit',
+                hour: '2-digit', minute: '2-digit',
+            });
+        }
+        catch {
+            return version.createdAt.slice(0, 19).replace('T', ' ');
+        }
+    })();
+    return (_jsxs("div", { className: "border-b border-line last:border-b-0", children: [_jsxs("button", { type: "button", onClick: () => setExpanded((prev) => !prev), className: "w-full flex items-center gap-3 py-1.5 text-[12px] font-mono text-ink-2 hover:bg-surface-2/50 transition-colors text-left", "aria-expanded": expanded, "aria-label": expanded ? t("pages.intent.versionDiff.collapseHint") : t("pages.intent.versionDiff.expandHint"), title: version.contentHash, children: [_jsx("span", { className: "text-ink-3 shrink-0 w-4 inline-block", children: expanded ? "▾" : "▸" }), _jsx("span", { className: "text-ink-3 shrink-0", children: localizedTime }), _jsx("span", { className: "px-1.5 py-0.5 rounded-[2px] bg-surface-2 text-ink-3 shrink-0", children: reasonLabel }), _jsx("span", { className: "text-ink-4 text-[11px] ml-auto shrink-0 hidden sm:inline", children: expanded ? t("pages.intent.versionDiff.collapseHint") : t("pages.intent.versionDiff.expandHint") })] }), expanded && (_jsx("div", { className: "pb-2.5 pl-7 pr-2", children: _jsx("div", { className: "flex flex-wrap gap-1.5 mb-2", children: diff.map((d) => {
+                        // d.section is one of the 5 section keys from computeVersionDiff's
+                        // SECTION_KEYS — safe to construct the i18n key dynamically.
+                        const labelKey = `pages.intent.wizard.stepLabels.${d.section}`;
+                        return (_jsxs("span", { className: `inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[2px] text-[11px] font-mono border ${d.changed
+                                ? "border-amber/40 text-amber bg-amber/5"
+                                : "border-line text-ink-3 bg-surface"}`, children: [_jsx("span", { className: `w-1.5 h-1.5 rounded-full ${d.changed ? "bg-amber" : "bg-ink-4"}`, "aria-hidden": "true" }), t(labelKey), _jsx("span", { className: "text-ink-4 ml-0.5", children: d.changed ? t("pages.intent.versionDiff.changed") : t("pages.intent.versionDiff.unchanged") })] }, d.section));
+                    }) }) }))] }));
+}
+// Static mapping from ownerAction enum value to its i18n label key.
+// Avoids dynamic string construction so i18n extraction tools can find keys.
+const DECISION_COUNT_LABEL_KEYS = [
+    { action: "confirm_drift", labelKey: "pages.intent.decisions.countConfirmDrift" },
+    { action: "revise_intent", labelKey: "pages.intent.decisions.countReviseIntent" },
+    { action: "observe", labelKey: "pages.intent.decisions.countObserve" },
+    { action: "dismiss", labelKey: "pages.intent.decisions.countDismiss" },
+    { action: "promote_to_principle", labelKey: "pages.intent.decisions.countPromoteToPrinciple" },
+    { action: "promote_to_rulehost", labelKey: "pages.intent.decisions.countPromoteToRulehost" },
+];
+function DecisionSummarySection() {
+    const { t } = useTranslation();
+    const [state, setState] = useState("loading");
+    const [summary, setSummary] = useState(null);
+    const loadSummary = useCallback(async () => {
+        setState("loading");
+        const result = await fetchIntentDecisionSummary();
+        if (!result.success) {
+            // ERR-002: graceful degradation with reason; section collapses to a single line.
+            setState("error");
+            return;
+        }
+        setSummary(result.data);
+        setState("loaded");
+    }, []);
+    useEffect(() => {
+        loadSummary();
+    }, [loadSummary]);
+    return (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-decisions", children: [_jsx(SectionTitle, { id: "section-decisions", children: t("pages.intent.decisions.sectionTitle") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-3", children: t("pages.intent.decisions.sectionSubtitle") }), state === "loading" && (_jsx("div", { className: "bg-panel border border-line rounded-[6px] p-4 text-ink-3 text-[13px]", children: t("common.loading") })), state === "error" && (_jsx("div", { className: "bg-panel border border-line rounded-[6px] p-4 text-ink-3 text-[13px]", children: t("pages.intent.decisions.loadError") })), state === "loaded" && summary && (_jsxs("div", { className: "bg-panel border border-line rounded-[6px] p-4", children: [_jsx("dl", { className: "grid grid-cols-2 gap-x-6 gap-y-2 sm:grid-cols-3", children: DECISION_COUNT_LABEL_KEYS.map(({ action, labelKey }) => {
+                            const count = summary.counts[action];
+                            return (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("dt", { className: "text-ink-3 text-[12px]", children: t(labelKey) }), _jsx("dd", { className: "text-ink font-mono text-[13px]", children: count })] }, action));
+                        }) }), _jsx("div", { className: "mt-4 pt-3 border-t border-line", children: summary.lastDecisionAt === null ? (_jsx("p", { className: "text-ink-4 text-[12px]", children: t("pages.intent.decisions.noDecisions") })) : (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3", children: t("pages.intent.decisions.lastDecisionAtLabel") }), _jsx("span", { className: "text-ink-2 text-[12px] font-mono break-all", children: summary.lastDecisionAt })] })) })] }))] }));
+}
+// ── Main page component ──────────────────────────────────────────────────────
+export function IntentPage() {
+    const { t } = useTranslation();
+    const [data, setData] = useState(null);
+    const [pageState, setPageState] = useState("loading");
+    const [errorMsg, setErrorMsg] = useState(null);
+    // PRI-477: inline editor state
+    const [isEditing, setIsEditing] = useState(false);
+    const [editorContent, setEditorContent] = useState("");
+    const [editorLoading, setEditorLoading] = useState(false);
+    // Bilingual: language selector state
+    const [lang, setLang] = useState('zh-CN');
+    // Version history
+    const [versions, setVersions] = useState([]);
+    // Map raw backend reason codes to localized labels for the version history panel.
+    // Unknown reasons fall back to the raw string (observability over silent masking).
+    const versionReasonLabel = useCallback((reason) => {
+        if (reason === 'init')
+            return t("pages.intent.versionHistory.reasonInit");
+        if (reason === 'save')
+            return t("pages.intent.versionHistory.reasonSave");
+        return reason;
+    }, [t]);
+    const loadData = useCallback(async () => {
+        setPageState("loading");
+        setErrorMsg(null);
+        const result = await fetchIntentSummary(lang);
+        if (!result.success) {
+            // ERR-002: graceful degradation with reason
+            setErrorMsg(result.error ?? t("pages.intent.loadError"));
+            setPageState("error");
+            return;
+        }
+        // result.data is already validated by validateIntentSummary in the API layer
+        setData(result.data);
+        setPageState("loaded");
+        // Load version history in parallel (best-effort, never blocks page)
+        fetchIntentVersions(lang).then(v => {
+            if (v.success && v.data?.versions) {
+                setVersions(v.data.versions);
+            }
+        }).catch(() => { });
+    }, [t, lang]);
+    useEffect(() => {
+        loadData();
+    }, [loadData]);
+    // P0 fix: when language changes, reset editor state and stale versions.
+    // Without this, switching language while editing would keep the editor open
+    // with the old language's content — and saving would write that content
+    // into the NEW language's file (data corruption).
+    // Also clears stale versions so the panel doesn't show the old language's
+    // history while the new language's fetch is in flight or has failed.
+    useEffect(() => {
+        setIsEditing(false);
+        setEditorContent("");
+        setVersions([]);
+    }, [lang]);
+    // PRI-477: Called when user clicks "Edit" — fetch raw content and open editor
+    const handleStartEdit = useCallback(async () => {
+        setEditorLoading(true);
+        const result = await fetchIntentContent(lang);
+        setEditorLoading(false);
+        if (!result.success) {
+            toast.error(t("pages.intent.loadError"));
+            return;
+        }
+        setEditorContent(result.data.content);
+        setIsEditing(true);
+    }, [t, lang]);
+    // PRI-477: Called when template is created — refresh summary; optionally
+    // open the editor immediately so the user can start filling.
+    //
+    // PR-1083 review (CodeRabbit A5): `openEditor` lets CreateIntentButton
+    // distinguish "Start filling" (open editor) from "Skip" (just refresh the
+    // summary so NotFoundBanner re-renders to the sections view — otherwise the
+    // user would see a stale "file not found" banner even though INTENT.md now
+    // exists on disk).
+    const handleCreated = useCallback(async (openEditor) => {
+        await loadData();
+        if (!openEditor)
+            return;
+        setEditorLoading(true);
+        const result = await fetchIntentContent(lang);
+        setEditorLoading(false);
+        if (result.success) {
+            setEditorContent(result.data.content);
+            setIsEditing(true);
+        }
+    }, [loadData, lang]);
+    // PRI-477: Called after successful save — close editor and refresh summary
+    const handleSaved = useCallback(() => {
+        setIsEditing(false);
+        void loadData();
+    }, [loadData]);
+    // PRI-477: Called when user cancels editing
+    const handleCancelEdit = useCallback(() => {
+        setIsEditing(false);
+    }, []);
+    // ── Loading state ────────────────────────────────────────────────────────
+    if (pageState === "loading") {
+        return (_jsx(PageShell, { children: _jsx(PageLoading, { cardCount: 3, label: t("common.loading") }) }));
+    }
+    // ── Error state (ERR-002: degradation with reason) ───────────────────────
+    if (pageState === "error") {
+        return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.intent.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.intent.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.intent.loadError") }), errorMsg && (_jsx("p", { className: "mt-2 text-ink-4 text-[13px] font-mono", children: errorMsg }))] }), _jsx("div", { className: "mt-4", children: _jsx("button", { type: "button", onClick: loadData, 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: t("common.refresh") }) })] }));
+    }
+    // ── Loaded state ─────────────────────────────────────────────────────────
+    const summary = data;
+    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.intent.eyebrow") }), _jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink", children: t("pages.intent.title") }), summary && (_jsx(FlagStatusBadge, { enabled: summary.flagEnabled })), _jsxs("select", { value: lang, onChange: (e) => setLang(e.target.value), disabled: isEditing || editorLoading, className: "ml-auto border border-line bg-surface text-ink-2 rounded-[3px] px-2 py-1 text-[12px] font-mono focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": t("pages.intent.langSelector.ariaLabel"), title: isEditing || editorLoading ? t("pages.intent.langSelector.disabledWhileEditing") : undefined, children: [_jsx("option", { value: "zh-CN", children: "\u4E2D\u6587" }), _jsx("option", { value: "en", children: "English" })] })] }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.intent.subtitle") }), summary && !summary.flagEnabled && (_jsx(FlagToggleCard, { flagEnabled: summary.flagEnabled, onAfterEnable: loadData })), summary && summary.flagEnabled && !summary.found && summary.reason === "not_found" && (_jsx(NotFoundBanner, { onCreated: handleCreated, lang: lang })), summary && summary.flagEnabled && summary.found && summary.reason === "oversized" && (_jsx(OversizedBanner, {})), summary && summary.flagEnabled && summary.ok && summary.sections && (_jsxs(_Fragment, { children: [isEditing && (_jsx("section", { "aria-labelledby": "section-editor", className: "mb-8", children: _jsx(IntentEditor, { initialContent: editorContent, onSaved: handleSaved, onCancel: handleCancelEdit, lang: lang }) })), !isEditing && (_jsxs(_Fragment, { children: [_jsxs("section", { "aria-labelledby": "section-content", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx(SectionTitle, { id: "section-content", children: t("pages.intent.title") }), _jsx(EditButton, { onClick: handleStartEdit, loading: editorLoading })] }), _jsxs("div", { className: "bg-panel border border-line rounded-[6px] p-5 space-y-5", children: [_jsx(SectionContent, { label: t("pages.intent.sections.why"), content: summary.sections.why }), _jsx(SectionContent, { label: t("pages.intent.sections.desiredOutcome"), content: summary.sections.desiredOutcome }), _jsx(SectionContent, { label: t("pages.intent.sections.nonNegotiables"), content: summary.sections.nonNegotiables }), _jsx(SectionContent, { label: t("pages.intent.sections.stopEscalation"), content: summary.sections.stopEscalation }), _jsx(SectionContent, { label: t("pages.intent.sections.currentStrategicFocus"), content: summary.sections.currentStrategicFocus })] })] }), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-warnings", children: [_jsx(SectionTitle, { id: "section-warnings", children: t("pages.intent.warnings.title") }), summary.warnings.length === 0 ? (_jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed", children: t("pages.intent.warnings.empty") })) : (_jsx("ul", { className: "bg-panel border border-line rounded-[6px] p-4 space-y-2", children: summary.warnings.map((w, i) => (_jsx(WarningItem, { warning: w }, i))) }))] }), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-meta", children: [_jsx(SectionTitle, { id: "section-meta", children: t("pages.intent.meta.title") }), _jsxs("div", { className: "bg-panel border border-line rounded-[6px] p-4 space-y-2", children: [summary.lastEditedAt && (_jsx(MetaRow, { label: t("pages.intent.meta.lastEditedAt"), value: summary.lastEditedAt })), summary.contentHash && (_jsx(MetaRow, { label: t("pages.intent.meta.contentHash"), value: summary.contentHash })), summary.path && (_jsx(MetaRow, { label: t("pages.intent.meta.path"), value: summary.path }))] })] }), summary.path && (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-edit", children: [_jsx(SectionTitle, { id: "section-edit", children: t("pages.intent.editEntry.heading") }), _jsx(EditEntry, { filePath: summary.path })] }))] }))] })), summary && summary.flagEnabled && !summary.ok && summary.reason && summary.reason !== "not_found" && summary.reason !== "oversized" && (_jsxs("div", { className: "bg-panel border border-red-200 rounded-[6px] p-5", children: [_jsx("h2", { className: "text-ink text-[15px] font-semibold mb-2", children: t("pages.intent.loadError") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-3 font-mono", children: summary.reason }), summary.nextAction && (_jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed", children: summary.nextAction }))] })), summary && summary.flagEnabled && (_jsx(DecisionSummarySection, {})), versions.length > 0 && (_jsxs("details", { className: "border border-line rounded-[3px] mt-6", children: [_jsxs("summary", { className: "cursor-pointer px-4 py-2 text-[13px] font-medium text-ink-2 select-none", children: [t("pages.intent.versionHistory.title"), " (", versions.length, ")"] }), _jsx("div", { className: "px-4 py-2 border-t border-line", children: versions.map((v, idx) => {
+                                // versions are sorted newest-first; previous = idx + 1.
+                                // For the oldest version (no previous), diff against "" so
+                                // all filled sections show as "changed".
+                                const previousContent = versions[idx + 1]?.contentSnapshot ?? "";
+                                return (_jsx(VersionEntry, { version: v, previousContent: previousContent, reasonLabel: versionReasonLabel(v.reason), defaultExpanded: idx === 0 }, v.id));
+                            }) })] }))] }) }));
+}

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

@@ -17,9 +17,10 @@ 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 { ShinyText } from '../../components/ui/shiny-text.js';
+import { fetchEvidenceChain, recordIntentDecision, listIntentDecisionsByPainId, listIntentDecisionsByTaskId, dispatchFollowUp } from '../../api.js';
 import { formatDate } from '../../utils/format.js';
-import { buildCardLayers, buildDebugIdSummary, isLayer2EffectivelyEmpty } from './pain-card-helpers.js';
+import { buildCardLayers, buildDebugIdSummary, isLayer2EffectivelyEmpty, shouldRenderIntentTensionPanel, shouldRenderFollowUpActions, buildIntentDecisionPayload } from './pain-card-helpers.js';
 import { enumLabel } from '../../utils/enum-labels.js';
 function groupForState(state) {
     switch (state) {
@@ -84,7 +85,7 @@ 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' && (_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 }) }))] }));
+    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(ShinyText, { as: "h1", className: "text-[29px] font-semibold tracking-tight text-ink mt-3 mb-2", duration: 4.5, brightness: 0.5, disabled: state.status !== 'loaded' || state.data.records.length === 0, 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);
@@ -132,7 +133,7 @@ function EvidenceChainCard({ record, expanded, onToggle, t }) {
     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 () => {
+    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 })] }))] }), shouldRenderIntentTensionPanel(layers.layer2.intentTension) && (_jsx(IntentTensionPanel, { tension: layers.layer2.intentTension, recordId: record.id, painId: record.id, taskId: record.linkedTaskId ?? undefined, linkedCandidateId: record.linkedCandidateId ?? undefined, t: t })), _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);
@@ -173,3 +174,232 @@ function stateToVariant(state) {
             return 'secondary';
     }
 }
+// ── PRI-469: Intent Tension panel (SPEC §22.1) ───────────────────────────────
+/**
+ * Convert a snake_case enum value to a PascalCase suffix for i18n keys.
+ * E.g. 'action_drift' → 'ActionDrift', 'none' → 'None'.
+ */
+function snakeToPascal(value) {
+    return value
+        .split('_')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+/**
+ * Resolve an intentTension enum value to its localized label.
+ * kind determines the i18n key prefix:
+ * - 'source' → pages.pain.intentTensionSource{Pascal}
+ * - 'evidenceStrength' → pages.pain.intentTensionEvidenceStrength{Pascal}
+ * - 'suggestedAction' → pages.pain.intentTensionSuggestedAction{Pascal}
+ */
+function intentTensionEnumLabel(value, kind, t) {
+    const keyPrefix = kind === 'source'
+        ? 'intentTensionSource'
+        : kind === 'evidenceStrength'
+            ? 'intentTensionEvidenceStrength'
+            : 'intentTensionSuggestedAction';
+    return t(`pages.pain.${keyPrefix}${snakeToPascal(value)}`);
+}
+/**
+ * IntentTensionPanel — renders the intent tension decision panel (SPEC §22.1.2).
+ *
+ * This panel is rendered only when shouldRenderIntentTensionPanel returns true
+ * (i.e., tension is non-null AND source !== 'none' per SPEC §22.1.3).
+ *
+ * Follow-up actions (SPEC §22.1.4) appear only after a decision is persisted
+ * (PRI-471). The FollowUpActions component is rendered inside OwnerDecisionPanel
+ * when shouldRenderFollowUpActions returns true.
+ *
+ * Accessibility (EP-09):
+ * - Uses semantic <section> with aria-label
+ * - Uses <dl>/<dt>/<dd> for label-value pairs
+ * - Color is not the only indicator (text labels always present)
+ */
+function IntentTensionPanel({ tension, recordId, painId, taskId, linkedCandidateId, t }) {
+    const sourceLabel = intentTensionEnumLabel(tension.source, 'source', t);
+    const strengthLabel = intentTensionEnumLabel(tension.evidenceStrength, 'evidenceStrength', t);
+    const actionLabel = intentTensionEnumLabel(tension.suggestedOwnerAction, 'suggestedAction', t);
+    return (_jsxs("section", { className: "mt-4 p-4 border border-line rounded-[var(--radius-sm)] bg-paper-2", "aria-label": t('pages.pain.intentTensionTitle'), children: [_jsxs("h4", { className: "text-[13px] font-semibold text-ink mb-3 flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "inline-block w-1.5 h-1.5 rounded-full bg-amber" }), t('pages.pain.intentTensionTitle')] }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-[13px]", children: [_jsx("dt", { className: "font-mono text-ink-4", children: t('pages.pain.intentTensionSourceLabel') }), _jsx("dd", { className: "text-ink-2", children: sourceLabel }), _jsx("dt", { className: "font-mono text-ink-4", children: t('pages.pain.intentTensionEvidenceStrengthLabel') }), _jsx("dd", { className: "text-ink-2", children: strengthLabel }), _jsx("dt", { className: "font-mono text-ink-4", children: t('pages.pain.intentTensionSuggestedActionLabel') }), _jsx("dd", { className: "text-ink-2 font-medium", children: actionLabel })] }), tension.relatedIntentFields.length > 0 && (_jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.intentTensionRelatedIntentFieldsLabel') }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: tension.relatedIntentFields.map((field, idx) => (_jsx(Badge, { variant: "outline", children: field }, `${field}-${idx}`))) })] })), tension.evidence.length > 0 && (_jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.intentTensionEvidenceLabel') }), _jsx("ul", { className: "text-ink-2 text-sm leading-relaxed space-y-1", children: tension.evidence.map((item, idx) => (_jsx("li", { className: "pl-3 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-1 before:h-1 before:rounded-full before:bg-ink-4", children: item }, `${idx}-${item.slice(0, 12)}`))) })] })), _jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.intentTensionExplanationLabel') }), _jsx("p", { className: "text-ink-2 text-sm leading-relaxed", children: tension.explanation })] }), tension.intentDocHash && (_jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.intentTensionIntentDocHashLabel') }), _jsx("p", { className: "font-mono text-[11px] text-ink-3 break-all", children: tension.intentDocHash })] })), _jsx(OwnerDecisionPanel, { tension: tension, recordId: recordId, painId: painId, taskId: taskId, linkedCandidateId: linkedCandidateId, t: t })] }));
+}
+const OWNER_ACTION_BUTTONS = [
+    { action: 'confirm_drift', labelKey: 'pages.pain.ownerDecisionSubmitConfirmDrift' },
+    { action: 'revise_intent', labelKey: 'pages.pain.ownerDecisionSubmitReviseIntent' },
+    { action: 'observe', labelKey: 'pages.pain.ownerDecisionSubmitObserve' },
+    { action: 'dismiss', labelKey: 'pages.pain.ownerDecisionSubmitDismiss' },
+    { action: 'promote_to_principle', labelKey: 'pages.pain.ownerDecisionSubmitPromoteToPrinciple' },
+    { action: 'promote_to_rulehost', labelKey: 'pages.pain.ownerDecisionSubmitPromoteToRulehost' },
+];
+/**
+ * SPEC §22.1.3 + §24.5: each `source` value has exactly ONE primary action.
+ * - action_drift     → Confirm Drift (primary)
+ * - intent_suspect   → Revise Intent (primary)
+ * - healthy_tension  → Observe (primary)
+ * - none             → (no decision panel rendered — handled by shouldRenderIntentTensionPanel)
+ *
+ * The primary button uses `variant="default"` (the Button component's primary
+ * style: bg-gov text-paper); all others use `variant="outline"`.
+ * This satisfies §24.5 acceptance criterion 4: "primary action 不相同，且每种状态只有一个 primary".
+ */
+const PRIMARY_ACTION_BY_SOURCE = {
+    action_drift: 'confirm_drift',
+    intent_suspect: 'revise_intent',
+    healthy_tension: 'observe',
+};
+/**
+ * OwnerDecisionPanel — renders the Owner decision flow for an intent tension.
+ *
+ * State machine: 'idle' | 'submitting' | 'recorded' | 'error'
+ * - On mount, fetches existing decisions by painId (or taskId fallback).
+ * - Shows 6 action buttons + optional note input.
+ * - On submit, calls buildIntentDecisionPayload + recordIntentDecision.
+ * - Follow-up actions placeholder appears when existingDecisions is non-empty.
+ *
+ * Accessibility (EP-09):
+ * - Uses semantic <section> with aria-label
+ * - Buttons have descriptive text labels
+ */
+function OwnerDecisionPanel({ tension, recordId, painId, taskId, linkedCandidateId, t }) {
+    const [panelState, setPanelState] = useState('idle');
+    const [loadState, setLoadState] = useState('loading');
+    const [existingDecisions, setExistingDecisions] = useState([]);
+    const [note, setNote] = useState('');
+    const [errorMsg, setErrorMsg] = useState(null);
+    // Fetch existing decisions on mount — use painId when available, fall back to taskId.
+    useEffect(() => {
+        let cancelled = false;
+        const loadExisting = async () => {
+            setLoadState('loading');
+            const hasPainId = painId !== undefined && painId.length > 0;
+            const hasTaskId = taskId !== undefined && taskId.length > 0;
+            if (!hasPainId && !hasTaskId) {
+                // Nothing to query by — skip loading, treat as empty.
+                if (!cancelled)
+                    setLoadState('loaded');
+                return;
+            }
+            const result = hasPainId
+                ? await listIntentDecisionsByPainId(painId)
+                : await listIntentDecisionsByTaskId(taskId);
+            if (cancelled)
+                return;
+            if (!result.success) {
+                setLoadState('error');
+                return;
+            }
+            setExistingDecisions(result.data);
+            setLoadState('loaded');
+        };
+        void loadExisting();
+        return () => { cancelled = true; };
+    }, [painId, taskId]);
+    const handleSubmit = async (ownerAction) => {
+        setPanelState('submitting');
+        setErrorMsg(null);
+        // P0 fix (PRI-471): server requires a caller-supplied decision id.
+        // Use crypto.randomUUID() — available in modern browsers and Node 19+.
+        // Fallback to a timestamp-based id if crypto is unavailable (defensive).
+        const decisionId = (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
+            ? crypto.randomUUID()
+            : 'decision-' + Date.now() + '-' + Math.random().toString(36).slice(2, 10);
+        const context = {
+            id: decisionId,
+            recordId,
+            painId,
+            taskId,
+            intentDocHash: tension.intentDocHash,
+        };
+        const payload = buildIntentDecisionPayload(tension, context, { ownerAction, note });
+        const result = await recordIntentDecision(payload);
+        if (!result.success) {
+            setPanelState('error');
+            setErrorMsg(result.error ?? t('pages.pain.ownerDecisionFailed'));
+            return;
+        }
+        setPanelState('recorded');
+        // Add the new decision so follow-up actions appear.
+        setExistingDecisions([result.data.record, ...existingDecisions]);
+    };
+    const hasExisting = existingDecisions.length > 0;
+    const showFollowUp = shouldRenderFollowUpActions(existingDecisions);
+    // PRI-471: the most recent decision drives which follow-up actions are shown.
+    // Decisions are sorted DESC by createdAt (server side), so [0] is the latest.
+    const latestDecision = existingDecisions[0];
+    return (_jsxs("div", { className: "mt-4 pt-3 border-t border-line", children: [_jsx("h5", { className: "text-[13px] font-semibold text-ink mb-1", children: t('pages.pain.ownerDecisionPanelTitle') }), _jsx("p", { className: "text-ink-3 text-[12px] leading-relaxed mb-3", children: t('pages.pain.ownerDecisionPanelSubtitle') }), loadState === 'loading' && (_jsx("p", { className: "text-ink-4 text-[12px] italic", children: t('pages.pain.ownerDecisionLoadingExisting') })), loadState === 'error' && (_jsx("p", { className: "text-amber text-[12px]", children: t('pages.pain.ownerDecisionLoadFailed') })), loadState === 'loaded' && hasExisting && panelState !== 'recorded' && (_jsx("p", { className: "text-ink-3 text-[12px] mb-3 italic", children: t('pages.pain.ownerDecisionExisting') })), panelState === 'recorded' && (_jsx("p", { className: "text-emerald text-[12px] mb-3 font-medium", children: t('pages.pain.ownerDecisionRecorded') })), panelState === 'error' && errorMsg && (_jsxs("p", { className: "text-danger text-[12px] mb-3", children: [t('pages.pain.ownerDecisionFailed'), ": ", errorMsg] })), panelState !== 'recorded' && loadState === 'loaded' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3", children: [_jsx("label", { className: "block font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.ownerDecisionNoteLabel') }), _jsx("input", { type: "text", value: note, onChange: (e) => setNote(e.target.value), placeholder: t('pages.pain.ownerDecisionNotePlaceholder'), disabled: panelState === 'submitting', className: "w-full px-3 py-1.5 text-[13px] bg-surface border border-line rounded-[var(--radius-sm)] text-ink-2 focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: OWNER_ACTION_BUTTONS.map(({ action, labelKey }) => {
+                            // SPEC §22.1.3: the source determines which single button is primary.
+                            const isPrimary = PRIMARY_ACTION_BY_SOURCE[tension.source] === action;
+                            return (_jsx(Button, { variant: isPrimary ? 'default' : 'outline', size: "sm", disabled: panelState === 'submitting', onClick: () => void handleSubmit(action), children: panelState === 'submitting'
+                                    ? t('pages.pain.ownerDecisionSubmitting')
+                                    : t(labelKey) }, action));
+                        }) })] })), showFollowUp && latestDecision && (_jsx(FollowUpActions, { decision: latestDecision, linkedCandidateId: linkedCandidateId, onDecisionUpdated: (updated) => {
+                    // Replace the updated decision in the list (idempotent on id).
+                    setExistingDecisions((prev) => prev.map((d) => (d.id === updated.id ? updated : d)));
+                }, t: t }))] }));
+}
+/**
+ * FollowUpActions — renders the governed follow-up actions available after an
+ * Owner decision has been persisted (SPEC §22.1.4).
+ *
+ * Which actions are shown depends on the decision's `ownerAction`:
+ * - `confirm_drift` → "Link Existing Candidate" (links to the evidence chain's
+ *   linkedCandidateId, or prompts the Owner to enter one if not available).
+ * - `promote_to_rulehost` → "View RuleHost Guidance" (returns CLI command).
+ * - `revise_intent` → "View Intent Patch Proposal" (returns read-only markdown).
+ * - `observe` / `dismiss` → no follow-up actions rendered (SPEC §22.1.4).
+ *
+ * Boundaries respected:
+ * - No new activation channel — `link_candidate` only records an audit link.
+ * - No SkillFileWriter, no auto-modification of INTENT.md — the patch proposal
+ *   is display-only.
+ * - No direct rule creation — `guide_rulehost` only returns CLI guidance.
+ *
+ * Accessibility (EP-09):
+ * - Uses semantic <section> with aria-label
+ * - Buttons have descriptive text labels
+ * - Status messages use role="status" for screen readers
+ */
+function FollowUpActions({ decision, linkedCandidateId, onDecisionUpdated, t }) {
+    const [busyState, setBusyState] = useState('idle');
+    const [errorMsg, setErrorMsg] = useState(null);
+    const [response, setResponse] = useState(null);
+    const [candidateIdInput, setCandidateIdInput] = useState(linkedCandidateId ?? '');
+    const ownerAction = decision.ownerAction;
+    // SPEC §22.1.4: observe and dismiss record decisions without follow-up actions.
+    if (ownerAction === 'observe' || ownerAction === 'dismiss') {
+        return null;
+    }
+    const handleDispatch = async (type) => {
+        setBusyState('dispatching');
+        setErrorMsg(null);
+        setResponse(null);
+        // Trim the candidate id so leading/trailing whitespace never reaches the
+        // audit trail (the disable-check already trims; the payload must match it).
+        // The server re-trims as the trust-boundary authority (EP-01).
+        const payload = type === 'link_candidate'
+            ? { type, candidateId: candidateIdInput.trim() }
+            : { type };
+        const result = await dispatchFollowUp(decision.id, payload);
+        if (!result.success) {
+            setBusyState('error');
+            setErrorMsg(result.error ?? t('pages.pain.followUpDispatchFailed'));
+            return;
+        }
+        setBusyState('dispatched');
+        setResponse(result.data);
+        // For follow-up types that update the record (link_candidate,
+        // generate_patch_proposal), propagate the updated record up so the
+        // parent's existingDecisions list stays in sync.
+        if (result.data.type === 'link_candidate' || result.data.type === 'generate_patch_proposal') {
+            onDecisionUpdated(result.data.record);
+        }
+    };
+    const isDispatching = busyState === 'dispatching';
+    return (_jsxs("div", { className: "mt-4 p-3 bg-paper-2 border border-line rounded-[var(--radius-sm)]", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-2", children: t('pages.pain.followUpActionsTitle') }), ownerAction === 'confirm_drift' && (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed", children: t('pages.pain.followUpLinkCandidateDescription') }), _jsxs("div", { className: "flex gap-2 items-start", children: [_jsx("input", { type: "text", value: candidateIdInput, onChange: (e) => setCandidateIdInput(e.target.value), placeholder: t('pages.pain.followUpCandidateIdPlaceholder'), "aria-label": t('pages.pain.followUpCandidateIdAriaLabel'), disabled: isDispatching, className: "flex-1 px-3 py-1.5 text-[13px] bg-surface border border-line rounded-[var(--radius-sm)] text-ink-2 focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 font-mono" }), _jsx(Button, { variant: "outline", size: "sm", disabled: isDispatching || candidateIdInput.trim() === '', onClick: () => void handleDispatch('link_candidate'), children: isDispatching
+                                    ? t('pages.pain.followUpDispatching')
+                                    : t('pages.pain.followUpLinkCandidateButton') })] }), linkedCandidateId && (_jsx("p", { className: "text-ink-4 text-[11px] italic", children: t('pages.pain.followUpPrefilledFromEvidenceChain') })), busyState === 'dispatched' && response?.type === 'link_candidate' && (_jsxs("p", { role: "status", className: "text-emerald text-[12px] font-medium", children: [t('pages.pain.followUpLinkedSuccess'), ": ", _jsx("span", { className: "font-mono", children: response.linkedCandidateId })] }))] })), ownerAction === 'promote_to_rulehost' && (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed", children: t('pages.pain.followUpGuideRulehostDescription') }), _jsx(Button, { variant: "outline", size: "sm", disabled: isDispatching, onClick: () => void handleDispatch('guide_rulehost'), children: isDispatching
+                            ? t('pages.pain.followUpDispatching')
+                            : t('pages.pain.followUpGuideRulehostButton') }), busyState === 'dispatched' && response?.type === 'guide_rulehost' && (_jsxs("div", { role: "status", className: "mt-2 p-2 bg-surface border border-line rounded-[var(--radius-sm)]", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4 mb-1", children: t('pages.pain.followUpCliCommandLabel') }), _jsx("pre", { className: "font-mono text-[12px] text-ink-2 whitespace-pre-wrap break-all", children: response.cliCommand }), _jsx("p", { className: "text-ink-3 text-[12px] mt-2 leading-relaxed", children: response.note })] }))] })), ownerAction === 'revise_intent' && (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed", children: t('pages.pain.followUpPatchProposalDescription') }), _jsx(Button, { variant: "outline", size: "sm", disabled: isDispatching, onClick: () => void handleDispatch('generate_patch_proposal'), children: isDispatching
+                            ? t('pages.pain.followUpDispatching')
+                            : t('pages.pain.followUpViewPatchProposalButton') }), busyState === 'dispatched' && response?.type === 'generate_patch_proposal' && (_jsxs("div", { role: "status", className: "mt-2 p-2 bg-surface border border-line rounded-[var(--radius-sm)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4", children: t('pages.pain.followUpPatchProposalLabel') }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: t('pages.pain.followUpPatchProposalReadOnlyBadge') })] }), _jsx("pre", { className: "font-mono text-[11px] text-ink-2 whitespace-pre-wrap break-all bg-paper-2 p-2 rounded-[var(--radius-sm)] border border-line max-h-80 overflow-y-auto", children: response.patchProposal.markdown }), _jsx("p", { className: "text-amber text-[11px] mt-2 italic", children: t('pages.pain.followUpPatchProposalWarning') })] }))] })), ownerAction === 'promote_to_principle' && (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed", children: t('pages.pain.followUpPromoteToPrincipleDescription') }), _jsxs("div", { className: "flex gap-2 items-start", children: [_jsx("input", { type: "text", value: candidateIdInput, onChange: (e) => setCandidateIdInput(e.target.value), placeholder: t('pages.pain.followUpCandidateIdPlaceholder'), "aria-label": t('pages.pain.followUpCandidateIdAriaLabel'), disabled: isDispatching, className: "flex-1 px-3 py-1.5 text-[13px] bg-surface border border-line rounded-[var(--radius-sm)] text-ink-2 focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 font-mono" }), _jsx(Button, { variant: "outline", size: "sm", disabled: isDispatching || candidateIdInput.trim() === '', onClick: () => void handleDispatch('link_candidate'), children: isDispatching
+                                    ? t('pages.pain.followUpDispatching')
+                                    : t('pages.pain.followUpLinkCandidateButton') })] }), linkedCandidateId && (_jsx("p", { className: "text-ink-4 text-[11px] italic", children: t('pages.pain.followUpPrefilledFromEvidenceChain') })), busyState === 'dispatched' && response?.type === 'link_candidate' && (_jsxs("p", { role: "status", className: "text-emerald text-[12px] font-medium", children: [t('pages.pain.followUpLinkedSuccess'), ": ", _jsx("span", { className: "font-mono", children: response.linkedCandidateId })] }))] })), busyState === 'error' && errorMsg && (_jsxs("p", { role: "alert", className: "text-danger text-[12px] mt-2", children: [t('pages.pain.followUpDispatchFailed'), ": ", errorMsg] }))] }));
+}