create-principles-disciple 1.95.0 → 1.97.0

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

@@ -0,0 +1,289 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * PRI-477 + spec 2026-06-27: Intent Engineering onboarding components.
+ *
+ * Three components:
+ * 1. OnboardingModal — 5-step wizard (intro → Why → Desired Outcome →
+ *    Non-negotiables → Stop/Escalation → Current Strategic Focus → finish)
+ * 2. IntentEditor — section editor with 5 independent textareas (one per
+ *    section), replacing the single monolithic textarea
+ * 3. CreateIntentButton — creates INTENT.md template, optionally shows wizard
+ *
+ * SPEC §22.1.1 update: Intent Page supports inline editing. This breaks the
+ * original "read-only governance view" constraint, but preserves the
+ * Owner-owned boundary: all edits are triggered by Owner clicking buttons,
+ * never by Agent auto-modification (SPEC §3.9 preserved).
+ *
+ * Architecture note: parseIntentDocSections / assembleIntentDoc are imported
+ * from @principles/core/runtime-v2. These are pure functions (no I/O, no
+ * node:crypto) and safe for the browser bundle. The crypto-dependent
+ * computeIntentContentHash lives in intent-hash.ts to keep intent-doc.ts
+ * browser-bundleable.
+ */
+import { useState, useEffect, useRef, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { createIntentTemplate, saveIntentContent } from "../../api.js";
+import { parseIntentDocSections, assembleIntentDoc, } from "@principles/core/runtime-v2/intent-browser";
+// ── Section step helpers ─────────────────────────────────────────────────────
+const SECTION_STEPS = [1, 2, 3, 4, 5];
+const STEP_TO_KEY = {
+    1: "why",
+    2: "desiredOutcome",
+    3: "nonNegotiables",
+    4: "stopEscalation",
+    5: "currentStrategicFocus",
+};
+// ── localStorage key for onboarding dismissal ─────────────────────────────────
+const ONBOARDING_DISMISSED_KEY = "pd_intent_onboarding_dismissed";
+function isOnboardingDismissed() {
+    try {
+        return localStorage.getItem(ONBOARDING_DISMISSED_KEY) === "true";
+    }
+    catch {
+        return false;
+    }
+}
+function setOnboardingDismissed() {
+    try {
+        localStorage.setItem(ONBOARDING_DISMISSED_KEY, "true");
+    }
+    catch {
+        // ignore localStorage errors
+    }
+}
+export function OnboardingModal({ onComplete, onSkip, onClose }) {
+    const { t } = useTranslation();
+    const [step, setStep] = useState("intro");
+    const [sections, setSections] = useState({});
+    const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+    const textareaRef = useRef(null);
+    // Focus textarea when entering a section step
+    useEffect(() => {
+        if (typeof step === "number") {
+            textareaRef.current?.focus();
+        }
+    }, [step]);
+    const hasContent = useMemo(() => Object.values(sections).some((v) => typeof v === "string" && v.trim().length > 0), [sections]);
+    function handleRequestClose() {
+        if (hasContent) {
+            setShowDiscardConfirm(true);
+        }
+        else {
+            onClose();
+        }
+    }
+    function handleNext() {
+        if (step === "intro") {
+            setStep(1);
+            return;
+        }
+        if (typeof step === "number" && step < 5) {
+            setStep((step + 1));
+            return;
+        }
+        if (step === 5) {
+            setStep("finish");
+        }
+    }
+    function handlePrev() {
+        if (typeof step === "number" && step > 1) {
+            setStep((step - 1));
+            return;
+        }
+        if (step === 1) {
+            setStep("intro");
+        }
+    }
+    function handleSectionChange(value) {
+        if (typeof step !== "number")
+            return;
+        const key = STEP_TO_KEY[step];
+        setSections((prev) => ({ ...prev, [key]: value }));
+    }
+    const currentSectionValue = typeof step === "number" ? (sections[STEP_TO_KEY[step]] ?? "") : "";
+    const isCurrentSectionEmpty = typeof step === "number" && currentSectionValue.trim().length === 0;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-ink/40 backdrop-blur-sm animate-[pdFadeIn_200ms_ease-out]", role: "dialog", "aria-modal": "true", "aria-labelledby": "onboarding-title", onClick: handleRequestClose, children: _jsxs("div", { className: "bg-surface border border-line rounded-[8px] p-6 max-w-[620px] w-full mx-4 max-h-[85vh] overflow-y-auto", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-start justify-between mb-4", children: [_jsxs("div", { children: [_jsx("h2", { id: "onboarding-title", className: "text-[20px] font-semibold tracking-tight text-ink mb-1", children: t("pages.intent.onboarding.title") }), step === "intro" && (_jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed", children: t("pages.intent.onboarding.subtitle") })), typeof step === "number" && (_jsx("p", { className: "text-ink-3 text-[12px] font-mono", children: t("pages.intent.wizard.progressLabel", { current: step }) }))] }), _jsx("button", { type: "button", onClick: handleRequestClose, className: "shrink-0 ml-3 text-ink-3 hover:text-ink transition-colors", "aria-label": t("pages.intent.onboarding.close"), children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 4L14 14M14 4L4 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] }), step === "intro" && (_jsxs("div", { className: "mb-5", children: [_jsxs("div", { className: "mb-5", children: [_jsx("h3", { className: "text-[14px] font-semibold text-ink mb-1.5", children: t("pages.intent.onboarding.whatIsIt.title") }), _jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed", children: t("pages.intent.onboarding.whatIsIt.description") })] }), _jsxs("div", { className: "mb-5", children: [_jsx("h3", { className: "text-[14px] font-semibold text-ink mb-1.5", children: t("pages.intent.onboarding.whyYouFill.title") }), _jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed", children: t("pages.intent.onboarding.whyYouFill.description") })] }), _jsxs("div", { className: "mb-5", children: [_jsx("h3", { className: "text-[14px] font-semibold text-ink mb-1.5", children: t("pages.intent.onboarding.sectionGuide.title") }), _jsx("p", { className: "text-ink-3 text-[12px] leading-relaxed mb-2", children: t("pages.intent.onboarding.sectionGuide.description") }), _jsx("ul", { className: "space-y-1.5", children: SECTION_STEPS.map((s) => {
+                                        const key = STEP_TO_KEY[s];
+                                        return (_jsxs("li", { className: "text-ink-2 text-[13px] leading-relaxed", children: [_jsx("span", { className: "font-mono text-gov", children: "\u2022" }), " ", t(`pages.intent.wizard.stepLabels.${key}`)] }, s));
+                                    }) })] })] })), typeof step === "number" && (_jsxs("div", { className: "mb-5", children: [_jsx("h3", { className: "text-[15px] font-semibold text-ink mb-1.5", children: t(`pages.intent.wizard.stepLabels.${STEP_TO_KEY[step]}`) }), _jsx("p", { className: "text-ink-3 text-[12px] leading-relaxed mb-3", children: t(`pages.intent.wizard.guidance.${STEP_TO_KEY[step]}`) }), _jsx("textarea", { ref: textareaRef, value: currentSectionValue, onChange: (e) => handleSectionChange(e.target.value), placeholder: t(`pages.intent.wizard.guidance.${STEP_TO_KEY[step]}`), className: "w-full h-[180px] bg-surface border border-line rounded-[4px] p-3 text-[13px] text-ink leading-relaxed resize-y focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov/30", spellCheck: false, "aria-label": t(`pages.intent.wizard.stepLabels.${STEP_TO_KEY[step]}`) }), isCurrentSectionEmpty && (_jsx("p", { className: "text-amber text-[12px] mt-1.5", role: "alert", children: t("pages.intent.wizard.emptyWarning") }))] })), step === "finish" && (_jsxs("div", { className: "mb-5", children: [_jsx("h3", { className: "text-[15px] font-semibold text-ink mb-3", children: t("pages.intent.wizard.finish") }), _jsx("div", { className: "space-y-3", children: SECTION_STEPS.map((s) => {
+                                const key = STEP_TO_KEY[s];
+                                const value = sections[key] ?? "";
+                                return (_jsxs("div", { className: "border-l-2 border-gov/40 pl-3", children: [_jsx("p", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-0.5", children: t(`pages.intent.wizard.stepLabels.${key}`) }), _jsx("p", { className: "text-ink-2 text-[13px] leading-relaxed whitespace-pre-wrap", children: value || t("pages.intent.wizard.emptyWarning") })] }, s));
+                            }) })] })), _jsxs("div", { className: "flex items-center justify-between gap-2 pt-3 border-t border-line", children: [_jsxs("div", { children: [step === "intro" && (_jsx("button", { type: "button", onClick: onSkip, className: "border border-line bg-surface text-ink-2 rounded-[4px] px-4 py-2 text-[13px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.intent.onboarding.skipOption") })), typeof step === "number" && (_jsx("button", { type: "button", onClick: handlePrev, className: "border border-line bg-surface text-ink-2 rounded-[4px] px-4 py-2 text-[13px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.intent.wizard.prev") }))] }), _jsxs("div", { children: [step === "intro" && (_jsx("button", { type: "button", onClick: handleNext, className: "bg-gov text-paper rounded-[4px] px-4 py-2 text-[13px] font-medium hover:bg-gov-dark transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.intent.onboarding.startFilling") })), typeof step === "number" && step < 5 && (_jsx("button", { type: "button", onClick: handleNext, disabled: isCurrentSectionEmpty, className: "bg-gov text-paper rounded-[4px] px-4 py-2 text-[13px] font-medium hover:bg-gov-dark transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", children: t("pages.intent.wizard.next") })), step === 5 && (_jsx("button", { type: "button", onClick: handleNext, disabled: isCurrentSectionEmpty, className: "bg-gov text-paper rounded-[4px] px-4 py-2 text-[13px] font-medium hover:bg-gov-dark transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", children: t("pages.intent.wizard.review") })), step === "finish" && (_jsx("button", { type: "button", onClick: () => onComplete(sections), className: "bg-gov text-paper rounded-[4px] px-4 py-2 text-[13px] font-medium hover:bg-gov-dark transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.intent.wizard.complete") }))] })] }), showDiscardConfirm && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-ink/40 backdrop-blur-sm", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "discard-title", onClick: () => setShowDiscardConfirm(false), children: _jsxs("div", { className: "bg-surface border border-line rounded-[8px] p-5 max-w-[400px] w-full mx-4", onClick: (e) => e.stopPropagation(), children: [_jsx("p", { id: "discard-title", className: "text-ink text-[14px] font-semibold mb-2", children: t("pages.intent.wizard.discardConfirmTitle") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-4", children: t("pages.intent.wizard.discardConfirmBody") }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", onClick: () => setShowDiscardConfirm(false), className: "border border-line bg-surface text-ink-2 rounded-[4px] px-3 py-1.5 text-[12px] hover:border-line-2 transition-colors", children: t("pages.intent.wizard.discardConfirmCancel") }), _jsx("button", { type: "button", onClick: () => {
+                                            setShowDiscardConfirm(false);
+                                            onClose();
+                                        }, className: "bg-red-600 text-white rounded-[4px] px-3 py-1.5 text-[12px] hover:bg-red-700 transition-colors", children: t("pages.intent.wizard.discardConfirmConfirm") })] })] }) }))] }) }));
+}
+export function IntentEditor({ initialContent, onSaved, onCancel, lang }) {
+    const { t } = useTranslation();
+    // Parse initial content into 5 sections on mount. parseIntentDocSections
+    // returns undefined for missing sections; we normalize to empty string for
+    // textarea value binding (controlled input requires a string value).
+    const [sections, setSections] = useState(() => {
+        const parsed = parseIntentDocSections(initialContent);
+        return {
+            why: parsed.why ?? "",
+            desiredOutcome: parsed.desiredOutcome ?? "",
+            nonNegotiables: parsed.nonNegotiables ?? "",
+            stopEscalation: parsed.stopEscalation ?? "",
+            currentStrategicFocus: parsed.currentStrategicFocus ?? "",
+        };
+    });
+    const [saving, setSaving] = useState(false);
+    const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+    const firstTextareaRef = useRef(null);
+    // Focus the first textarea on mount
+    useEffect(() => {
+        firstTextareaRef.current?.focus();
+    }, []);
+    // Detect changes by comparing current sections to initial parsed sections.
+    // We re-parse initialContent on each render (cheap, pure function) rather
+    // than storing a second state variable — avoids stale closure issues.
+    const initialSections = useMemo(() => parseIntentDocSections(initialContent), [initialContent]);
+    const hasChanges = useMemo(() => {
+        for (const step of SECTION_STEPS) {
+            const key = STEP_TO_KEY[step];
+            const current = sections[key] ?? "";
+            const initial = initialSections[key] ?? "";
+            if (current !== initial)
+                return true;
+        }
+        return false;
+    }, [sections, initialSections]);
+    function handleSectionChange(key, value) {
+        setSections((prev) => ({ ...prev, [key]: value }));
+    }
+    async function handleSave() {
+        if (!hasChanges || saving)
+            return;
+        // Client-side validation: require at least one non-empty section.
+        // Empty individual sections are allowed (user may clear a section
+        // intentionally); the server emits warnings, not errors, for empty
+        // sections.
+        const allEmpty = SECTION_STEPS.every((s) => {
+            const key = STEP_TO_KEY[s];
+            return (sections[key] ?? "").trim().length === 0;
+        });
+        if (allEmpty) {
+            toast.error(t("pages.intent.editor.emptyContent"));
+            return;
+        }
+        const assembled = assembleIntentDoc(sections);
+        setSaving(true);
+        const result = await saveIntentContent(assembled, lang);
+        setSaving(false);
+        if (!result.success) {
+            // Branch on structured reason field, NOT substring matching (PR-1083 N4).
+            if (result.reason === "oversized") {
+                toast.error(t("pages.intent.editor.oversized"));
+            }
+            else {
+                toast.error(t("pages.intent.editor.saveFailed"));
+            }
+            return;
+        }
+        toast.success(t("pages.intent.editor.saveSuccess"));
+        onSaved();
+    }
+    function handleCancel() {
+        if (hasChanges) {
+            setShowDiscardConfirm(true);
+        }
+        else {
+            onCancel();
+        }
+    }
+    return (_jsxs("div", { className: "bg-panel border border-line rounded-[6px] p-5", children: [_jsx("div", { className: "flex items-center justify-between mb-4", children: _jsxs("div", { children: [_jsx("h3", { id: "section-editor", className: "text-[15px] font-semibold text-ink mb-0.5", children: t("pages.intent.editor.title") }), _jsx("p", { className: "text-ink-3 text-[12px] leading-relaxed", children: t("pages.intent.editor.description") })] }) }), _jsx("div", { className: "space-y-4", children: SECTION_STEPS.map((step, idx) => {
+                    const key = STEP_TO_KEY[step];
+                    const value = sections[key] ?? "";
+                    return (_jsxs("div", { children: [_jsx("label", { htmlFor: `intent-section-${key}`, className: "block font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-1", children: t(`pages.intent.wizard.stepLabels.${key}`) }), _jsx("p", { className: "text-ink-3 text-[12px] leading-relaxed mb-1.5", children: t(`pages.intent.wizard.guidance.${key}`) }), _jsx("textarea", { ref: idx === 0 ? firstTextareaRef : undefined, id: `intent-section-${key}`, value: value, onChange: (e) => handleSectionChange(key, e.target.value), className: "w-full h-[120px] bg-surface border border-line rounded-[4px] p-3 text-[13px] text-ink leading-relaxed resize-y focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov/30", spellCheck: false, "aria-label": t(`pages.intent.wizard.stepLabels.${key}`) })] }, step));
+                }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 mt-4", children: [_jsx("button", { type: "button", onClick: handleCancel, disabled: saving, className: "border border-line bg-surface text-ink-2 rounded-[4px] px-4 py-2 text-[13px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", children: t("pages.intent.editor.cancel") }), _jsx("button", { type: "button", onClick: handleSave, disabled: !hasChanges || saving, className: "bg-gov text-paper rounded-[4px] px-4 py-2 text-[13px] font-medium hover:bg-gov-dark transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", children: saving ? t("pages.intent.editor.saving") : t("pages.intent.editor.save") })] }), showDiscardConfirm && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-ink/40 backdrop-blur-sm", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "discard-title", onClick: () => setShowDiscardConfirm(false), children: _jsxs("div", { className: "bg-surface border border-line rounded-[8px] p-5 max-w-[400px] w-full mx-4", onClick: (e) => e.stopPropagation(), children: [_jsx("p", { id: "discard-title", className: "text-ink text-[14px] mb-4", children: t("pages.intent.editor.confirmDiscard") }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", onClick: () => setShowDiscardConfirm(false), className: "border border-line bg-surface text-ink-2 rounded-[4px] px-3 py-1.5 text-[12px] hover:border-line-2 transition-colors", children: t("pages.intent.editor.no") }), _jsx("button", { type: "button", onClick: () => {
+                                        setShowDiscardConfirm(false);
+                                        onCancel();
+                                    }, className: "bg-red-600 text-white rounded-[4px] px-3 py-1.5 text-[12px] hover:bg-red-700 transition-colors", children: t("pages.intent.editor.yes") })] })] }) }))] }));
+}
+export function CreateIntentButton({ onCreated, showOnboarding = false, lang }) {
+    const { t } = useTranslation();
+    const [busy, setBusy] = useState(false);
+    const [showOnboardingModal, setShowOnboardingModal] = useState(showOnboarding && !isOnboardingDismissed());
+    // Create template + save assembled content from wizard.
+    // Called when user completes all 5 wizard steps.
+    async function createFromWizard(sections) {
+        setBusy(true);
+        // Step 1: create template (idempotent — ensures file exists)
+        const createResult = await createIntentTemplate(false, lang);
+        if (!createResult.success) {
+            setBusy(false);
+            toast.error(t("pages.intent.notFound.createFailed"));
+            return;
+        }
+        // Step 2: save the assembled content (overwrites template defaults)
+        const assembled = assembleIntentDoc(sections);
+        const saveResult = await saveIntentContent(assembled, lang);
+        setBusy(false);
+        if (!saveResult.success) {
+            // Template was created but wizard content failed to save.
+            // The file exists (template), so refresh summary; show error so the
+            // user knows to edit manually. This is NOT a silent fallback (rc-9).
+            if (saveResult.reason === "oversized") {
+                toast.error(t("pages.intent.editor.oversized"));
+            }
+            else {
+                toast.error(t("pages.intent.editor.saveFailed"));
+            }
+            onCreated(true); // open editor so user can retry / inspect
+            return;
+        }
+        toast.success(t("pages.intent.notFound.createSuccess"));
+        onCreated(false); // wizard already filled content — no need to open editor
+    }
+    // Create empty template. Returns true on success so the caller can decide
+    // whether to open the editor (legacy path) or just refresh (skip path).
+    // Does NOT call onCreated itself — avoids double-callback bug.
+    async function createEmptyTemplate() {
+        setBusy(true);
+        const result = await createIntentTemplate(false, lang);
+        setBusy(false);
+        if (!result.success) {
+            toast.error(t("pages.intent.notFound.createFailed"));
+            return false;
+        }
+        toast.success(t("pages.intent.notFound.createSuccess"));
+        return true;
+    }
+    function handleComplete(sections) {
+        setShowOnboardingModal(false);
+        setOnboardingDismissed();
+        void createFromWizard(sections);
+    }
+    function handleSkip() {
+        setShowOnboardingModal(false);
+        setOnboardingDismissed();
+        void createEmptyTemplate().then((ok) => {
+            if (ok)
+                onCreated(false);
+        });
+    }
+    function handleClose() {
+        setShowOnboardingModal(false);
+    }
+    function handleClick() {
+        if (showOnboarding && !isOnboardingDismissed()) {
+            setShowOnboardingModal(true);
+        }
+        else {
+            // Legacy direct-create path (onboarding already dismissed or not enabled):
+            // create template then open editor so user can fill content manually.
+            void createEmptyTemplate().then((ok) => {
+                if (ok)
+                    onCreated(true);
+            });
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleClick, disabled: busy, className: "bg-gov text-paper rounded-[4px] px-4 py-2 text-[13px] font-medium hover:bg-gov-dark transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", children: busy ? t("pages.intent.notFound.creating") : t("pages.intent.notFound.createButton") }), showOnboardingModal && (_jsx(OnboardingModal, { onComplete: handleComplete, onSkip: handleSkip, onClose: handleClose }))] }));
+}
+export function EditButton({ onClick, loading = false }) {
+    const { t } = useTranslation();
+    return (_jsx("button", { type: "button", onClick: onClick, disabled: loading, "aria-busy": loading, className: "border border-line bg-surface text-ink-2 rounded-[4px] px-3 py-1.5 text-[12px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-line", children: loading ? t("common.loading") : t("pages.intent.editor.edit") }));
+}

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

@@ -5,7 +5,9 @@ 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 } from "../../api.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();
@@ -54,9 +56,9 @@ function FlagToggleCard({ flagEnabled, onAfterEnable }) {
                     }
                 }, 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() {
+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") }), _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.notFound.nextAction") })] }));
+    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();
@@ -77,6 +79,34 @@ function SectionContent({ label, 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 = [
@@ -116,10 +146,27 @@ export function IntentPage() {
     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();
+        const result = await fetchIntentSummary(lang);
         if (!result.success) {
             // ERR-002: graceful degradation with reason
             setErrorMsg(result.error ?? t("pages.intent.loadError"));
@@ -129,10 +176,68 @@ export function IntentPage() {
         // result.data is already validated by validateIntentSummary in the API layer
         setData(result.data);
         setPageState("loaded");
-    }, [t]);
+        // 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") }) }));
@@ -143,5 +248,11 @@ export function IntentPage() {
     }
     // ── 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 }))] }), _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, {})), summary && summary.flagEnabled && summary.found && summary.reason === "oversized" && (_jsx(OversizedBanner, {})), summary && summary.flagEnabled && summary.ok && summary.sections && (_jsxs(_Fragment, { children: [_jsxs("section", { "aria-labelledby": "section-content", children: [_jsx(SectionTitle, { id: "section-content", children: t("pages.intent.title") }), _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, {}))] }) }));
+    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/utils/agent-metadata.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Agent Metadata — Control Center agent grouping & role descriptions
+ *
+ * Pure data module (no React, no I/O). Defines:
+ * - Which dependency cluster each of the 9 internal agents belongs to
+ * - Bilingual role / detail / impact / tech-detail text for progressive disclosure
+ * - Whether toggling the agent off requires inline confirmation (isCore)
+ *
+ * Content source: design-prototype/control-center.html (approved prototype).
+ * Agent names match INTERNAL_AGENT_NAMES from @principles/core (camelCase).
+ *
+ * ERR entries:
+ * - rc-1: pure static data, no untrusted input
+ * - rc-2: no `as` bypasses
+ * - rc-5: consumers use Object.hasOwn() to look up metadata by agent name
+ */
+import type { InternalAgentName } from '@principles/core/runtime-v2';
+export type AgentGroup = 'core_trio' | 'code_chain' | 'quality_polish' | 'sidechain';
+export type ImpactLevel = 'danger' | 'amber' | 'green';
+export type GroupTag = 'must' | 'recommend' | 'optional' | 'independent';
+export interface AgentMeta {
+    name: InternalAgentName;
+    group: AgentGroup;
+    /** 中文角色名（如"诊断师"） */
+    displayNameZh: string;
+    displayNameEn: string;
+    /** 一句话角色（L1 折叠态显示） */
+    roleZh: string;
+    roleEn: string;
+    /** 展开后的详细说明（L2），段落用 \n\n 分隔 */
+    detailZh: string;
+    detailEn: string;
+    /** 关掉会怎样（L2 impact box） */
+    impactLevel: ImpactLevel;
+    impactZh: string;
+    impactEn: string;
+    /** 技术细节（L3 嵌套折叠）— 键为标签，值可含反引号包裹的 code 片段 */
+    techDetailZh: Record<string, string>;
+    techDetailEn: Record<string, string>;
+    /** 是否核心代理（关掉需 inline confirm）。true 对应原型 data-core="true" */
+    isCore: boolean;
+    /** MVP 状态说明（可选，仅 philosopher/rolloutReviewer 有） */
+    mvpNoteZh?: string;
+    mvpNoteEn?: string;
+}
+export interface AgentGroupMeta {
+    id: AgentGroup;
+    labelZh: string;
+    labelEn: string;
+    tag: GroupTag;
+    tagLabelZh: string;
+    tagLabelEn: string;
+    hintZh: string;
+    hintEn: string;
+}
+export declare const GROUP_ORDER: AgentGroup[];
+export declare const AGENT_GROUPS: AgentGroupMeta[];
+export declare const AGENT_METADATA: Record<InternalAgentName, AgentMeta>;