create-principles-disciple 1.82.0 → 1.83.0

package/console/dist/ui/pages/control-center/ControlCenterPage.js

@@ -0,0 +1,447 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { fetchConfigSummary, fetchConfigCatalog, updateAgentBinding, updateDefaultRuntime, } from "../../api.js";
+import { computeOverallReadiness, getReadinessLabel, groupAgentsByReadiness, redactDiagnosticsForCopy, } from "../../utils/control-center-helpers.js";
+// ── Runtime validators (H section / ERR-001/005/009/013) ─────────────────────
+function validateSource(raw) {
+    if (typeof raw !== "string")
+        return null;
+    switch (raw) {
+        case "defaults": return "defaults";
+        case "user_config": return "user_config";
+        default: return null;
+    }
+}
+/** 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);
+}
+function validateReadinessStatus(raw) {
+    if (typeof raw !== "string")
+        return null;
+    switch (raw) {
+        case "ready": return "ready";
+        case "not_ready": return "not_ready";
+        case "needs_setup": return "needs_setup";
+        case "disabled": return "disabled";
+        case "unknown": return "unknown";
+        default: return null;
+    }
+}
+function validateRedactedFeatureSummary(raw) {
+    if (!isRecord(raw))
+        return null;
+    if (!Object.hasOwn(raw, "id") ||
+        !Object.hasOwn(raw, "category") ||
+        !Object.hasOwn(raw, "enabled")) {
+        return null;
+    }
+    const id = raw.id;
+    const category = raw.category;
+    const enabled = raw.enabled;
+    if (typeof id !== "string" ||
+        id.length === 0 ||
+        typeof category !== "string" ||
+        typeof enabled !== "boolean") {
+        return null;
+    }
+    return { id, category, enabled };
+}
+function validateRedactedRuntimeProfileSummary(raw) {
+    if (!isRecord(raw))
+        return null;
+    if (!Object.hasOwn(raw, "id") ||
+        !Object.hasOwn(raw, "type") ||
+        !Object.hasOwn(raw, "label") ||
+        !Object.hasOwn(raw, "readiness")) {
+        return null;
+    }
+    const id = raw.id;
+    const type = raw.type;
+    const label = raw.label;
+    const readiness = validateReadinessStatus(raw.readiness);
+    if (typeof id !== "string" ||
+        id.length === 0 ||
+        typeof type !== "string" ||
+        typeof label !== "string" ||
+        readiness === null) {
+        return null;
+    }
+    const apiKeyEnv = Object.hasOwn(raw, "apiKeyEnv") && typeof raw.apiKeyEnv === "string"
+        ? raw.apiKeyEnv
+        : undefined;
+    return { id, type, label, apiKeyEnv, readiness };
+}
+function validateRedactedAgentSummary(raw) {
+    if (!isRecord(raw))
+        return null;
+    if (!Object.hasOwn(raw, "name") ||
+        !Object.hasOwn(raw, "enabled") ||
+        !Object.hasOwn(raw, "runtimeProfileId") ||
+        !Object.hasOwn(raw, "runtimeProfileLabel") ||
+        !Object.hasOwn(raw, "readiness")) {
+        return null;
+    }
+    const name = raw.name;
+    const enabled = raw.enabled;
+    const runtimeProfileId = raw.runtimeProfileId;
+    const runtimeProfileLabel = raw.runtimeProfileLabel;
+    const readiness = validateReadinessStatus(raw.readiness);
+    if (typeof name !== "string" ||
+        name.length === 0 ||
+        typeof enabled !== "boolean" ||
+        typeof runtimeProfileId !== "string" ||
+        typeof runtimeProfileLabel !== "string" ||
+        readiness === null) {
+        return null;
+    }
+    return { name, enabled, runtimeProfileId, runtimeProfileLabel, readiness };
+}
+function validateConfigError(raw) {
+    if (!isRecord(raw))
+        return null;
+    if (!Object.hasOwn(raw, "path") ||
+        !Object.hasOwn(raw, "reason") ||
+        !Object.hasOwn(raw, "nextAction")) {
+        return null;
+    }
+    const path = raw.path;
+    const reason = raw.reason;
+    const nextAction = raw.nextAction;
+    if (typeof path !== "string" ||
+        typeof reason !== "string" ||
+        typeof nextAction !== "string") {
+        return null;
+    }
+    return { path, reason, nextAction };
+}
+function validateConfigSummaryData(raw) {
+    if (!isRecord(raw))
+        return null;
+    // Required fields check (ERR-009: fail loud on missing required fields)
+    if (!Object.hasOwn(raw, "version") ||
+        !Object.hasOwn(raw, "source") ||
+        !Object.hasOwn(raw, "features") ||
+        !Object.hasOwn(raw, "runtimeProfiles") ||
+        !Object.hasOwn(raw, "defaultRuntime") ||
+        !Object.hasOwn(raw, "agents") ||
+        !Object.hasOwn(raw, "ui") ||
+        !Object.hasOwn(raw, "warnings")) {
+        return null;
+    }
+    const version = raw.version;
+    const source = raw.source;
+    const features = raw.features;
+    const runtimeProfiles = raw.runtimeProfiles;
+    const defaultRuntime = raw.defaultRuntime;
+    const agents = raw.agents;
+    const ui = raw.ui;
+    const warnings = raw.warnings;
+    if (typeof version !== "number" ||
+        typeof source !== "string" ||
+        validateSource(source) === null ||
+        !Array.isArray(features) ||
+        !Array.isArray(runtimeProfiles) ||
+        typeof defaultRuntime !== "string" ||
+        !Array.isArray(agents) ||
+        !isRecord(ui) ||
+        !Array.isArray(warnings)) {
+        return null;
+    }
+    // Validate ui.diagnostics (ERR-009)
+    if (!Object.hasOwn(ui, "diagnostics") ||
+        !isRecord(ui.diagnostics)) {
+        return null;
+    }
+    const uiDiag = ui.diagnostics;
+    if (!Object.hasOwn(uiDiag, "mode") || typeof uiDiag.mode !== "string") {
+        return null;
+    }
+    const uiDiagMode = uiDiag.mode;
+    // Validate features array elements (ERR-005/ERR-007)
+    const validatedFeatures = [];
+    for (const f of features) {
+        const validated = validateRedactedFeatureSummary(f);
+        if (validated === null)
+            return null;
+        validatedFeatures.push(validated);
+    }
+    // Validate runtime profiles array elements
+    const validatedProfiles = [];
+    for (const p of runtimeProfiles) {
+        const validated = validateRedactedRuntimeProfileSummary(p);
+        if (validated === null)
+            return null;
+        validatedProfiles.push(validated);
+    }
+    // Validate agents array elements
+    const validatedAgents = [];
+    for (const a of agents) {
+        const validated = validateRedactedAgentSummary(a);
+        if (validated === null)
+            return null;
+        validatedAgents.push(validated);
+    }
+    // Validate warnings array elements (ERR-005)
+    const validatedWarnings = [];
+    for (const w of warnings) {
+        if (typeof w !== "string")
+            return null;
+        validatedWarnings.push(w);
+    }
+    // Validate optional errors array
+    let validatedErrors;
+    if (Object.hasOwn(raw, "errors") && raw.errors !== undefined) {
+        if (!Array.isArray(raw.errors))
+            return null;
+        validatedErrors = [];
+        for (const e of raw.errors) {
+            const validated = validateConfigError(e);
+            if (validated === null)
+                return null;
+            validatedErrors.push(validated);
+        }
+    }
+    const validatedSource = validateSource(source);
+    if (validatedSource === null)
+        return null;
+    return {
+        version,
+        source: validatedSource,
+        features: validatedFeatures,
+        runtimeProfiles: validatedProfiles,
+        defaultRuntime,
+        agents: validatedAgents,
+        ui: {
+            diagnostics: {
+                mode: uiDiagMode,
+            },
+        },
+        warnings: validatedWarnings,
+        errors: validatedErrors,
+    };
+}
+function validateConfigCatalogData(raw) {
+    if (!isRecord(raw))
+        return null;
+    if (!Object.hasOwn(raw, "profiles"))
+        return null;
+    const profiles = raw.profiles;
+    if (!Array.isArray(profiles))
+        return null;
+    const validatedProfiles = [];
+    for (const p of profiles) {
+        const validated = validateRedactedRuntimeProfileSummary(p);
+        if (validated === null)
+            return null;
+        validatedProfiles.push(validated);
+    }
+    // Validate optional errors array
+    let validatedErrors;
+    if (Object.hasOwn(raw, "errors") && raw.errors !== undefined) {
+        if (!Array.isArray(raw.errors))
+            return null;
+        validatedErrors = [];
+        for (const e of raw.errors) {
+            const validated = validateConfigError(e);
+            if (validated === null)
+                return null;
+            validatedErrors.push(validated);
+        }
+    }
+    return { profiles: validatedProfiles, errors: validatedErrors };
+}
+// ── Readiness tag styling ────────────────────────────────────────────────────
+function readinessTagClasses(readiness) {
+    const base = "inline-flex items-center border border-line rounded-[2px] px-[7px] py-1 font-mono text-[11px] text-ink-3 bg-surface/80 uppercase";
+    switch (readiness) {
+        case "ready":
+            return base;
+        case "needs_setup":
+            return base.replace("border-line", "border-amber/35").replace("text-ink-3", "text-amber");
+        case "not_ready":
+            return base.replace("border-line", "border-red/35").replace("text-ink-3", "text-red");
+        default:
+            return base;
+    }
+}
+// ── Sub-components ───────────────────────────────────────────────────────────
+function OverallStatusCard({ readiness, agents, }) {
+    const { t } = useTranslation();
+    const enabledCount = agents.filter((a) => a.enabled).length;
+    const totalCount = agents.length;
+    let messageKey;
+    switch (readiness) {
+        case "ready":
+            messageKey = "pages.controlCenter.configReady";
+            break;
+        case "needs_setup":
+            messageKey = "pages.controlCenter.configNeedsSetup";
+            break;
+        case "not_ready":
+            messageKey = "pages.controlCenter.configNotReady";
+            break;
+        case "disabled":
+            messageKey = "pages.controlCenter.configDisabled";
+            break;
+        default:
+            messageKey = "pages.controlCenter.configUnknown";
+            break;
+    }
+    return (_jsxs("div", { className: "bg-panel border border-line rounded-[6px] px-[18px] py-[14px]", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("span", { className: readinessTagClasses(readiness), children: getReadinessLabel(readiness) }), _jsxs("span", { className: "text-ink-3 text-[13px]", children: [enabledCount, "/", totalCount, " ", t("pages.controlCenter.agentEnabled").toLowerCase()] })] }), _jsx("p", { className: "text-ink-2 text-[14px] leading-relaxed", children: t(messageKey) })] }));
+}
+function AgentRow({ agent, profiles, onBindingChange, saving, }) {
+    const { t } = useTranslation();
+    const isSaving = saving === agent.name;
+    return (_jsxs("div", { className: "flex items-center gap-4 py-[10px] border-b border-line last:border-b-0", children: [_jsx("div", { className: "min-w-[140px]", children: _jsx("span", { className: "text-ink text-[13px] font-medium", children: agent.name }) }), _jsx("div", { className: "min-w-[100px]", children: _jsx("span", { className: readinessTagClasses(agent.readiness), children: getReadinessLabel(agent.readiness) }) }), _jsx("div", { className: "flex-1", children: _jsx("select", { value: agent.runtimeProfileId, onChange: (e) => {
+                        onBindingChange(agent.name, e.target.value, agent.enabled);
+                    }, disabled: isSaving, className: "bg-surface border border-line rounded-[3px] px-2 py-1 text-[12.5px] text-ink focus:outline-none focus:border-gov disabled:opacity-50", "aria-label": t("pages.controlCenter.profileLabel"), children: profiles.map((p) => (_jsx("option", { value: p.id, children: p.label }, p.id))) }) }), _jsx("button", { type: "button", onClick: () => {
+                    onBindingChange(agent.name, agent.runtimeProfileId, !agent.enabled);
+                }, disabled: isSaving, className: agent.enabled
+                    ? "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"
+                    : "border border-line bg-surface text-ink rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:border-line-2 transition-colors disabled:opacity-50", "aria-label": agent.enabled
+                    ? t("pages.controlCenter.agentDisabled")
+                    : t("pages.controlCenter.agentEnabled"), children: isSaving
+                    ? t("pages.controlCenter.saving")
+                    : agent.enabled
+                        ? t("pages.controlCenter.on")
+                        : t("pages.controlCenter.off") })] }));
+}
+function DefaultRuntimeSelector({ currentDefault, profiles, onDefaultChange, saving, }) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "bg-panel border border-line rounded-[6px] px-[18px] py-[14px]", children: [_jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-3", children: t("pages.controlCenter.defaultRuntimeDescription") }), _jsx("select", { value: currentDefault, onChange: (e) => {
+                    onDefaultChange(e.target.value);
+                }, disabled: saving, className: "bg-surface border border-line rounded-[3px] px-3 py-[6px] text-[12.5px] text-ink focus:outline-none focus:border-gov disabled:opacity-50 min-w-[200px]", "aria-label": t("pages.controlCenter.defaultRuntime"), children: profiles.map((p) => (_jsxs("option", { value: p.id, children: [p.label, " \u2014 ", getReadinessLabel(p.readiness)] }, p.id))) }), saving && (_jsx("span", { className: "ml-3 text-ink-3 text-[12px]", children: t("pages.controlCenter.saving") }))] }));
+}
+function AdvancedDiagnostics({ config, }) {
+    const { t } = useTranslation();
+    const [copied, setCopied] = useState(false);
+    const diagnostics = {
+        version: config.version,
+        source: config.source,
+        features: config.features,
+        runtimeProfiles: config.runtimeProfiles,
+        defaultRuntime: config.defaultRuntime,
+        agents: config.agents,
+        ui: config.ui,
+        warnings: config.warnings,
+        errors: config.errors,
+    };
+    const handleCopy = useCallback(() => {
+        const text = redactDiagnosticsForCopy(diagnostics);
+        navigator.clipboard.writeText(text).then(() => {
+            setCopied(true);
+            toast.success(t("pages.controlCenter.copyDiagnostics"));
+            setTimeout(() => setCopied(false), 2000);
+        }, () => {
+            toast.error(t("pages.controlCenter.saveFailed"));
+        });
+    }, [diagnostics, t]);
+    const grouped = groupAgentsByReadiness(diagnostics);
+    return (_jsxs("details", { className: "group", children: [_jsx("summary", { className: "text-ink-3 text-[13px] cursor-pointer hover:text-ink-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.controlCenter.advancedDiagnostics") }), _jsxs("div", { className: "mt-4 space-y-5", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.1em] text-ink-3 mb-2", children: t("pages.controlCenter.features") }), _jsx("div", { className: "bg-surface/60 border border-line rounded-[6px] px-3 py-2", children: config.features.length === 0 ? (_jsx("span", { className: "text-ink-4 text-[13px]", children: "\u2014" })) : (_jsx("div", { className: "space-y-1", children: config.features.map((f) => (_jsxs("div", { className: "flex items-center gap-2 text-[13px]", children: [_jsx("span", { className: "text-ink-2", children: f.id }), _jsx("span", { className: "text-ink-4", children: "\u00B7" }), _jsx("span", { className: "text-ink-3", children: f.category }), _jsx("span", { className: "text-ink-4", children: "\u00B7" }), _jsx("span", { className: f.enabled ? "text-ink-2" : "text-ink-4 line-through", children: f.enabled
+                                                    ? t("pages.controlCenter.on")
+                                                    : t("pages.controlCenter.off") })] }, f.id))) })) })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.1em] text-ink-3 mb-2", children: t("pages.controlCenter.runtimeProfiles") }), _jsx("div", { className: "bg-surface/60 border border-line rounded-[6px] px-3 py-2", children: config.runtimeProfiles.length === 0 ? (_jsx("span", { className: "text-ink-4 text-[13px]", children: "\u2014" })) : (_jsx("div", { className: "space-y-1", children: config.runtimeProfiles.map((p) => (_jsxs("div", { className: "flex items-center gap-2 text-[13px]", children: [_jsx("span", { className: "text-ink-2", children: p.label }), _jsx("span", { className: "text-ink-4", children: "\u00B7" }), _jsx("span", { className: "text-ink-3", children: p.type }), _jsx("span", { className: readinessTagClasses(p.readiness), children: getReadinessLabel(p.readiness) })] }, p.id))) })) })] }), config.warnings.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.1em] text-ink-3 mb-2", children: t("pages.controlCenter.warnings") }), _jsx("div", { className: "bg-surface/60 border border-amber/20 border-l-2 border-l-amber rounded-[6px] px-3 py-2", children: _jsx("ul", { className: "space-y-1", children: config.warnings.map((w, i) => (_jsx("li", { className: "text-ink-2 text-[13px]", children: w }, i))) }) })] })), config.errors && config.errors.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.1em] text-ink-3 mb-2", children: t("pages.controlCenter.configErrors") }), _jsx("div", { className: "bg-surface/60 border border-red/20 border-l-2 border-l-red rounded-[6px] px-3 py-2", children: _jsx("ul", { className: "space-y-2", children: config.errors.map((e, i) => (_jsxs("li", { className: "text-[13px]", children: [_jsx("span", { className: "text-ink font-medium", children: e.path }), _jsx("span", { className: "text-ink-4", children: " \u2014 " }), _jsx("span", { className: "text-ink-2", children: e.reason }), _jsxs("div", { className: "text-ink-3 text-[12px] mt-0.5", children: ["\u2192 ", e.nextAction] })] }, i))) }) })] })), _jsxs("div", { children: [_jsx("h3", { className: "font-mono text-[11px] uppercase tracking-[0.1em] text-ink-3 mb-2", children: t("pages.controlCenter.readinessLabel") }), _jsx("div", { className: "bg-surface/60 border border-line rounded-[6px] px-3 py-2 space-y-2", children: Object.keys(grouped).map((status) => {
+                                    const validatedStatus = validateReadinessStatus(status);
+                                    if (validatedStatus === null)
+                                        return null;
+                                    const agentsInGroup = grouped[validatedStatus];
+                                    if (agentsInGroup.length === 0)
+                                        return null;
+                                    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: readinessTagClasses(validatedStatus), children: getReadinessLabel(validatedStatus) }), _jsx("span", { className: "text-ink-3 text-[13px]", children: agentsInGroup.map((a) => a.name).join(", ") })] }, validatedStatus));
+                                }) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { type: "button", onClick: handleCopy, className: "border border-line bg-surface text-ink rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: copied ? "✓" : t("pages.controlCenter.copyDiagnostics") }), _jsx("span", { className: "text-ink-4 text-[12px]", children: t("pages.controlCenter.redactedNote") })] })] })] }));
+}
+export function ControlCenterPage() {
+    const { t } = useTranslation();
+    const [configData, setConfigData] = useState(null);
+    const [catalogData, setCatalogData] = useState(null);
+    const [loadingState, setLoadingState] = useState("loading");
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [savingAgent, setSavingAgent] = useState(null);
+    const [savingDefault, setSavingDefault] = useState(false);
+    const loadData = useCallback(async () => {
+        setLoadingState("loading");
+        setErrorMessage(null);
+        const [summaryResult, catalogResult] = await Promise.all([
+            fetchConfigSummary(),
+            fetchConfigCatalog(),
+        ]);
+        // Validate summary data (H section / ERR-001/005/009)
+        if (!summaryResult.success) {
+            setLoadingState("error");
+            setErrorMessage(summaryResult.error);
+            return;
+        }
+        const validatedSummary = validateConfigSummaryData(summaryResult.data);
+        if (validatedSummary === null) {
+            setLoadingState("error");
+            setErrorMessage("Config summary data has unexpected shape");
+            return;
+        }
+        setConfigData(validatedSummary);
+        // Validate catalog data (ERR-002: degradation with reason)
+        if (!catalogResult.success) {
+            // Non-fatal: catalog is only needed for profile dropdowns
+            setCatalogData(null);
+        }
+        else {
+            const validatedCatalog = validateConfigCatalogData(catalogResult.data);
+            setCatalogData(validatedCatalog);
+        }
+        setLoadingState("loaded");
+    }, []);
+    useEffect(() => {
+        loadData();
+    }, [loadData]);
+    const handleBindingChange = useCallback(async (agentName, runtimeProfile, enabled) => {
+        setSavingAgent(agentName);
+        const result = await updateAgentBinding(agentName, runtimeProfile, enabled);
+        setSavingAgent(null);
+        if (!result.success) {
+            toast.error(t("pages.controlCenter.saveFailed"));
+            return;
+        }
+        // Refresh config data after successful update
+        await loadData();
+    }, [loadData, t]);
+    const handleDefaultRuntimeChange = useCallback(async (profileId) => {
+        setSavingDefault(true);
+        const result = await updateDefaultRuntime(profileId);
+        setSavingDefault(false);
+        if (!result.success) {
+            toast.error(t("pages.controlCenter.saveFailed"));
+            return;
+        }
+        // Refresh config data after successful update
+        await loadData();
+    }, [loadData, 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.controlCenter.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.controlCenter.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.controlCenter.loadError") }), errorMessage && (_jsx("p", { className: "mt-2 text-ink-4 text-[13px] font-mono", children: errorMessage }))] })] }));
+    }
+    // ── Loaded state ─────────────────────────────────────────────────────────
+    if (configData === null) {
+        return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.controlCenter.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.controlCenter.title") }), _jsx("div", { className: "mt-6 p-4 bg-panel border border-line rounded-[6px] text-ink-2 text-sm", children: _jsx("p", { children: t("pages.controlCenter.loadError") }) })] }));
+    }
+    const diagnostics = {
+        version: configData.version,
+        source: configData.source,
+        features: configData.features,
+        runtimeProfiles: configData.runtimeProfiles,
+        defaultRuntime: configData.defaultRuntime,
+        agents: configData.agents,
+        ui: configData.ui,
+        warnings: configData.warnings,
+        errors: configData.errors,
+    };
+    const overallReadiness = computeOverallReadiness(diagnostics);
+    const availableProfiles = catalogData?.profiles ?? configData.runtimeProfiles;
+    return (_jsxs(PageShell, { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.controlCenter.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.controlCenter.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.controlCenter.subtitle") }), _jsx("section", { "aria-labelledby": "section-readiness", children: _jsx(OverallStatusCard, { readiness: overallReadiness, agents: configData.agents }) }), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-agents", children: [_jsx(SectionTitle, { id: "section-agents", children: t("pages.controlCenter.internalAgents") }), _jsx("p", { className: "text-ink-3 text-[13px] leading-relaxed mb-3", children: t("pages.controlCenter.internalAgentsDescription") }), _jsx("div", { className: "bg-panel border border-line rounded-[6px] px-[18px] py-[6px]", children: configData.agents.length === 0 ? (_jsx("div", { className: "py-3 text-ink-3 text-[13px]", children: "\u2014" })) : (configData.agents.map((agent) => (_jsx(AgentRow, { agent: agent, profiles: availableProfiles, onBindingChange: handleBindingChange, saving: savingAgent }, agent.name)))) })] }), _jsxs("section", { className: "mt-8", "aria-labelledby": "section-default-runtime", children: [_jsx(SectionTitle, { id: "section-default-runtime", children: t("pages.controlCenter.defaultRuntime") }), _jsx(DefaultRuntimeSelector, { currentDefault: configData.defaultRuntime, profiles: availableProfiles, onDefaultChange: handleDefaultRuntimeChange, saving: savingDefault })] }), _jsx("section", { className: "mt-8", "aria-labelledby": "section-diagnostics", children: _jsx(AdvancedDiagnostics, { config: configData }) })] }));
+}

package/console/dist/ui/pages/debt/DebtPage.d.ts

@@ -0,0 +1 @@
+export declare function DebtPage(): import("react/jsx-runtime").JSX.Element;

package/console/dist/ui/pages/debt/DebtPage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageShell } from "../../components/layout/page-shell.js";
+export function DebtPage() {
+    return (_jsxs(PageShell, { children: [_jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: "\u539F\u5219\u503A\u52A1" }), _jsx("p", { className: "text-ink-3 text-sm", children: "\u9875\u9762\u5EFA\u8BBE\u4E2D \u2014 CR3" })] }));
+}

package/console/dist/ui/pages/design-system/DesignSystemPage.d.ts

@@ -0,0 +1 @@
+export declare function DesignSystemPage(): import("react/jsx-runtime").JSX.Element;

package/console/dist/ui/pages/design-system/DesignSystemPage.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../components/ui/button.js";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../components/ui/card.js";
+import { Badge } from "../../components/ui/badge.js";
+import { PageShell } from "../../components/layout/page-shell.js";
+import { SectionTitle } from "../../components/layout/section-title.js";
+/**
+ * Design system preview page — dev-only visual regression anchor.
+ * Renders all tokens, component states, and patterns for CR1 verification.
+ */
+const LIGHT_TOKENS = [
+    { name: "--paper", value: "#f7f3ea" },
+    { name: "--paper-2", value: "#f2ede3" },
+    { name: "--surface", value: "#fbf8f0" },
+    { name: "--panel", value: "#fffdf7" },
+    { name: "--ink", value: "#1f2933" },
+    { name: "--ink-2", value: "#384150" },
+    { name: "--ink-3", value: "#525966" },
+    { name: "--ink-4", value: "#5F6774" },
+    { name: "--line", value: "#d7d1c4" },
+    { name: "--line-2", value: "#c7bfaf" },
+    { name: "--gov", value: "#1e3a5f" },
+    { name: "--gov-2", value: "#2f557f" },
+    { name: "--amber", value: "#a66a2a" },
+    { name: "--green", value: "#4d6b52" },
+    { name: "--danger", value: "#8b3a3a" },
+];
+export function DesignSystemPage() {
+    return (_jsxs(PageShell, { children: [_jsx(SectionTitle, { children: "Design System Preview" }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: "Warm Paper + Blueprint" }), _jsx("p", { className: "text-ink-3 text-sm mb-8", children: "Visual regression anchor for CR1. All tokens and component states rendered here." }), _jsx(SectionTitle, { children: "Color Palette" }), _jsx("div", { className: "grid grid-cols-5 gap-3 mb-8", children: LIGHT_TOKENS.map(({ name, value }) => (_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("div", { className: "w-full h-12 rounded-[var(--radius-md)] border border-line", style: { backgroundColor: value } }), _jsx("span", { className: "font-mono text-[10px] text-ink-3", children: name }), _jsx("span", { className: "font-mono text-[10px] text-ink-4", children: value })] }, name))) }), _jsx(SectionTitle, { children: "Buttons" }), _jsxs("div", { className: "flex flex-wrap gap-3 mb-8 items-center", children: [_jsx(Button, { variant: "default", children: "Primary (Gov)" }), _jsx(Button, { variant: "outline", children: "Outline" }), _jsx(Button, { variant: "ghost", children: "Ghost" }), _jsx(Button, { variant: "quiet", children: "Quiet" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "destructive", children: "Destructive" }), _jsx(Button, { variant: "link", children: "Link" }), _jsx(Button, { variant: "default", disabled: true, children: "Disabled" }), _jsx(Button, { variant: "default", size: "sm", children: "Small" }), _jsx(Button, { variant: "default", size: "lg", children: "Large" })] }), _jsx(SectionTitle, { children: "Cards" }), _jsxs("div", { className: "grid grid-cols-2 gap-4 mb-8", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Default Card" }), _jsx(CardDescription, { children: "With shadow, hover deepens border + shadow. No transform." })] }), _jsx(CardContent, { children: _jsxs("p", { className: "text-sm text-ink-3", children: ["Cards use ", _jsx("code", { className: "font-mono text-[11px] bg-paper-2 px-1 rounded-[2px]", children: "--shadow-card" }), " and hover with deeper shadow. No translateY or scale on hover (B.4.4)."] }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "default", size: "sm", children: "Action" }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Card with Badges" }), _jsx(CardDescription, { children: "Status labels in Blueprint style" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "flex flex-wrap gap-2 mb-3", children: [_jsx(Badge, { variant: "default", children: "\u5F85\u5BA1\u67E5" }), _jsx(Badge, { variant: "amber", children: "\u9700\u6CE8\u610F" }), _jsx(Badge, { variant: "green", children: "\u7A33\u5B9A" }), _jsx(Badge, { variant: "destructive", children: "\u98CE\u9669" }), _jsx(Badge, { variant: "secondary", children: "\u5DF2\u5F52\u6863" }), _jsx(Badge, { variant: "outline", children: "\u5DF2\u6682\u5B58" })] }), _jsx("p", { className: "text-sm text-ink-3", children: "Badges: 2px border-radius, mono font, 11px, low saturation (B.4.5)." })] })] })] }), _jsx(SectionTitle, { children: "Badges / Status Labels" }), _jsxs("div", { className: "flex flex-wrap gap-3 mb-8", children: [_jsx(Badge, { variant: "default", children: "\u5F85\u5BA1\u67E5" }), _jsx(Badge, { variant: "amber", children: "\u9700\u6CE8\u610F" }), _jsx(Badge, { variant: "green", children: "\u7A33\u5B9A" }), _jsx(Badge, { variant: "destructive", children: "\u98CE\u9669" }), _jsx(Badge, { variant: "secondary", children: "\u5DF2\u5F52\u6863" }), _jsx(Badge, { variant: "outline", children: "\u5DF2\u6682\u5B58" })] }), _jsx(SectionTitle, { children: "Empty State" }), _jsx(Card, { className: "mb-8", children: _jsxs(CardContent, { className: "py-12 text-center", children: [_jsx("p", { className: "text-ink-3 text-sm mb-2", children: "\u8FD8\u6CA1\u6709\u53EF\u5BA1\u67E5\u539F\u5219\u3002\u5F53 PD \u6355\u83B7\u5230\u884C\u4E3A\u504F\u5DEE\u4FE1\u53F7\u65F6\uFF0C\u4F1A\u5728\u8FD9\u91CC\u751F\u6210\u539F\u5219\u5019\u9009\uFF0C\u7B49\u5F85\u4F60\u5BA1\u67E5\u3002" }), _jsx(Button, { variant: "outline", size: "sm", children: "\u4E86\u89E3\u66F4\u591A" })] }) }), _jsx(SectionTitle, { children: "Error State" }), _jsx(Card, { className: "mb-8", children: _jsxs(CardContent, { className: "py-8", children: [_jsx("p", { className: "text-ink-3 text-sm mb-2", children: "\u65E0\u6CD5\u52A0\u8F7D\u8FD9\u6761\u539F\u5219\u7684\u8BC1\u636E\u6765\u6E90\u3002\u539F\u5219\u672C\u8EAB\u672A\u53D7\u5F71\u54CD\u3002\u4F60\u53EF\u4EE5\u7A0D\u540E\u91CD\u8BD5\uFF0C\u6216\u6682\u65F6\u4FDD\u7559\u5728\u5F85\u5BA1\u67E5\u72B6\u6001\u3002" }), _jsx(Button, { variant: "outline", size: "sm", children: "\u91CD\u8BD5" })] }) }), _jsx(SectionTitle, { children: "Typography" }), _jsxs("div", { className: "space-y-3 mb-8", children: [_jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink", children: "Page Title \u2014 29px" }), _jsx("h2", { className: "text-[17px] font-semibold tracking-tight text-ink", children: "Card Title \u2014 17px" }), _jsx("h3", { className: "text-[13px] font-semibold text-ink-2", children: "Section Title \u2014 13px" }), _jsx("p", { className: "text-[15px] text-ink leading-relaxed", children: "Body text \u2014 15px. The quick brown fox jumps over the lazy dog. \u6570\u5B57\u4F7F\u7528 tabular-nums: 1,234,567." }), _jsx("p", { className: "text-[14px] text-ink-2", children: "Card body \u2014 14px" }), _jsx("p", { className: "text-[13px] text-ink-3", children: "Auxiliary text \u2014 13px" }), _jsx("p", { className: "font-mono text-[11px] tracking-[0.1em] uppercase text-ink-3", children: "EYEBROW / LABEL \u2014 11PX MONO" }), _jsx("p", { className: "font-mono text-[11px] text-ink-4", children: "Metadata / timestamp \u2014 11px mono" })] }), _jsx(SectionTitle, { children: "Layout \u2014 712px Container" }), _jsx("p", { className: "text-sm text-ink-3 mb-4", children: "This page is already inside a PageShell (712px centered). The blueprint grid is visible on the body background." }), _jsx("div", { className: "border border-dashed border-line-2 p-4 text-center text-ink-4 text-xs font-mono", children: "\u2190 712px max-width \u2192" })] }));
+}

package/console/dist/ui/pages/focus/FocusPage.d.ts

@@ -0,0 +1 @@
+export declare function FocusPage(): import("react/jsx-runtime").JSX.Element;