create-principles-disciple 1.95.0 → 1.97.0

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

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+/** 状态点样式：ready / notready / off */
+function statusDotClasses(agent) {
+    const base = "w-2 h-2 rounded-full border-2 shrink-0";
+    if (!agent.enabled) {
+        return cn(base, "border-ink-4 bg-surface opacity-50");
+    }
+    switch (agent.readiness) {
+        case "ready":
+            return cn(base, "border-green bg-green");
+        case "not_ready":
+            return cn(base, "border-amber bg-surface");
+        case "needs_setup":
+            return cn(base, "border-amber bg-surface");
+        default:
+            return cn(base, "border-ink-4 bg-surface");
+    }
+}
+/** impact-box 左边框色 */
+function impactBorderClass(level) {
+    switch (level) {
+        case "danger":
+            return "border-l-danger";
+        case "green":
+            return "border-l-green";
+        default:
+            return "border-l-amber";
+    }
+}
+/** impact label 色 */
+function impactLabelClass(level) {
+    switch (level) {
+        case "danger":
+            return "text-danger";
+        case "green":
+            return "text-green";
+        default:
+            return "text-ink-4";
+    }
+}
+/**
+ * 渲染含反引号 code 片段的文本。
+ * 输入示例：'`DiagnosticianContextPayload`（pain 信号上下文）'
+ * 输出：[<code>DiagnosticianContextPayload</code>, "（pain 信号上下文）"]
+ */
+function renderTextWithCode(text) {
+    const parts = text.split("`");
+    const nodes = [];
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        if (part === undefined)
+            continue;
+        if (i % 2 === 0) {
+            if (part.length > 0) {
+                nodes.push(part);
+            }
+        }
+        else {
+            // Odd index = content between backticks = code
+            nodes.push(_jsx("code", { className: "font-mono text-[11px] text-ink-2 bg-paper-2 px-[5px] py-[1px] rounded-[2px]", children: part }, `code-${i}`));
+        }
+    }
+    return nodes;
+}
+export function AgentCard({ agent, meta, profiles, onBindingChange, saving, locale, }) {
+    const { t } = useTranslation();
+    const isSaving = saving === agent.name;
+    // L2 / L3 / confirm 状态
+    const [isOpen, setIsOpen] = useState(false);
+    const [showTechDetail, setShowTechDetail] = useState(false);
+    const [confirming, setConfirming] = useState(false);
+    // locale 决定取 Zh 还是 En 字段
+    const isZh = locale === "zh-CN";
+    const displayName = isZh ? meta.displayNameZh : meta.displayNameEn;
+    const role = isZh ? meta.roleZh : meta.roleEn;
+    const detail = isZh ? meta.detailZh : meta.detailEn;
+    const impact = isZh ? meta.impactZh : meta.impactEn;
+    const techDetail = isZh ? meta.techDetailZh : meta.techDetailEn;
+    const mvpNote = isZh ? meta.mvpNoteZh : meta.mvpNoteEn;
+    // 段落用 \n\n 分隔
+    const detailParagraphs = detail.split("\n\n").filter((p) => p.length > 0);
+    // 头部点击：toggle isOpen（但点击 toggle 按钮 / confirm-bar / tech-toggle 不触发）
+    const handleHeadClick = (e) => {
+        const target = e.target;
+        if (target.closest("[data-agent-toggle]") ||
+            target.closest("[data-confirm-bar]") ||
+            target.closest("[data-tech-toggle]")) {
+            return;
+        }
+        setIsOpen((prev) => !prev);
+    };
+    // toggle 按钮点击
+    const handleToggleClick = (e) => {
+        e.stopPropagation();
+        if (agent.enabled) {
+            // 当前 on → 要关
+            if (meta.isCore) {
+                // 核心代理：显示内联确认 + 自动展开
+                setConfirming(true);
+                setIsOpen(true);
+            }
+            else {
+                // 非核心代理：直接关
+                onBindingChange(agent.name, agent.runtimeProfileId, false);
+            }
+        }
+        else {
+            // 当前 off → 要开
+            onBindingChange(agent.name, agent.runtimeProfileId, true);
+        }
+    };
+    // 确认停用
+    const handleConfirmOff = (e) => {
+        e.stopPropagation();
+        onBindingChange(agent.name, agent.runtimeProfileId, false);
+        setConfirming(false);
+    };
+    // 取消确认
+    const handleCancelConfirm = (e) => {
+        e.stopPropagation();
+        setConfirming(false);
+    };
+    // tech-toggle 点击
+    const handleTechToggleClick = (e) => {
+        e.stopPropagation();
+        setShowTechDetail((prev) => !prev);
+    };
+    // profile select 变更
+    const handleProfileChange = (e) => {
+        onBindingChange(agent.name, e.target.value, agent.enabled);
+    };
+    return (_jsxs("div", { "data-agent-card": agent.name, className: cn("bg-surface border border-line-2 rounded-[4px] mb-[6px] overflow-hidden transition-colors hover:border-line", !meta.isCore && "border-dashed", !agent.enabled && "opacity-72"), children: [_jsxs("div", { className: "px-[16px] py-[12px] cursor-pointer flex items-center gap-[12px]", onClick: handleHeadClick, role: "button", tabIndex: 0, "aria-expanded": isOpen, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setIsOpen((prev) => !prev);
+                    }
+                }, children: [_jsx("div", { className: statusDotClasses(agent), "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: cn("text-[14px] font-semibold tracking-[-0.005em] flex items-center gap-[8px]", agent.enabled ? "text-ink" : "text-ink-3"), children: [_jsx("span", { children: displayName }), _jsx("span", { className: "font-mono text-[11.5px] text-ink-4 font-normal", children: agent.name })] }), _jsx("div", { className: "text-[12.5px] text-ink-3 mt-[2px] leading-[1.5]", children: role })] }), _jsx("button", { type: "button", "data-agent-toggle": true, onClick: handleToggleClick, disabled: isSaving, "aria-label": agent.enabled
+                            ? t("pages.controlCenter.agentDisabled")
+                            : t("pages.controlCenter.agentEnabled"), className: cn("rounded-[3px] px-[14px] py-[6px] text-[12.5px] font-medium transition-colors disabled:opacity-50", agent.enabled
+                            ? "border border-gov bg-gov text-paper hover:bg-gov-2"
+                            : "border border-line bg-surface text-ink hover:border-line-2"), children: isSaving
+                            ? t("pages.controlCenter.saving")
+                            : agent.enabled
+                                ? t("pages.controlCenter.on")
+                                : t("pages.controlCenter.off") }), _jsx(ChevronRight, { className: cn("w-[14px] h-[14px] text-ink-4 transition-transform shrink-0", isOpen && "rotate-90"), "aria-hidden": "true" })] }), isOpen && (_jsxs("div", { className: "px-[16px] pb-[14px] border-t border-line-2 bg-panel", children: [_jsx("div", { className: "pt-[14px] text-[13px] text-ink-3 leading-[1.62]", children: detailParagraphs.map((para, i) => (_jsx("p", { className: i > 0 ? "mt-2" : undefined, children: renderTextWithCode(para) }, i))) }), mvpNote && (_jsx("div", { className: "mt-3 text-[12px] text-ink-4 font-mono italic", children: mvpNote })), _jsxs("div", { className: cn("mt-[12px] px-[12px] py-[10px] border border-line-2 border-l-[2.5px] rounded-[4px] bg-paper-2 text-[12.5px] text-ink-3 leading-[1.55]", impactBorderClass(meta.impactLevel)), children: [_jsx("span", { className: cn("block mb-[3px] text-[10px] font-mono uppercase tracking-[0.08em] font-medium", impactLabelClass(meta.impactLevel)), children: t("pages.controlCenter.impact.label") }), impact] }), Object.keys(techDetail).length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { "data-tech-toggle": true, className: "mt-[12px] pt-[12px] border-t border-line-2 flex items-center gap-[6px] cursor-pointer text-[11px] text-ink-4 font-mono uppercase tracking-[0.04em] hover:text-ink-2 transition-colors", onClick: handleTechToggleClick, role: "button", tabIndex: 0, "aria-expanded": showTechDetail, onKeyDown: (e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setShowTechDetail((prev) => !prev);
+                                    }
+                                }, children: [_jsx(ChevronRight, { className: cn("w-[12px] h-[12px] transition-transform", showTechDetail && "rotate-90"), "aria-hidden": "true" }), t("pages.controlCenter.techDetail")] }), showTechDetail && (_jsx("div", { className: "mt-2 grid grid-cols-[72px_1fr] gap-x-[14px] gap-y-[6px] text-[12px] leading-[1.55]", children: Object.entries(techDetail).map(([k, v]) => (_jsxs("div", { className: "contents", children: [_jsx("div", { className: "text-ink-4 font-mono text-[10.5px] uppercase tracking-[0.04em] pt-px", children: k }), _jsx("div", { className: "text-ink-3", children: renderTextWithCode(v) })] }, k))) }))] })), _jsxs("div", { className: "mt-[12px] pt-[12px] border-t border-line-2 flex items-center gap-[10px] text-[12px]", children: [_jsx("span", { className: "text-ink-4 font-mono text-[10.5px] uppercase tracking-[0.04em]", children: t("pages.controlCenter.profileLabelShort") }), _jsx("select", { value: agent.runtimeProfileId, onChange: handleProfileChange, disabled: isSaving, className: "font-mono text-[11px] text-ink-2 bg-surface border border-line-2 rounded-[3px] px-2 py-1 cursor-pointer 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))) })] }), confirming && (_jsxs("div", { "data-confirm-bar": true, className: "mt-[10px] px-[12px] py-[10px] border border-danger rounded-[4px] bg-danger/10 text-[12px] text-ink-2 leading-[1.55]", children: [_jsx("div", { children: impact }), _jsxs("div", { className: "mt-2 flex gap-[8px]", children: [_jsx("button", { type: "button", onClick: handleConfirmOff, className: "text-[11.5px] px-[12px] py-[4px] rounded-[3px] border border-transparent bg-danger text-paper font-medium hover:opacity-90 transition-opacity focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.controlCenter.impact.confirmAck") }), _jsx("button", { type: "button", onClick: handleCancelConfirm, className: "text-[11.5px] px-[12px] py-[4px] rounded-[3px] border border-line bg-transparent text-ink-3 hover:border-line-2 transition-colors focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", children: t("pages.controlCenter.impact.confirmCancel") })] })] }))] }))] }));
+}

package/console/dist/ui/pages/control-center/AgentGroup.d.ts

@@ -0,0 +1,26 @@
+import { type AgentGroupMeta } from "../../utils/agent-metadata.js";
+import type { RedactedAgentSummary, RedactedRuntimeProfileSummary } from "../../api.js";
+import { type AgentLocale } from "./AgentCard.js";
+/**
+ * AgentGroup — 依赖分组容器
+ *
+ * 渲染 group header（名称 + 标签 + 提示）+ 该组所有 AgentCard。
+ * 标签样式按 GroupTag（must/recommend/optional/independent）区分。
+ *
+ * rc 合规：
+ * - rc-2/rc-5: 父组件已用 groupAgentsByDependency 过滤未知代理，本组件用
+ *   isKnownAgentName 类型守卫二次校验 agent.name 后取 meta（防御性，不静默）
+ * - rc-9: 若 agents 为空数组，渲染 group header 但显示空状态提示
+ *
+ * 品牌约束：无 translateY / scale hover，无硬编码色值
+ */
+interface AgentGroupProps {
+    groupMeta: AgentGroupMeta;
+    agents: RedactedAgentSummary[];
+    profiles: RedactedRuntimeProfileSummary[];
+    onBindingChange: (agentName: string, runtimeProfile: string, enabled: boolean) => void;
+    saving: string | null;
+    locale: AgentLocale;
+}
+export declare function AgentGroup({ groupMeta, agents, profiles, onBindingChange, saving, locale, }: AgentGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { cn } from "../../../lib/utils.js";
+import { AGENT_METADATA, } from "../../utils/agent-metadata.js";
+import { isKnownAgentName } from "../../utils/control-center-helpers.js";
+import { AgentCard } from "./AgentCard.js";
+/** gtag 样式按 GroupTag 区分 */
+function gtagClasses(tag) {
+    const base = "text-[10px] font-mono px-[7px] py-[2px] rounded-[2px] tracking-[0.02em] font-medium border border-transparent";
+    switch (tag) {
+        case "must":
+            return cn(base, "bg-danger/10 text-danger border-danger/22");
+        case "recommend":
+            return cn(base, "bg-amber/10 text-amber border-amber/22");
+        case "optional":
+            return cn(base, "bg-paper-2 text-ink-4 border-line-2");
+        case "independent":
+            return cn(base, "bg-green/10 text-green border-green/22");
+        default:
+            return base;
+    }
+}
+export function AgentGroup({ groupMeta, agents, profiles, onBindingChange, saving, locale, }) {
+    const { t } = useTranslation();
+    const isZh = locale === "zh-CN";
+    const groupName = isZh ? groupMeta.labelZh : groupMeta.labelEn;
+    const groupTagLabel = isZh ? groupMeta.tagLabelZh : groupMeta.tagLabelEn;
+    const groupHint = isZh ? groupMeta.hintZh : groupMeta.hintEn;
+    // rc-2/rc-5: 先用类型守卫缩窄 agent.name，避免 as 绕过；
+    // 空状态判断基于过滤后的 knownAgents，避免"全部未知时仍渲染 group header 但无卡片"
+    // 用对象级类型谓词让 TS 在后续 map 中正确缩窄 agent.name（Array.filter 对
+    // 子属性的 string 谓词不会传播到元素类型）
+    const knownAgents = agents.filter((agent) => isKnownAgentName(agent.name));
+    return (_jsxs("div", { className: "mb-[20px]", children: [_jsxs("div", { className: "px-[14px] py-[9px] bg-paper-2 border border-line-2 rounded-[4px] flex items-center gap-[10px] mb-[8px]", children: [_jsx("span", { className: "text-[12.5px] font-semibold text-ink-2", children: groupName }), _jsx("span", { className: gtagClasses(groupMeta.tag), children: groupTagLabel }), _jsx("span", { className: "ml-auto text-[11px] text-ink-4 font-mono leading-[1.4] max-w-[32ch] text-right", children: groupHint })] }), knownAgents.length === 0 ? (_jsx("div", { className: "py-2 px-4 text-[12.5px] text-ink-4 italic", children: "\u2014" })) : (knownAgents.map((agent) => {
+                const meta = AGENT_METADATA[agent.name];
+                return (_jsx(AgentCard, { agent: agent, meta: meta, profiles: profiles, onBindingChange: onBindingChange, saving: saving, locale: locale }, agent.name));
+            }))] }));
+}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
@@ -6,9 +6,12 @@ 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 { fetchConfigSummary, fetchConfigCatalog, updateAgentBinding, updateDefaultRuntime, } from "../../api.js";
-import { computeOverallReadiness, groupAgentsByReadiness, redactDiagnosticsForCopy, } from "../../utils/control-center-helpers.js";
+import { computeOverallReadiness, groupAgentsByReadiness, groupAgentsByDependency, isKnownAgentName, redactDiagnosticsForCopy, } from "../../utils/control-center-helpers.js";
 import { enumLabel } from "../../utils/enum-labels.js";
 import { EmpathyObserverCostHint } from "./EmpathyObserverCostHint.js";
+import { WorkflowDiagram } from "./WorkflowDiagram.js";
+import { AgentGroup } from "./AgentGroup.js";
+import { AGENT_GROUPS, AGENT_METADATA, } from "../../utils/agent-metadata.js";
 // ── Runtime validators (H section / ERR-001/005/009/013) ─────────────────────
 function validateSource(raw) {
     if (typeof raw !== "string")
@@ -284,46 +287,70 @@ function readinessTagClasses(readiness) {
     }
 }
 // ── Sub-components ───────────────────────────────────────────────────────────
-function OverallStatusCard({ readiness, agents, }) {
+/**
+ * CompactStatusBar — 紧凑状态条（替代 OverallStatusCard）
+ *
+ * 取自原型 control-center.html 第 153-168 行。一行展示：
+ * 已启用 N/M · 未就绪 N 项 · 核心管道 状态 · [需配置] pill
+ *
+ * 核心管道状态 = core_trio + code_chain 中已启用代理的就绪情况：
+ * - paralyzed: core_trio 任一 disabled 或有 not_ready
+ * - degraded: 有 needs_setup
+ * - ok: 全 ready
+ *
+ * rc-2: 用 Object.hasOwn 守卫 agent.name 查 AGENT_METADATA（无 as 绕过）
+ */
+function CompactStatusBar({ 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;
+    const notReadyCount = agents.filter((a) => a.enabled && a.readiness !== "ready").length;
+    // 核心管道状态：core_trio + code_chain 中已启用代理
+    // rc-2: 用 isKnownAgentName 类型守卫缩窄，不用 as 绕过
+    const coreAgents = agents.filter((a) => {
+        if (!isKnownAgentName(a.name))
+            return false;
+        const meta = AGENT_METADATA[a.name];
+        return meta.group === "core_trio" || meta.group === "code_chain";
+    });
+    const enabledCoreAgents = coreAgents.filter((a) => a.enabled);
+    const coreTrioAgents = coreAgents.filter((a) => {
+        if (!isKnownAgentName(a.name))
+            return false;
+        const meta = AGENT_METADATA[a.name];
+        return meta.group === "core_trio";
+    });
+    const codeChainAgents = coreAgents.filter((a) => {
+        if (!isKnownAgentName(a.name))
+            return false;
+        const meta = AGENT_METADATA[a.name];
+        return meta.group === "code_chain";
+    });
+    const coreTrioAnyDisabled = coreTrioAgents.some((a) => !a.enabled);
+    const codeChainAnyDisabled = codeChainAgents.some((a) => !a.enabled);
+    const coreAnyNotReady = enabledCoreAgents.some((a) => a.readiness === "not_ready");
+    const coreAnyNeedsSetup = enabledCoreAgents.some((a) => a.readiness === "needs_setup");
+    // 状态优先级（per AGENT_METADATA.impactZh）:
+    // - paralyzed: core_trio 任一 disabled 或 enabled 但 not_ready
+    //   （core_trio 是入口，关掉任何一个整个管道瘫痪）
+    // - degraded: code_chain 任一 disabled（降级运行，非瘫痪）
+    //             或 enabled 但 needs_setup
+    // - ok: 全 ready
+    //
+    // needsConfig 标记仅用于 readiness 异常（not_ready / needs_setup），
+    // 不用于主动 disabled — 主动 disable 是 owner 的有意决策，不是配置缺失。
+    let corePipelineKey;
+    const needsConfig = coreAnyNotReady || coreAnyNeedsSetup;
+    if (coreTrioAnyDisabled || coreAnyNotReady) {
+        corePipelineKey = "pages.controlCenter.status.corePipelineParalyzed";
     }
-    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: enumLabel('readiness', readiness, t) }), _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: enumLabel('readiness', agent.readiness, t) }) }), _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") })] }));
+    else if (codeChainAnyDisabled || coreAnyNeedsSetup) {
+        corePipelineKey = "pages.controlCenter.status.corePipelineDegraded";
+    }
+    else {
+        corePipelineKey = "pages.controlCenter.status.corePipelineOk";
+    }
+    return (_jsxs("div", { className: "mt-5 px-[16px] py-[11px] bg-surface border border-line-2 rounded-[4px] flex items-center gap-[16px] text-[12.5px] text-ink-3 flex-wrap", children: [_jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsx("span", { className: "text-ink-4 font-mono text-[11px] uppercase tracking-[0.04em]", children: t("pages.controlCenter.status.enabled") }), _jsxs("span", { className: "text-ink font-semibold", children: [_jsx("span", { className: "font-mono", children: enabledCount }), " /", " ", _jsx("span", { className: "font-mono", children: totalCount })] })] }), _jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsx("span", { className: "text-ink-4 font-mono text-[11px] uppercase tracking-[0.04em]", children: t("pages.controlCenter.status.notReady") }), _jsx("span", { className: "text-ink font-semibold", children: _jsx("span", { className: "font-mono", children: notReadyCount }) })] }), _jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsx("span", { className: "text-ink-4 font-mono text-[11px] uppercase tracking-[0.04em]", children: t("pages.controlCenter.status.corePipeline") }), _jsx("span", { className: "text-ink font-semibold", children: t(corePipelineKey) })] }), needsConfig && (_jsx("span", { className: "ml-auto px-[9px] py-[3px] rounded-[2px] text-[10.5px] font-mono tracking-[0.02em] font-medium border border-amber text-amber bg-amber/10", children: t("pages.controlCenter.status.needsConfig") }))] }));
 }
 function DefaultRuntimeSelector({ currentDefault, profiles, onDefaultChange, saving, }) {
     const { t } = useTranslation();
@@ -369,7 +396,7 @@ function AdvancedDiagnostics({ config, }) {
                                 }) })] }), _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 { t, i18n } = useTranslation();
     const [configData, setConfigData] = useState(null);
     const [catalogData, setCatalogData] = useState(null);
     const [loadingState, setLoadingState] = useState("loading");
@@ -457,7 +484,7 @@ export function ControlCenterPage() {
     };
     const overallReadiness = computeOverallReadiness(diagnostics);
     const availableProfiles = catalogData?.profiles ?? configData.runtimeProfiles;
-    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.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 }) }), (() => {
+    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.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(WorkflowDiagram, {}), _jsx(CompactStatusBar, { readiness: overallReadiness, agents: configData.agents }), (() => {
                     const empathyAgent = configData.agents.find((a) => a.name === "empathyObserver" && a.enabled);
                     if (!empathyAgent)
                         return null;
@@ -471,5 +498,14 @@ export function ControlCenterPage() {
                     if (acked)
                         return null;
                     return (_jsx(EmpathyObserverCostHint, { agent: empathyAgent, profiles: availableProfiles }));
-                })(), _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 }) })] }) }));
+                })(), _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") }), (() => {
+                            const { groups, unknown } = groupAgentsByDependency(configData.agents);
+                            const locale = i18n.language.startsWith("en")
+                                ? "en"
+                                : "zh-CN";
+                            return (_jsxs(_Fragment, { children: [AGENT_GROUPS.map((groupMeta) => (_jsx(AgentGroup, { groupMeta: groupMeta, agents: groups[groupMeta.id], profiles: availableProfiles, onBindingChange: handleBindingChange, saving: savingAgent, locale: locale }, groupMeta.id))), unknown.length > 0 && (_jsx("div", { className: "mt-3 px-3 py-2 border border-amber/30 border-l-2 border-l-amber rounded-[4px] bg-amber/10 text-[12.5px] text-ink-3", children: t("pages.controlCenter.unknownAgentsWarning", {
+                                            count: unknown.length,
+                                            names: unknown.map((a) => a.name).join(", "),
+                                        }) }))] }));
+                        })()] }), _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 }) }), _jsx("p", { className: "mt-10 pt-[18px] border-t border-line-2 text-ink-4 text-[12px] leading-[1.6] max-w-[60ch] font-mono", children: t("pages.controlCenter.footerNote") })] }) }));
 }

package/console/dist/ui/pages/control-center/WorkflowDiagram.d.ts

@@ -0,0 +1,17 @@
+/**
+ * WorkflowDiagram — PD 行为回路 4 阶段图
+ *
+ * 纯展示组件，所有文本来自 i18n。Phase 03（Owner 审批）用虚线边框 +
+ * gov 色调高亮，强调"人在治理中心"（品牌 Principle 3）。
+ *
+ * 视觉规格取自 design-prototype/control-center.html 第 115-151 行。
+ *
+ * rc 合规：
+ * - rc-1: 纯展示组件，消费 i18n 字符串（已受控），无 untrusted 数据
+ * - rc-8: 无 JSON 序列化路径
+ *
+ * 品牌约束（PRI-CR1 B.4.4）：
+ * - 禁止 translateY / scale hover 效果（仅 rotate 允许用于箭头朝向）
+ * - 无硬编码十六进制色值，全用 token
+ */
+export declare function WorkflowDiagram(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { ChevronRight, RefreshCw } from "lucide-react";
+/**
+ * WorkflowDiagram — PD 行为回路 4 阶段图
+ *
+ * 纯展示组件，所有文本来自 i18n。Phase 03（Owner 审批）用虚线边框 +
+ * gov 色调高亮，强调"人在治理中心"（品牌 Principle 3）。
+ *
+ * 视觉规格取自 design-prototype/control-center.html 第 115-151 行。
+ *
+ * rc 合规：
+ * - rc-1: 纯展示组件，消费 i18n 字符串（已受控），无 untrusted 数据
+ * - rc-8: 无 JSON 序列化路径
+ *
+ * 品牌约束（PRI-CR1 B.4.4）：
+ * - 禁止 translateY / scale hover 效果（仅 rotate 允许用于箭头朝向）
+ * - 无硬编码十六进制色值，全用 token
+ */
+export function WorkflowDiagram() {
+    const { t } = useTranslation();
+    const phases = [
+        {
+            num: "01",
+            nameKey: "pages.controlCenter.workflow.phase01",
+            descKey: "pages.controlCenter.workflow.phase01Desc",
+            isHuman: false,
+        },
+        {
+            num: "02",
+            nameKey: "pages.controlCenter.workflow.phase02",
+            descKey: "pages.controlCenter.workflow.phase02Desc",
+            isHuman: false,
+        },
+        {
+            num: "03",
+            nameKey: "pages.controlCenter.workflow.phase03",
+            descKey: "pages.controlCenter.workflow.phase03Desc",
+            isHuman: true,
+        },
+        {
+            num: "04",
+            nameKey: "pages.controlCenter.workflow.phase04",
+            descKey: "pages.controlCenter.workflow.phase04Desc",
+            isHuman: false,
+        },
+    ];
+    return (_jsxs("div", { className: "mt-8 bg-surface border border-line-2 rounded-[8px] px-[22px] py-[18px]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4", children: [_jsx("span", { className: "text-[11px] font-mono uppercase tracking-[0.1em] text-ink-4 font-medium", children: t("pages.controlCenter.workflow.title") }), _jsx("span", { className: "text-[11px] font-mono uppercase tracking-[0.1em] text-ink-4", children: t("pages.controlCenter.workflow.subtitle") }), _jsx("span", { className: "flex-1 h-px bg-line-2", "aria-hidden": "true" })] }), _jsx("div", { className: "grid grid-cols-[1fr_24px_1fr_24px_1fr_24px_1fr] items-stretch", children: phases.map((phase, idx) => (_jsxs("div", { className: "contents", children: [_jsxs("div", { className: phase.isHuman
+                                ? "px-[10px] py-[12px] text-center flex flex-col gap-[5px] justify-center border border-dashed border-gov bg-gov/10 rounded-[4px]"
+                                : "px-[10px] py-[12px] text-center flex flex-col gap-[5px] justify-center bg-paper-2 border border-line-2 rounded-[4px]", children: [_jsx("div", { className: "text-[10px] font-mono text-ink-4 tracking-[0.06em]", children: phase.num }), _jsx("div", { className: phase.isHuman
+                                        ? "text-[14px] font-semibold text-gov tracking-[-0.005em]"
+                                        : "text-[14px] font-semibold text-ink tracking-[-0.005em]", children: t(phase.nameKey) }), _jsx("div", { className: phase.isHuman
+                                        ? "text-[11.5px] text-gov-2 italic leading-[1.45] whitespace-pre-line"
+                                        : "text-[11.5px] text-ink-3 leading-[1.45] whitespace-pre-line", children: t(phase.descKey) })] }), idx < phases.length - 1 && (_jsx("div", { className: "flex items-center justify-center text-ink-4 font-mono", children: _jsx(ChevronRight, { className: "w-[18px] h-[18px]", "aria-hidden": "true" }) }))] }, phase.num))) }), _jsxs("div", { className: "mt-[14px] pt-[12px] border-t border-line-2 flex items-center gap-[10px] text-[11.5px] text-ink-4 font-mono leading-[1.5]", children: [_jsx(RefreshCw, { className: "w-[14px] h-[14px] text-gov shrink-0", "aria-hidden": "true" }), _jsx("span", { children: t("pages.controlCenter.workflow.loopHint") })] })] }));
+}

package/console/dist/ui/pages/intent/IntentOnboarding.d.ts

@@ -0,0 +1,67 @@
+/**
+ * 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 { type IntentDocSections } from "@principles/core/runtime-v2/intent-browser";
+interface OnboardingModalProps {
+    /** Called when user completes all 5 steps with the assembled sections */
+    onComplete: (sections: IntentDocSections) => void;
+    /** Called when user clicks "Skip" — creates empty template without wizard */
+    onSkip: () => void;
+    /** Called when user closes the modal without completing */
+    onClose: () => void;
+}
+export declare function OnboardingModal({ onComplete, onSkip, onClose }: OnboardingModalProps): import("react/jsx-runtime").JSX.Element;
+interface IntentEditorProps {
+    /** Initial content to populate the editor (current INTENT.md content) */
+    initialContent: string;
+    /** Called after successful save — parent should refresh the summary */
+    onSaved: () => void;
+    /** Called when user cancels editing — parent should hide the editor */
+    onCancel: () => void;
+    /** Language for bilingual INTENT.md */
+    lang: 'zh-CN' | 'en';
+}
+export declare function IntentEditor({ initialContent, onSaved, onCancel, lang }: IntentEditorProps): import("react/jsx-runtime").JSX.Element;
+interface CreateIntentButtonProps {
+    /**
+     * Called after INTENT.md is successfully created (or already existed).
+     * Receives `openEditor` so the parent (IntentPage) can split the two
+     * concerns of the create flow:
+     *   - always: refresh the summary so NotFoundBanner updates to sections
+     *   - optionally: open the inline editor immediately afterwards
+     *
+     * PR-1083 review (CodeRabbit A5): previously this was `() => void` and only
+     * invoked when openEditor was true — so the Skip path left NotFoundBanner
+     * showing stale "file not found" state after a successful create.
+     */
+    onCreated: (openEditor: boolean) => void;
+    /** If true, show onboarding wizard before creating. If false, create directly. */
+    showOnboarding?: boolean;
+    /** Language for bilingual INTENT.md */
+    lang: 'zh-CN' | 'en';
+}
+export declare function CreateIntentButton({ onCreated, showOnboarding, lang }: CreateIntentButtonProps): import("react/jsx-runtime").JSX.Element;
+interface EditButtonProps {
+    onClick: () => void;
+    loading?: boolean;
+}
+export declare function EditButton({ onClick, loading }: EditButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};