create-principles-disciple 1.82.0 → 1.83.0

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

@@ -0,0 +1,245 @@
+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 { SectionTitle } from "../../components/layout/section-title.js";
+import { createFeedbackReport, listFeedbackReports, getFeedbackReport, deleteFeedbackReport, } from "../../api.js";
+import { parseDraftRecord, parseDraftSummary, parseEnvelopeReport, getErrorMessage, } from "../ReportProblemValidators.js";
+const INITIAL_FORM = {
+    type: "bug",
+    severity: undefined,
+    title: "",
+    description: "",
+    stepsToReproduce: "",
+    expectedBehavior: "",
+    actualBehavior: "",
+    submitting: false,
+};
+const FEEDBACK_TYPES = ["bug", "confusing", "privacy_concern", "feature_request", "other"];
+const SEVERITY_OPTIONS = ["low", "medium", "high"];
+const VALID_FEEDBACK_TYPES = new Set(FEEDBACK_TYPES);
+const VALID_SEVERITY_OPTIONS = new Set(SEVERITY_OPTIONS);
+// ── Runtime validator for drafts list envelope (H section / ERR-001/005/009) ─
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function validateDraftsList(raw) {
+    if (!isRecord(raw)) {
+        return { ok: false, reason: "Drafts list response is not an object" };
+    }
+    if (!Object.hasOwn(raw, "drafts")) {
+        return { ok: false, reason: "Drafts list response missing 'drafts' field" };
+    }
+    if (!Array.isArray(raw.drafts)) {
+        return { ok: false, reason: "Drafts list 'drafts' field is not an array" };
+    }
+    const result = [];
+    for (const item of raw.drafts) {
+        const parsed = parseDraftSummary(item);
+        if (parsed !== null) {
+            result.push(parsed);
+        }
+    }
+    return { ok: true, drafts: result };
+}
+// ── Sub-components ────────────────────────────────────────────────────────────
+function NoAutoUploadBanner() {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex items-center gap-2 px-4 py-3 bg-gov/8 border border-gov/20 rounded-[6px] mb-6", children: [_jsx("svg", { className: "shrink-0 w-4 h-4 text-gov", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }), _jsx("span", { className: "text-ink text-sm font-medium", children: t("pages.reportProblem.noAutoUpload") })] }));
+}
+function PrivacySection({ draft }) {
+    const { t } = useTranslation();
+    if (draft === null) {
+        return (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-privacy", children: [_jsx(SectionTitle, { id: "section-privacy", children: t("pages.reportProblem.privacy.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed", children: t("pages.reportProblem.privacy.submitFirst") }), _jsx(NoAutoUploadBanner, {})] }));
+    }
+    return (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-privacy", children: [_jsx(SectionTitle, { id: "section-privacy", children: t("pages.reportProblem.privacy.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-4", children: t("pages.reportProblem.privacy.description") }), _jsxs("div", { className: "bg-panel border border-line rounded-[6px] p-4 space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-2", children: t("pages.reportProblem.privacy.included") }), draft.privacy.includedSections.length > 0 ? (_jsx("ul", { className: "space-y-1", children: draft.privacy.includedSections.map((section, i) => (_jsxs("li", { className: "flex items-center gap-2 text-ink-2 text-[13px]", children: [_jsx("span", { className: "text-green-600", "aria-hidden": "true", children: "\u2713" }), section] }, i))) })) : (_jsx("p", { className: "text-ink-4 text-[13px]", children: "\u2014" }))] }), _jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-2", children: t("pages.reportProblem.privacy.excluded") }), draft.privacy.excludedByDefault.length > 0 ? (_jsx("ul", { className: "space-y-1", children: draft.privacy.excludedByDefault.map((section, i) => (_jsxs("li", { className: "flex items-center gap-2 text-ink-2 text-[13px]", children: [_jsx("span", { className: "text-red-500", "aria-hidden": "true", children: "\u2717" }), section] }, i))) })) : (_jsx("p", { className: "text-ink-4 text-[13px]", children: "\u2014" }))] }), draft.privacy.redactionNotes.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-2", children: t("pages.reportProblem.privacy.notes") }), _jsx("ul", { className: "space-y-1", children: draft.privacy.redactionNotes.map((note, i) => (_jsxs("li", { className: "text-ink-2 text-[13px]", children: ["\u2022 ", note] }, i))) })] }))] }), _jsx(NoAutoUploadBanner, {})] }));
+}
+function DraftCard({ draft, onCopyMarkdown, onCopyEmail, onOpenGithub, onDelete }) {
+    const { t } = useTranslation();
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    return (_jsxs("article", { className: "bg-panel border border-line rounded-[6px] p-4", children: [_jsx("div", { className: "font-mono text-[11px] text-ink-3 mb-2", children: t("pages.reportProblem.draft.savedAt", { id: draft.id, at: draft.createdAt }) }), _jsx("div", { className: "font-semibold text-ink mb-3", children: draft.title }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { type: "button", onClick: onCopyMarkdown, className: "border border-line bg-surface text-ink rounded-[3px] px-[12px] py-[5px] text-[12px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.reportProblem.draft.copyMarkdown") }), _jsx("button", { type: "button", onClick: onCopyEmail, className: "border border-line bg-surface text-ink rounded-[3px] px-[12px] py-[5px] text-[12px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.reportProblem.draft.copyEmail") }), draft.outputs.githubIssueUrl && (_jsx("button", { type: "button", onClick: onOpenGithub, className: "border border-line bg-surface text-ink rounded-[3px] px-[12px] py-[5px] text-[12px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.reportProblem.draft.openGithub") })), !confirmDelete ? (_jsx("button", { type: "button", onClick: () => setConfirmDelete(true), className: "border border-red-200 text-red-600 rounded-[3px] px-[12px] py-[5px] text-[12px] hover:bg-red-50 transition-colors focus-visible:outline-2 focus-visible:outline-red-400 focus-visible:outline-offset-2", children: t("pages.reportProblem.draft.delete") })) : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: onDelete, className: "border border-red-400 bg-red-600 text-white rounded-[3px] px-[12px] py-[5px] text-[12px] hover:bg-red-700 transition-colors focus-visible:outline-2 focus-visible:outline-red-400 focus-visible:outline-offset-2", children: [t("pages.reportProblem.draft.delete"), "?"] }), _jsx("button", { type: "button", onClick: () => setConfirmDelete(false), className: "border border-line bg-surface text-ink rounded-[3px] px-[12px] py-[5px] text-[12px] hover:border-line-2 transition-colors", children: "\u00D7" })] }))] })] }));
+}
+function SavedDraftsSection({ drafts, onLoad, onDelete }) {
+    const { t } = useTranslation();
+    return (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-saved", children: [_jsx(SectionTitle, { id: "section-saved", children: t("pages.reportProblem.saved.title") }), drafts.length === 0 ? (_jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed py-2", children: "\u2014" })) : (_jsx("div", { className: "space-y-3", children: drafts.map((draft) => (_jsxs("article", { className: "bg-panel border border-line rounded-[6px] px-4 py-3 flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "font-mono text-[11px] text-ink-3 mb-1", children: [draft.type, " \u00B7 ", draft.createdAt] }), _jsx("div", { className: "text-ink text-sm truncate", children: draft.title })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx("button", { type: "button", onClick: () => onLoad(draft.id), className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.reportProblem.saved.load") }), _jsx("button", { type: "button", onClick: () => onDelete(draft.id), className: "border border-red-200 text-red-600 rounded-[3px] px-[10px] py-[6px] text-[12px] hover:bg-red-50 transition-colors focus-visible:outline-2 focus-visible:outline-red-400 focus-visible:outline-offset-2", children: t("pages.reportProblem.draft.delete") })] })] }, draft.id))) }))] }));
+}
+export function ReportProblemPage() {
+    const { t } = useTranslation();
+    const [form, setForm] = useState(INITIAL_FORM);
+    const [drafts, setDrafts] = useState([]);
+    const [currentDraft, setCurrentDraft] = useState(null);
+    const [loadingState, setLoadingState] = useState("loading");
+    const [loadError, setLoadError] = useState(null);
+    const [showPreview, setShowPreview] = useState(false);
+    // ── Load drafts on mount ─────────────────────────────────────────────────
+    const loadDrafts = useCallback(async () => {
+        const result = await listFeedbackReports();
+        if (!result.success) {
+            // ERR-002: graceful degradation with reason
+            setLoadError(result.error ?? "Failed to load drafts");
+            setLoadingState("loaded");
+            return;
+        }
+        const validated = validateDraftsList(result.data);
+        if (!validated.ok) {
+            setLoadError(validated.reason);
+            setDrafts([]);
+            setLoadingState("loaded");
+            return;
+        }
+        setDrafts(validated.drafts);
+        setLoadError(null);
+        setLoadingState("loaded");
+    }, []);
+    useEffect(() => {
+        loadDrafts();
+    }, [loadDrafts]);
+    // ── Form handlers ────────────────────────────────────────────────────────
+    const handleFieldChange = useCallback((field, value) => {
+        setForm((prev) => ({ ...prev, [field]: value }));
+    }, []);
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        if (!form.title.trim() || !form.description.trim()) {
+            toast.error(t("pages.reportProblem.errors.missingRequired"));
+            return;
+        }
+        setForm((prev) => ({ ...prev, submitting: true }));
+        try {
+            const input = {
+                type: form.type,
+                title: form.title.trim(),
+                description: form.description.trim(),
+                stepsToReproduce: form.stepsToReproduce.trim() || undefined,
+                expectedBehavior: form.expectedBehavior.trim() || undefined,
+                actualBehavior: form.actualBehavior.trim() || undefined,
+                severity: form.severity,
+            };
+            const result = await createFeedbackReport(input, undefined);
+            if (!result.success) {
+                toast.error(getErrorMessage(result, t("pages.reportProblem.errors.createFailed")));
+                setForm((prev) => ({ ...prev, submitting: false }));
+                return;
+            }
+            // Validate response with parseEnvelopeReport (ERR-001/005/009)
+            const parsed = parseEnvelopeReport(result.data);
+            if (parsed === null) {
+                // Try parseDraftRecord directly as fallback — no `as` cast (ERR-001/005)
+                let directParsed = null;
+                if (isRecord(result.data) && Object.hasOwn(result.data, "report")) {
+                    const reportValue = result.data["report"];
+                    directParsed = parseDraftRecord(reportValue);
+                }
+                else {
+                    directParsed = parseDraftRecord(result.data);
+                }
+                if (directParsed === null) {
+                    toast.error(t("pages.reportProblem.errors.createFailed"));
+                    setForm((prev) => ({ ...prev, submitting: false }));
+                    return;
+                }
+                setCurrentDraft(directParsed);
+            }
+            else {
+                setCurrentDraft(parsed);
+            }
+            toast.success(t("pages.reportProblem.toast.draftCreated"));
+            // Reset form
+            setForm(INITIAL_FORM);
+            setShowPreview(false);
+            // Reload drafts list
+            await loadDrafts();
+        }
+        catch {
+            toast.error(t("pages.reportProblem.errors.createFailed"));
+        }
+        finally {
+            setForm((prev) => ({ ...prev, submitting: false }));
+        }
+    }, [form, t, loadDrafts]);
+    // ── Draft actions ────────────────────────────────────────────────────────
+    const handleLoadDraft = useCallback(async (id) => {
+        const result = await getFeedbackReport(id);
+        if (!result.success) {
+            toast.error(t("pages.reportProblem.toast.loadFailed"));
+            return;
+        }
+        const parsed = parseEnvelopeReport(result.data);
+        if (parsed === null) {
+            toast.error(t("pages.reportProblem.toast.loadFailed"));
+            return;
+        }
+        setCurrentDraft(parsed);
+        setForm({
+            type: parsed.type,
+            severity: parsed.userText.userSeverity,
+            title: parsed.title,
+            description: parsed.userText.description,
+            stepsToReproduce: parsed.userText.stepsToReproduce ?? "",
+            expectedBehavior: parsed.userText.expectedBehavior ?? "",
+            actualBehavior: parsed.userText.actualBehavior ?? "",
+            submitting: false,
+        });
+    }, [t]);
+    const handleCopyMarkdown = useCallback(async (draft) => {
+        try {
+            await navigator.clipboard.writeText(draft.outputs.markdown);
+            toast.success(t("pages.reportProblem.toast.markdownCopied"));
+        }
+        catch {
+            toast.error(t("pages.reportProblem.toast.copyFailed"));
+        }
+    }, [t]);
+    const handleCopyEmail = useCallback(async (draft) => {
+        try {
+            await navigator.clipboard.writeText(draft.outputs.emailText);
+            toast.success(t("pages.reportProblem.toast.emailCopied"));
+        }
+        catch {
+            toast.error(t("pages.reportProblem.toast.copyFailed"));
+        }
+    }, [t]);
+    const handleOpenGithub = useCallback((draft) => {
+        if (draft.outputs.githubIssueUrl) {
+            window.open(draft.outputs.githubIssueUrl, "_blank");
+        }
+    }, []);
+    const handleDeleteDraft = useCallback(async (id) => {
+        const result = await deleteFeedbackReport(id);
+        if (!result.success) {
+            toast.error(t("pages.reportProblem.toast.deleteFailed"));
+            return;
+        }
+        toast.success(t("pages.reportProblem.toast.draftDeleted"));
+        setDrafts((prev) => prev.filter((d) => d.id !== id));
+        if (currentDraft?.id === id) {
+            setCurrentDraft(null);
+        }
+    }, [t, currentDraft]);
+    // ── Loading state ────────────────────────────────────────────────────────
+    if (loadingState === "loading") {
+        return (_jsx(PageShell, { children: _jsxs("div", { className: "text-ink-3 text-sm", role: "status", "aria-live": "polite", children: [t("common.loading"), "\u2026"] }) }));
+    }
+    // ── Error state (ERR-002: degradation with reason) ───────────────────────
+    if (loadingState === "error") {
+        return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.reportProblem.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.reportProblem.title") }), _jsxs("div", { className: "mt-6 p-4 bg-panel border border-line rounded-[6px] text-ink-2 text-sm", children: [_jsx("p", { children: t("pages.reportProblem.loadError") }), loadError && (_jsx("p", { className: "mt-2 text-ink-4 text-[13px] font-mono", children: loadError }))] })] }));
+    }
+    // ── Loaded state ─────────────────────────────────────────────────────────
+    return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.reportProblem.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.reportProblem.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.reportProblem.subtitle") }), _jsx(NoAutoUploadBanner, {}), _jsxs("section", { "aria-labelledby": "section-form", children: [_jsx(SectionTitle, { id: "section-form", children: t("pages.reportProblem.form.title") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-4", children: t("pages.reportProblem.form.description") }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-panel border border-line rounded-[6px] p-5 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-type", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.type") }), _jsx("select", { id: "feedback-type", value: form.type, onChange: (e) => {
+                                            const val = e.target.value;
+                                            if (VALID_FEEDBACK_TYPES.has(val)) {
+                                                handleFieldChange("type", val);
+                                            }
+                                        }, className: "border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov", children: FEEDBACK_TYPES.map((ft) => (_jsx("option", { value: ft, children: t(`pages.reportProblem.form.types.${ft}`) }, ft))) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-severity", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.severity") }), _jsxs("select", { id: "feedback-severity", value: form.severity ?? "", onChange: (e) => {
+                                            const val = e.target.value;
+                                            if (val === "") {
+                                                handleFieldChange("severity", undefined);
+                                            }
+                                            else if (VALID_SEVERITY_OPTIONS.has(val)) {
+                                                handleFieldChange("severity", val);
+                                            }
+                                        }, className: "border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov", children: [_jsx("option", { value: "", children: t("pages.reportProblem.form.severityNotSet") }), SEVERITY_OPTIONS.map((sev) => (_jsx("option", { value: sev, children: t(`pages.reportProblem.form.severity${sev.charAt(0).toUpperCase() + sev.slice(1)}`) }, sev)))] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-title", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.titleLabel") }), _jsx("input", { id: "feedback-title", type: "text", value: form.title, onChange: (e) => handleFieldChange("title", e.target.value), className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-description", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.descriptionLabel") }), _jsx("textarea", { id: "feedback-description", value: form.description, onChange: (e) => handleFieldChange("description", e.target.value), rows: 4, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-steps", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.stepsLabel") }), _jsx("textarea", { id: "feedback-steps", value: form.stepsToReproduce, onChange: (e) => handleFieldChange("stepsToReproduce", e.target.value), rows: 3, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-expected", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.expectedLabel") }), _jsx("textarea", { id: "feedback-expected", value: form.expectedBehavior, onChange: (e) => handleFieldChange("expectedBehavior", e.target.value), rows: 2, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "feedback-actual", className: "block text-ink-2 text-[13px] mb-1.5", children: t("pages.reportProblem.form.actualLabel") }), _jsx("textarea", { id: "feedback-actual", value: form.actualBehavior, onChange: (e) => handleFieldChange("actualBehavior", e.target.value), rows: 2, className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov resize-y" })] }), _jsxs("div", { className: "flex items-center gap-3 pt-2", children: [_jsx("button", { type: "submit", disabled: form.submitting, className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: form.submitting ? t("pages.reportProblem.form.submitting") : t("pages.reportProblem.form.submit") }), currentDraft && (_jsx("button", { type: "button", onClick: () => setShowPreview((prev) => !prev), className: "border border-line bg-surface text-ink rounded-[3px] px-[14px] py-[6px] text-[12.5px] hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: showPreview
+                                            ? t("pages.reportProblem.form.hidePreview")
+                                            : t("pages.reportProblem.form.showPreview") }))] })] }), showPreview && currentDraft && (_jsxs("div", { className: "mt-4 bg-panel border border-line rounded-[6px] p-4", children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.08em] text-ink-3 mb-3", children: "Markdown" }), _jsx("pre", { className: "whitespace-pre-wrap text-ink-2 text-[13px] leading-relaxed bg-surface border border-line rounded-[3px] p-3 max-h-[400px] overflow-auto", children: currentDraft.outputs.markdown })] }))] }), _jsx(PrivacySection, { draft: currentDraft }), currentDraft && (_jsxs("section", { className: "mt-8", "aria-labelledby": "section-current-draft", children: [_jsx(SectionTitle, { id: "section-current-draft", children: t("pages.reportProblem.draft.title") }), _jsx(DraftCard, { draft: currentDraft, onCopyMarkdown: () => handleCopyMarkdown(currentDraft), onCopyEmail: () => handleCopyEmail(currentDraft), onOpenGithub: () => handleOpenGithub(currentDraft), onDelete: () => handleDeleteDraft(currentDraft.id) })] })), loadError && (_jsxs("div", { className: "mt-4 p-3 bg-panel border border-amber/20 rounded-[6px] text-ink-2 text-[13px]", children: [_jsx("p", { children: t("pages.reportProblem.loadError") }), _jsx("p", { className: "mt-1 text-ink-4 text-[12px] font-mono", children: loadError })] })), _jsx(SavedDraftsSection, { drafts: drafts, onLoad: handleLoadDraft, onDelete: handleDeleteDraft }), _jsx("footer", { className: "mt-12 pt-6 border-t border-line text-ink-3 text-[13px]", children: t("pages.reportProblem.privacy.guarantee") })] }));
+}

package/console/dist/ui/pages/settings/SettingsPage.d.ts

@@ -0,0 +1,4 @@
+import type { WorkspaceEntry } from "../../api.js";
+export declare function validateWorkspaceEntry(raw: unknown): WorkspaceEntry | null;
+export declare function validateWorkspaceArray(raw: unknown): WorkspaceEntry[] | null;
+export declare function SettingsPage(): import("react/jsx-runtime").JSX.Element;

package/console/dist/ui/pages/settings/SettingsPage.js

@@ -0,0 +1,202 @@
+import { jsxs as _jsxs, jsx as _jsx, 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 { SectionTitle } from "../../components/layout/section-title.js";
+import { getToken, setToken, fetchWorkspaces, addWorkspace, removeWorkspace, syncWorkspace, fetchOutputLanguage, updateOutputLanguage, } from "../../api.js";
+// ── Runtime validators (H section / ERR-001/005/009/013) ─────────────────────
+/** Type guard: is this a non-null object with own properties (not inherited)? */
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+export function validateWorkspaceEntry(raw) {
+    if (!isRecord(raw))
+        return null;
+    if (!Object.hasOwn(raw, "name") ||
+        !Object.hasOwn(raw, "path") ||
+        !Object.hasOwn(raw, "lastSync")) {
+        return null;
+    }
+    const name = raw.name;
+    const path = raw.path;
+    const lastSync = raw.lastSync;
+    if (typeof name !== "string" ||
+        name.length === 0 ||
+        typeof path !== "string" ||
+        path.length === 0) {
+        return null;
+    }
+    if (lastSync !== null && typeof lastSync !== "string") {
+        return null;
+    }
+    // Validate optional config field
+    let config = null;
+    if (Object.hasOwn(raw, "config") && raw.config !== null) {
+        if (!isRecord(raw.config))
+            return null;
+        const cfg = raw.config;
+        if (!Object.hasOwn(cfg, "workspaceName") ||
+            !Object.hasOwn(cfg, "enabled") ||
+            !Object.hasOwn(cfg, "syncEnabled")) {
+            return null;
+        }
+        if (typeof cfg.workspaceName !== "string" ||
+            typeof cfg.enabled !== "boolean" ||
+            typeof cfg.syncEnabled !== "boolean") {
+            return null;
+        }
+        const displayName = Object.hasOwn(cfg, "displayName") && typeof cfg.displayName === "string"
+            ? cfg.displayName
+            : null;
+        config = {
+            workspaceName: cfg.workspaceName,
+            enabled: cfg.enabled,
+            displayName,
+            syncEnabled: cfg.syncEnabled,
+        };
+    }
+    return { name, path, lastSync, config };
+}
+export function validateWorkspaceArray(raw) {
+    if (!Array.isArray(raw))
+        return null;
+    const entries = [];
+    for (const item of raw) {
+        const validated = validateWorkspaceEntry(item);
+        if (validated === null)
+            return null; // ERR-009: fail loud on invalid element
+        entries.push(validated);
+    }
+    return entries;
+}
+export function SettingsPage() {
+    const { t } = useTranslation();
+    const [loadingState, setLoadingState] = useState("loading");
+    const [errorMessage, setErrorMessage] = useState(null);
+    // Auth token state
+    const [tokenInput, setTokenInput] = useState("");
+    // Workspace state
+    const [workspaces, setWorkspaces] = useState([]);
+    const [addName, setAddName] = useState("");
+    const [addPath, setAddPath] = useState("");
+    // PRI-332: Principle output language state
+    const [outputLanguage, setOutputLanguage] = useState("zh-CN");
+    // Inline confirm for remove (J.1 pattern)
+    const [confirmRemove, setConfirmRemove] = useState(null);
+    // ── Load data on mount ──────────────────────────────────────────────────
+    const loadData = useCallback(async () => {
+        setLoadingState("loading");
+        setErrorMessage(null);
+        // Load current token
+        const storedToken = getToken();
+        setTokenInput(storedToken ?? "");
+        // Load workspaces
+        const result = await fetchWorkspaces();
+        if (!result.success) {
+            setLoadingState("error");
+            setErrorMessage(result.error ?? "Unknown error");
+            return;
+        }
+        const validated = validateWorkspaceArray(result.data);
+        if (validated === null) {
+            setLoadingState("error");
+            setErrorMessage("Workspace data has unexpected shape");
+            return;
+        }
+        setWorkspaces(validated);
+        // PRI-332: Load output language preference
+        const langResult = await fetchOutputLanguage();
+        if (langResult.success && langResult.data) {
+            const lang = langResult.data.outputLanguage;
+            if (lang === "zh-CN" || lang === "en") {
+                setOutputLanguage(lang);
+            }
+        }
+        // Non-fatal: if language load fails, keep default zh-CN
+        setLoadingState("loaded");
+    }, []);
+    useEffect(() => {
+        loadData();
+    }, [loadData]);
+    // ── Auth token handlers ────────────────────────────────────────────────
+    const handleSaveToken = useCallback(() => {
+        const trimmed = tokenInput.trim();
+        if (trimmed.length === 0)
+            return;
+        setToken(trimmed);
+        toast.success(t("pages.settings.tokenSaved"));
+    }, [tokenInput, t]);
+    // ── Workspace handlers ─────────────────────────────────────────────────
+    const handleAddWorkspace = useCallback(async () => {
+        const name = addName.trim();
+        const path = addPath.trim();
+        if (name.length === 0 || path.length === 0)
+            return;
+        const result = await addWorkspace(name, path);
+        if (!result.success) {
+            toast.error(result.error ?? "Failed to add workspace");
+            return;
+        }
+        // Validate the returned entry before adding to state
+        const validated = validateWorkspaceEntry(result.data);
+        if (validated === null) {
+            // ERR-002: degrade with reason — still reload from server
+            toast.success(t("pages.settings.workspaceAdded"));
+            await loadData();
+            return;
+        }
+        setWorkspaces((prev) => [...prev, validated]);
+        setAddName("");
+        setAddPath("");
+        toast.success(t("pages.settings.workspaceAdded"));
+    }, [addName, addPath, t, loadData]);
+    const handleRemoveWorkspace = useCallback(async (name) => {
+        const result = await removeWorkspace(name);
+        if (!result.success) {
+            toast.error(result.error ?? "Failed to remove workspace");
+            setConfirmRemove(null);
+            return;
+        }
+        setWorkspaces((prev) => prev.filter((w) => w.name !== name));
+        setConfirmRemove(null);
+        toast.success(t("pages.settings.workspaceRemoved"));
+    }, [t]);
+    const handleSyncWorkspace = useCallback(async (name) => {
+        const result = await syncWorkspace(name);
+        if (!result.success) {
+            toast.error(result.error ?? "Failed to sync workspace");
+            return;
+        }
+        // Reload to get fresh lastSync timestamps
+        await loadData();
+        toast.success(t("pages.settings.syncWorkspace"));
+    }, [loadData, t]);
+    // ── PRI-332: Output language handler ────────────────────────────────
+    const handleOutputLanguageChange = useCallback(async (newLang) => {
+        if (newLang !== 'zh-CN' && newLang !== 'en')
+            return;
+        const result = await updateOutputLanguage(newLang);
+        if (!result.success) {
+            toast.error(result.error ?? t("pages.settings.languageLoadError"));
+            return;
+        }
+        // Re-read to confirm persisted state
+        if (result.data && (result.data.outputLanguage === "zh-CN" || result.data.outputLanguage === "en")) {
+            setOutputLanguage(result.data.outputLanguage);
+        }
+        toast.success(t("pages.settings.languageSaved"));
+    }, [t]);
+    // ── Loading state ────────────────────────────────────────────────────────
+    if (loadingState === "loading") {
+        return (_jsx(PageShell, { children: _jsxs("div", { className: "text-ink-3 text-sm", role: "status", "aria-live": "polite", children: [t("common.loading"), "\u2026"] }) }));
+    }
+    // ── Error state (ERR-002: degradation with reason) ───────────────────────
+    if (loadingState === "error") {
+        return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.settings.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.settings.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.settings.loadError") }), errorMessage && (_jsx("p", { className: "mt-2 text-ink-4 text-[13px] font-mono", children: errorMessage }))] })] }));
+    }
+    // ── Loaded state ─────────────────────────────────────────────────────────
+    return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.settings.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.settings.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.settings.subtitle") }), _jsxs("section", { className: "mb-8", "aria-labelledby": "section-auth", children: [_jsx(SectionTitle, { id: "section-auth", children: t("pages.settings.auth") }), _jsxs("div", { className: "bg-panel border border-line rounded-[6px] p-5", children: [_jsx("label", { htmlFor: "bearer-token-input", className: "block text-sm font-medium text-ink mb-2", children: t("pages.settings.bearerToken") }), _jsx("input", { id: "bearer-token-input", type: "password", value: tokenInput, onChange: (e) => setTokenInput(e.target.value), placeholder: t("pages.settings.enterAccessToken"), className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov" }), _jsxs("div", { className: "flex items-center justify-between mt-3", children: [_jsx("button", { onClick: handleSaveToken, disabled: tokenInput.trim().length === 0, className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("common.save") }), _jsx("span", { className: "text-ink-4 text-[12px]", children: t("pages.settings.tokenSessionOnly") })] })] })] }), _jsxs("section", { className: "mb-8", "aria-labelledby": "section-principle-language", children: [_jsx(SectionTitle, { id: "section-principle-language", children: t("pages.settings.principleLanguage") }), _jsxs("div", { className: "bg-panel border border-line rounded-[6px] p-5", children: [_jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-3", children: t("pages.settings.principleLanguageDescription") }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("label", { htmlFor: "output-language-select", className: "text-sm font-medium text-ink", children: [t("pages.settings.principleLanguage"), ":"] }), _jsxs("select", { id: "output-language-select", value: outputLanguage, onChange: (e) => handleOutputLanguageChange(e.target.value), className: "border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov", children: [_jsx("option", { value: "zh-CN", children: t("pages.settings.languageZhCN") }), _jsx("option", { value: "en", children: t("pages.settings.languageEn") })] })] })] })] }), _jsxs("section", { "aria-labelledby": "section-workspaces", children: [_jsx(SectionTitle, { id: "section-workspaces", children: t("pages.settings.workspace") }), workspaces.length > 0 ? (_jsx("div", { className: "space-y-[10px] mb-5", children: workspaces.map((ws) => (_jsx("article", { className: "bg-panel border border-line rounded-[6px] p-5", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-ink text-sm", children: ws.name }), _jsx("div", { className: "text-ink-3 text-[13px] mt-1 font-mono break-all", children: ws.path }), _jsxs("div", { className: "text-ink-4 text-[12px] mt-1", children: [t("pages.settings.lastSync"), ":", " ", ws.lastSync ?? "—"] })] }), _jsx("div", { className: "flex items-center gap-2 shrink-0", children: confirmRemove?.workspaceName === ws.name ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-ink-2 text-[12px]", children: t("pages.settings.confirmDeleteDescription", {
+                                                        name: ws.name,
+                                                    }) }), _jsx("button", { onClick: () => handleRemoveWorkspace(ws.name), className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("common.confirm") }), _jsx("button", { onClick: () => setConfirmRemove(null), 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.cancel") })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => handleSyncWorkspace(ws.name), 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("pages.settings.syncWorkspace") }), _jsx("button", { onClick: () => setConfirmRemove({ workspaceName: ws.name }), 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("pages.settings.removeWorkspace") })] })) })] }) }, ws.name))) })) : (_jsx("div", { className: "text-ink-3 text-[13px] leading-relaxed py-3 mb-5", children: "\u2014" })), _jsx("div", { className: "bg-panel border border-line rounded-[6px] p-5", children: _jsxs("div", { className: "flex items-end gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("label", { htmlFor: "add-workspace-name", className: "block text-sm font-medium text-ink mb-2", children: t("pages.settings.name") }), _jsx("input", { id: "add-workspace-name", type: "text", value: addName, onChange: (e) => setAddName(e.target.value), placeholder: t("pages.settings.addNamePlaceholder"), className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("label", { htmlFor: "add-workspace-path", className: "block text-sm font-medium text-ink mb-2", children: t("pages.settings.path") }), _jsx("input", { id: "add-workspace-path", type: "text", value: addPath, onChange: (e) => setAddPath(e.target.value), placeholder: t("pages.settings.addPathPlaceholder"), className: "w-full border border-line bg-surface rounded-[3px] px-3 py-2 text-sm text-ink focus:outline-none focus:border-gov focus:ring-1 focus:ring-gov" })] }), _jsx("button", { onClick: handleAddWorkspace, disabled: addName.trim().length === 0 || addPath.trim().length === 0, className: "border border-gov bg-gov text-paper rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:bg-gov-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shrink-0 focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.settings.addWorkspace") })] }) })] })] }));
+}

package/console/dist/ui/pages/settings/UpdatePage.d.ts

@@ -0,0 +1,5 @@
+import type { UpdateStatusData, UpdateHistoryEntry, UpdateHistoryData } from "../../api.js";
+export declare function validateUpdateStatusData(raw: unknown): UpdateStatusData | null;
+export declare function validateUpdateHistoryEntry(raw: unknown): UpdateHistoryEntry | null;
+export declare function validateUpdateHistoryData(raw: unknown): UpdateHistoryData | null;
+export declare function UpdatePage(): import("react/jsx-runtime").JSX.Element;