create-principles-disciple 1.94.0 → 1.96.0

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,8 +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")
@@ -76,7 +80,18 @@ function validateRedactedRuntimeProfileSummary(raw) {
     const apiKeyEnv = Object.hasOwn(raw, "apiKeyEnv") && typeof raw.apiKeyEnv === "string"
         ? raw.apiKeyEnv
         : undefined;
-    return { id, type, label, apiKeyEnv, readiness };
+    // provider/model are optional (set by backend redactPdConfig for both
+    // pi-ai and openclaw profiles). Extract so EmpathyObserverCostHint can
+    // show the active model without parsing the label string. Aligns with
+    // the canonical validator in validators.ts (EP-01: validate fields that
+    // actually exist in the target type).
+    const provider = Object.hasOwn(raw, "provider") && typeof raw.provider === "string"
+        ? raw.provider
+        : undefined;
+    const model = Object.hasOwn(raw, "model") && typeof raw.model === "string"
+        ? raw.model
+        : undefined;
+    return { id, type, label, apiKeyEnv, provider, model, readiness };
 }
 function validateRedactedAgentSummary(raw) {
     if (!isRecord(raw))
@@ -272,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();
@@ -357,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");
@@ -445,5 +484,28 @@ 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 }) }), _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 }) })] }) }));
+    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;
+                    let acked = false;
+                    try {
+                        acked = localStorage.getItem("pd.empathyObserver.costAck") === "true";
+                    }
+                    catch {
+                        // localStorage unavailable (privacy mode) → not acked → render
+                    }
+                    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") }), (() => {
+                            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/EmpathyObserverCostHint.d.ts

@@ -0,0 +1,28 @@
+import type { RedactedAgentSummary, RedactedRuntimeProfileSummary } from "../../api.js";
+/**
+ * EmpathyObserverCostHint — spec 2026-06-27 §4
+ *
+ * A克制、可关闭的提示条，告知 Owner：启用 empathyObserver 后会有持续的
+ * LLM 调用与 token 成本，以及当前使用的 provider/model。
+ *
+ * 双层 gate（spec §4.1）：
+ * - Gate 1（父组件 ControlCenterPage）：仅当 empathyObserver 已启用且
+ *   localStorage 未 ack 时才挂载本组件。
+ * - Gate 2（本组件）：维护 visible 内部状态，承载"知道了"dismiss 行为。
+ *
+ * 该组件不修改后端任何代码、不修改 prompt.ts、不修改 resolveEmpathyObserver。
+ * 纯前端 localStorage 控制，清掉就重新出现，fail-open（隐私模式仍可见）。
+ *
+ * ERR entries (spec §8):
+ * - ERR-001/ERR-005: 消费 ControlCenterPage 已经过 type guard 的数据，无 untrusted 原始数据
+ * - ERR-009/ERR-010: provider/model 取不到时用 '—' 显式降级
+ * - ERR-013: localStorage 读取与写入用 try/catch 包裹
+ */
+interface EmpathyObserverCostHintProps {
+    /** empathyObserver agent row (already validated by parent) */
+    agent: RedactedAgentSummary;
+    /** runtime profiles — used to resolve provider/model */
+    profiles: RedactedRuntimeProfileSummary[];
+}
+export declare function EmpathyObserverCostHint({ agent, profiles, }: EmpathyObserverCostHintProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { enumLabel } from "../../utils/enum-labels.js";
+const COST_ACK_KEY = "pd.empathyObserver.costAck";
+export function EmpathyObserverCostHint({ agent, profiles, }) {
+    const { t } = useTranslation();
+    // Gate 2: dismiss 后不再渲染。localStorage ack 时初始即隐藏。
+    const [visible, setVisible] = useState(() => {
+        try {
+            return localStorage.getItem(COST_ACK_KEY) !== "true";
+        }
+        catch {
+            // 隐私模式 / localStorage 不可用 → fail-open：默认可见
+            return true;
+        }
+    });
+    if (!visible)
+        return null;
+    // Resolve provider/model from the agent's runtime profile.
+    // agent.runtimeProfileId is always present (validated by parent).
+    const profile = profiles.find((p) => p.id === agent.runtimeProfileId);
+    const provider = profile?.provider ?? "—";
+    const model = profile?.model ?? "—";
+    const handleAck = () => {
+        try {
+            localStorage.setItem(COST_ACK_KEY, "true");
+        }
+        catch {
+            // 隐私模式等：写入失败不影响 dismiss 体验，下次仍会出现（fail-open）
+        }
+        setVisible(false);
+    };
+    return (_jsxs("div", { className: "bg-surface/60 border border-amber/20 border-l-2 border-l-amber rounded-[6px] px-3 py-2 mt-4", children: [_jsx("p", { className: "text-ink-2 text-[14px] leading-relaxed", children: t("pages.controlCenter.empathyCostHint.body", {
+                    provider,
+                    model,
+                }) }), _jsx("p", { className: "text-ink-3 text-[12px] mt-1 leading-relaxed", children: t("pages.controlCenter.empathyCostHint.muted") }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", onClick: handleAck, 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", "aria-label": t("pages.controlCenter.empathyCostHint.ack"), children: t("pages.controlCenter.empathyCostHint.ack") }) }), _jsx("span", { className: "sr-only", children: enumLabel("featureId", "empathy_observer", t) })] }));
+}

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/debt/DebtPage.js

@@ -1,5 +1,222 @@
-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";
 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 { ShinyText } from "../../components/ui/shiny-text.js";
+import { Button } from "../../components/ui/button.js";
+import { AlertTriangle, Archive, Trash2 } from "lucide-react";
+import { fetchPrinciples, fetchAllActivations, fetchGovernanceQueue, archivePrinciple, unarchivePrinciple, disableActivation, } from "../../api.js";
+import { validatePrinciplesList, validateActivations, validateGovernanceQueue, } from "../../utils/validators.js";
+// ── Debt Card Component (Handles its own J.1 confirmation state) ──────────────
+function DebtCard({ item, onArchive, onDeactivate, isProcessing, }) {
+    const { t } = useTranslation();
+    const [confirmAction, setConfirmAction] = useState(null);
+    const [selectedActivationId, setSelectedActivationId] = useState(null);
+    const handleArchiveClick = () => {
+        setConfirmAction("archive");
+    };
+    const handleDeactivateClick = (activationId) => {
+        setSelectedActivationId(activationId);
+        setConfirmAction("deactivate");
+    };
+    const handleCancel = () => {
+        setConfirmAction(null);
+        setSelectedActivationId(null);
+    };
+    const handleConfirm = async () => {
+        if (confirmAction === "archive") {
+            await onArchive(item.id);
+        }
+        else if (confirmAction === "deactivate" && selectedActivationId) {
+            await onDeactivate(selectedActivationId, item.id);
+        }
+        setConfirmAction(null);
+        setSelectedActivationId(null);
+    };
+    // Render natural language reason based on debt type
+    const renderReason = () => {
+        if (item.type === "never_activated") {
+            return (_jsx("span", { className: "text-ink-2", children: t("pages.debt.reasonNeverActivated") }));
+        }
+        if (item.type === "stagnant") {
+            return (_jsxs("span", { className: "text-ink-2", children: [t("pages.debt.reasonStagnant"), item.daysSince !== undefined && (_jsxs("span", { className: "text-amber font-semibold ml-1", children: ["(", t("pages.debt.daysSinceAgo", { count: item.daysSince }), ")"] }))] }));
+        }
+        return null;
+    };
+    const isStagnant = item.type === "stagnant";
+    return (_jsx("article", { className: "p-5 bg-panel border border-line rounded-[6px] hover:border-line-2 transition-colors relative", "aria-label": t("pages.debt.principleAriaLabel", { id: item.id }), children: _jsxs("div", { className: "flex flex-col md:flex-row md:items-start gap-4", children: [_jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-mono text-[11px] uppercase px-2 py-0.5 bg-line rounded text-ink-3", children: item.id }), _jsx("span", { className: `font-mono text-[11px] uppercase px-2 py-0.5 rounded ${isStagnant
+                                        ? "bg-amber/10 text-amber"
+                                        : "bg-danger/10 text-danger"}`, children: isStagnant ? t("pages.focus.summaryStagnation") : t("pages.sidebar.debt") })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-ink text-[15px] font-medium leading-relaxed", children: item.text }), item.triggerPattern && (_jsxs("p", { className: "text-ink-3 text-[13px] font-mono leading-relaxed", children: [t("principles.detail.triggerLabel", { defaultValue: "Trigger:" }), " ", item.triggerPattern] }))] }), _jsxs("div", { className: "flex items-start gap-2 pt-1", children: [_jsx(AlertTriangle, { className: "w-4 h-4 text-amber shrink-0 mt-0.5", "aria-hidden": "true" }), _jsxs("div", { className: "text-[13px] leading-relaxed", children: [_jsxs("span", { className: "font-semibold text-ink-3", children: [t("pages.debt.suggestedAction"), ": "] }), renderReason()] })] })] }), _jsx("div", { className: "flex flex-col gap-2 shrink-0 md:w-48", children: !confirmAction ? (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: handleArchiveClick, disabled: isProcessing, className: "w-full inline-flex items-center justify-center gap-1.5 border border-line bg-surface text-ink hover:border-line-2 transition-colors rounded-[3px] px-[14px] py-[6px] text-[12.5px] focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", "data-testid": `archive-btn-${item.id}`, children: [_jsx(Archive, { className: "w-4 h-4 text-ink-3", "aria-hidden": "true" }), t("pages.debt.actionArchive")] }), item.activeActivationRecords && item.activeActivationRecords.length > 0 ? (item.activeActivationRecords.map((ar) => (_jsxs("button", { onClick: () => handleDeactivateClick(ar.id), disabled: isProcessing, className: "w-full inline-flex items-center justify-center gap-1.5 border border-danger/20 bg-surface text-danger hover:bg-danger/5 transition-colors rounded-[3px] px-[14px] py-[6px] text-[12.5px] focus-visible:outline-2 focus-visible:outline-gov focus-visible:outline-offset-2", "data-testid": `deactivate-btn-${ar.id}`, children: [_jsx(Trash2, { className: "w-4 h-4 text-danger/80", "aria-hidden": "true" }), t("pages.debt.actionDeactivate"), " (", ar.channel, ")"] }, ar.id)))) : (_jsx("button", { disabled: true, className: "w-full inline-flex items-center justify-center gap-1.5 border border-line bg-surface/50 text-ink-4 cursor-not-allowed rounded-[3px] px-[14px] py-[6px] text-[12.5px]", title: t("pages.debt.demoteTooltip"), children: t("pages.debt.actionKeep") }))] })) : (_jsxs("div", { className: "flex flex-col gap-2 p-3 bg-surface border border-amber/20 rounded-[4px] w-full", role: "alert", "data-testid": `confirm-bar-${item.id}`, children: [_jsx("p", { className: "text-ink-2 text-[12px] leading-relaxed", children: confirmAction === "archive"
+                                    ? t("pages.debt.confirmArchive")
+                                    : t("pages.debt.confirmDeactivate") }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", onClick: handleConfirm, disabled: isProcessing, className: "flex-1 text-[12px] py-1", "data-testid": `confirm-btn-${item.id}`, children: t("common.confirm") }), _jsx(Button, { variant: "outline", size: "sm", onClick: handleCancel, className: "flex-1 text-[12px] py-1", children: t("common.cancel") })] })] })) })] }) }));
+}
+// ── Main Page Component ──────────────────────────────────────────────────────
 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" })] }));
+    const { t } = useTranslation();
+    const [loadingState, setLoadingState] = useState("loading");
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [debtItems, setDebtItems] = useState([]);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const loadData = useCallback(async () => {
+        setLoadingState("loading");
+        setErrorMessage(null);
+        try {
+            const [principlesRes, activationsRes, govQueueRes] = await Promise.all([
+                fetchPrinciples("all"),
+                fetchAllActivations(),
+                fetchGovernanceQueue(),
+            ]);
+            // Handle raw response validation (EP-01 / EP-03)
+            if (!principlesRes.success) {
+                setLoadingState("error");
+                setErrorMessage(principlesRes.error || "Failed to fetch principles");
+                return;
+            }
+            if (!activationsRes.success) {
+                setLoadingState("error");
+                setErrorMessage(activationsRes.error || "Failed to fetch activations");
+                return;
+            }
+            if (!govQueueRes.success) {
+                setLoadingState("error");
+                setErrorMessage(govQueueRes.error || "Failed to fetch governance queue");
+                return;
+            }
+            const validatedPrinciples = validatePrinciplesList(principlesRes.data);
+            const validatedActivations = validateActivations(activationsRes.data);
+            const validatedGovQueue = validateGovernanceQueue(govQueueRes.data);
+            if (!validatedPrinciples || !validatedActivations || !validatedGovQueue) {
+                setLoadingState("error");
+                setErrorMessage("Data validation failed: unexpected response shape");
+                return;
+            }
+            // Filter and build the debt list (no-complexity heuristics)
+            const allPrinciples = validatedPrinciples.principles;
+            const allActivations = validatedActivations.activations;
+            const stagnationSignals = validatedGovQueue.stagnationSignals;
+            const items = [];
+            // 1. Identify "Never Activated" Principles
+            // An active principle with status === 'active' is never activated if it has no active activations.
+            const activePrinciples = allPrinciples.filter((p) => p.status === "active");
+            for (const p of activePrinciples) {
+                const principleActivations = allActivations.filter((a) => a.principleId === p.id);
+                const hasActiveActivation = principleActivations.some((a) => a.status === "active");
+                if (!hasActiveActivation) {
+                    // It qualifies as never-activated debt
+                    items.push({
+                        id: p.id,
+                        text: p.text,
+                        triggerPattern: p.triggerPattern,
+                        type: "never_activated",
+                        status: p.status,
+                        activeActivationRecords: principleActivations.filter((a) => a.status === "active"),
+                    });
+                }
+            }
+            // 2. Identify "Stagnant" Principle Approvals (stagnant for > 7 days)
+            for (const signal of stagnationSignals) {
+                // Skip if we already added it (should not overlap, but to be safe)
+                if (items.some((item) => item.id === signal.principleId)) {
+                    continue;
+                }
+                const p = allPrinciples.find((p) => p.id === signal.principleId);
+                if (p) {
+                    items.push({
+                        id: p.id,
+                        text: p.text,
+                        triggerPattern: p.triggerPattern,
+                        type: "stagnant",
+                        daysSince: signal.daysSince,
+                        status: p.status,
+                    });
+                }
+            }
+            setDebtItems(items);
+            setLoadingState("loaded");
+        }
+        catch (e) {
+            setLoadingState("error");
+            setErrorMessage(e instanceof Error ? e.message : String(e));
+        }
+    }, []);
+    useEffect(() => {
+        loadData();
+    }, [loadData]);
+    // Archive Action: calls POST /api/principles/:id/archive and triggers J.2 Undo toast
+    const handleArchive = async (principleId) => {
+        setIsProcessing(true);
+        const result = await archivePrinciple(principleId);
+        if (result.success) {
+            // Remove it from the local view immediately
+            setDebtItems((prev) => prev.filter((item) => item.id !== principleId));
+            // J.2 Undo Toast: 5 seconds countdown action link
+            toast.success(t("pages.debt.archiveSuccess"), {
+                description: t("pages.activation.disableSuccessDescription", { id: principleId, defaultValue: `Principle ${principleId} archived` }),
+                action: {
+                    label: t("pages.debt.undoAction"),
+                    onClick: async () => {
+                        const undoResult = await unarchivePrinciple(principleId);
+                        if (undoResult.success) {
+                            toast.success(t("pages.debt.undoSuccess"));
+                            loadData(); // Reload to restore the principle in list
+                        }
+                        else {
+                            toast.error(t("pages.debt.undoFailed"));
+                        }
+                    },
+                },
+                duration: 5000,
+            });
+        }
+        else {
+            toast.error(t("pages.debt.archiveFailed"), {
+                description: result.error,
+                duration: 8000,
+            });
+        }
+        setIsProcessing(false);
+    };
+    // Deactivate Action: calls POST /api/v1/activations/:id/disable
+    const handleDeactivate = async (activationId, principleId) => {
+        setIsProcessing(true);
+        const result = await disableActivation(activationId);
+        if (result.success) {
+            // Update local state by filtering out this deactivated record
+            setDebtItems((prev) => prev
+                .map((item) => {
+                if (item.id !== principleId)
+                    return item;
+                const updatedActivations = item.activeActivationRecords?.filter((ar) => ar.id !== activationId);
+                return {
+                    ...item,
+                    activeActivationRecords: updatedActivations,
+                };
+            }));
+            toast.success(t("pages.debt.deactivateSuccess"), {
+                description: t("pages.activation.disableSuccessDescription", { id: principleId }),
+                duration: 5000,
+            });
+            loadData(); // reload fresh state
+        }
+        else {
+            toast.error(t("pages.debt.deactivateFailed"), {
+                description: result.error,
+                duration: 8000,
+            });
+        }
+        setIsProcessing(false);
+    };
+    // ── Loading state ──────────────────────────────────────────────────────────
+    if (loadingState === "loading") {
+        return (_jsx(PageShell, { children: _jsx(PageLoading, { cardCount: 3, label: t("common.loading") }) }));
+    }
+    // ── Error state (ERR-002: degradation with explanation) ────────────────────
+    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.debt.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.debt.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.debt.loadError") }), errorMessage && (_jsx("p", { className: "mt-2 text-ink-4 text-[13px] font-mono", children: errorMessage }))] })] }));
+    }
+    // ── Loaded state ───────────────────────────────────────────────────────────
+    return (_jsx(PageShell, { children: _jsxs("div", { className: "animate-[pdFadeIn_400ms_ease-out] space-y-6", children: [_jsxs("div", { children: [_jsx("div", { className: "font-mono text-[12px] tracking-[0.14em] text-ink-3 uppercase mb-3", children: t("pages.debt.eyebrow") }), _jsx(ShinyText, { as: "h1", className: "text-[29px] font-semibold tracking-tight text-ink mb-2", duration: 4.5, brightness: 0.5, disabled: debtItems.length === 0, children: t("pages.debt.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed", children: t("pages.debt.subtitle") })] }), _jsx("section", { "aria-label": t("pages.debt.listAriaLabel"), className: "space-y-[14px]", children: debtItems.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(SectionTitle, { id: "section-debt-list", children: [t("pages.sidebar.debt"), " (", debtItems.length, ")"] }), _jsx("div", { className: "space-y-[14px]", children: debtItems.map((item) => (_jsx(DebtCard, { item: item, onArchive: handleArchive, onDeactivate: handleDeactivate, isProcessing: isProcessing }, `${item.id}-${item.type}`))) })] })) : (_jsxs("div", { className: "p-8 text-center bg-panel border border-line border-dashed rounded-[6px] space-y-3", role: "status", children: [_jsx("p", { className: "text-ink-2 font-medium text-[16px]", children: t("pages.debt.emptyTitle") }), _jsx("p", { className: "text-ink-3 text-[13px] max-w-[500px] mx-auto leading-relaxed", children: t("pages.debt.emptyDescription") })] })) })] }) }));
 }

package/console/dist/ui/pages/focus/FocusPage.js

@@ -7,6 +7,7 @@ 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 { DailyThoughtCard } from "../../components/focus/daily-thought-card.js";
+import { ShinyText } from "../../components/ui/shiny-text.js";
 import { fetchGovernanceQueue, fetchApprovalsGrouped, approveApproval, rejectApproval, editApproval, } from "../../api.js";
 export function summarizeDecisionResults(results) {
     const failures = results.filter((result) => !result.success);
@@ -414,7 +415,7 @@ export function FocusPage() {
     // Map codes to i18n text
     const stateReason = getStateReasonText(stateReasonCode, t, pendingCount);
     const nextAction = getNextActionText(nextActionCode, t);
-    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.focus.eyebrow") }), _jsx("h1", { className: "text-[29px] font-semibold tracking-tight text-ink mb-2", children: t("pages.focus.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.focus.subtitle") }), _jsxs("div", { className: "mb-7 px-[18px] py-[14px] bg-panel border border-line rounded-[6px]", children: [_jsx("div", { className: "flex items-center gap-2 mb-1", children: _jsx("span", { className: `inline-flex items-center rounded-[2px] px-[7px] py-1 font-mono text-[11px] uppercase ${governanceState === "owner_review_ready"
+    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.focus.eyebrow") }), _jsx(ShinyText, { as: "h1", className: "text-[29px] font-semibold tracking-tight text-ink mb-2", duration: 4.5, brightness: 0.5, disabled: pendingCount === 0, children: t("pages.focus.title") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[760px] leading-relaxed mb-7", children: t("pages.focus.subtitle") }), _jsxs("div", { className: "mb-7 px-[18px] py-[14px] bg-panel border border-line rounded-[6px]", children: [_jsx("div", { className: "flex items-center gap-2 mb-1", children: _jsx("span", { className: `inline-flex items-center rounded-[2px] px-[7px] py-1 font-mono text-[11px] uppercase ${governanceState === "owner_review_ready"
                                     ? "bg-gov/10 text-gov border border-gov/20"
                                     : governanceState === "degraded"
                                         ? "bg-amber/10 text-amber border border-amber/20"