create-principles-disciple 1.145.34 → 1.145.36

package/console/dist/ui/pages/principles/PrinciplesPage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Link, useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { PageShell } from "../../components/layout/page-shell.js";
 import { SectionTitle } from "../../components/layout/section-title.js";
@@ -9,6 +9,7 @@ import { Skeleton } from "../../components/ui/skeleton.js";
 import { ShinyText } from "../../components/ui/shiny-text.js";
 import { fetchPrinciples, fetchApprovalsGrouped, fetchOwnerDecisionLibrary, } from "../../api.js";
 import { enumLabel } from "../../utils/enum-labels.js";
+import { splitReadingTitleBody, truncateByCodePoints } from "../../utils/reading-layout.js";
 import { formatDate } from "../../utils/format-date.js";
 import { PrinciplesViewNav } from "./PrinciplesViewNav.js";
 // ── Map principle status to review status ───────────────────────────────────
@@ -140,7 +141,6 @@ function validateApprovalsGrouped(data) {
 // ── Component ───────────────────────────────────────────────────────────────
 export function PrinciplesPage() {
     const { t, i18n } = useTranslation("pages");
-    const navigate = useNavigate();
     const [principles, setPrinciples] = useState([]);
     const [approvalGroups, setApprovalGroups] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -148,20 +148,29 @@ export function PrinciplesPage() {
     // PRI-558: summary powers the metrics bar (already returned by /api/principles)
     const [summary, setSummary] = useState(null);
     // Search / filter / sort
-    const [search, setSearch] = useState("");
-    const [statusFilter, setStatusFilter] = useState("all");
-    const [sortBy, setSortBy] = useState("updatedAt");
+    const [searchParams, setSearchParams] = useSearchParams();
+    const updateQuery = (key, value) => { const next = new URLSearchParams(searchParams); next.set(key, value); setSearchParams(next, { replace: true, preventScrollReset: true }); };
+    const search = searchParams.get('q') ?? '';
+    const setSearch = (value) => updateQuery('q', value);
+    const statusParam = searchParams.get('status');
+    const statusFilter = statusParam === 'pending' || statusParam === 'candidate' || statusParam === 'approved' || statusParam === 'rejected' || statusParam === 'parked' ? statusParam : 'all';
+    const setStatusFilter = (value) => updateQuery('status', value);
+    const sortBy = searchParams.get('sort') === 'createdAt' ? 'createdAt' : 'updatedAt';
+    const setSortBy = (value) => updateQuery('sort', value);
     // PRI-629 (INV-02): 默认展示全部 — candidate 是生命周期而非待办,
     // "只看待决策"不再作为默认视图 (真实决策在治理焦点)。
-    const [filterMode, setFilterMode] = useState('all');
+    const filterMode = searchParams.get('mode') === 'actionable' ? 'actionable' : 'all';
+    const setFilterMode = (value) => updateQuery('mode', value);
     const [categories, setCategories] = useState();
     // Owner Decision Experience v1: backend semantic titles + decision states
     // (display-only — the page never re-derives decision qualification).
     const [ownerDecisionLibrary, setOwnerDecisionLibrary] = useState(null);
     // PRI-956 (F15, D3): runtime status cannot be confirmed when set
     const [revocationUnavailable, setRevocationUnavailable] = useState(null);
+    const requestEpoch = useRef(0);
     // Fetch data
     const loadData = useCallback(async () => {
+        const epoch = ++requestEpoch.current;
         setLoading(true);
         setError(null);
         try {
@@ -170,6 +179,8 @@ export function PrinciplesPage() {
                 fetchApprovalsGrouped(),
                 fetchOwnerDecisionLibrary(),
             ]);
+            if (epoch !== requestEpoch.current)
+                return;
             setOwnerDecisionLibrary(dResult.success && dResult.data ? dResult.data : null);
             if (!pResult.success) {
                 setError(pResult.error ?? "Failed to load principles");
@@ -191,14 +202,18 @@ export function PrinciplesPage() {
             setApprovalGroups(aData?.groups ?? []);
         }
         catch (err) {
+            if (epoch !== requestEpoch.current)
+                return;
             setError(err instanceof Error ? err.message : "Unknown error");
         }
         finally {
-            setLoading(false);
+            if (epoch === requestEpoch.current)
+                setLoading(false);
         }
     }, [filterMode]);
     useEffect(() => {
-        loadData();
+        void loadData();
+        return () => { requestEpoch.current++; };
     }, [loadData]);
     // Build approval lookup
     const approvalByPrinciple = new Map();
@@ -219,7 +234,7 @@ export function PrinciplesPage() {
         const decision = ownerDecisionLibrary?.entries[p.id];
         const semanticTitle = decision?.learnedPrinciple.status === 'known' ? decision.learnedPrinciple.text : undefined;
         // PRI-332: Determine display title with bounded fallback for unreadable titles
-        const rawTitle = p.triggerPattern || p.text.slice(0, 80);
+        const rawTitle = p.triggerPattern || truncateByCodePoints(p.text, 80);
         const detectedLang = p.detectedLanguage ?? 'unknown';
         const readWarningCode = p.readabilityWarningCode;
         let displayTitle = rawTitle;
@@ -236,7 +251,8 @@ export function PrinciplesPage() {
         }
         return {
             principleId: p.id,
-            title: displayTitle,
+            title: splitReadingTitleBody(displayTitle).title,
+            searchText: semanticTitle ?? rawTitle,
             originalTitle: rawTitle,
             titleUsedFallback: usedFallback,
             text: p.text,
@@ -260,7 +276,7 @@ export function PrinciplesPage() {
             return false;
         if (search) {
             const q = search.toLowerCase();
-            if (!c.text.toLowerCase().includes(q) && !c.title.toLowerCase().includes(q))
+            if (!c.text.toLowerCase().includes(q) && !c.title.toLowerCase().includes(q) && !c.searchText.toLowerCase().includes(q))
                 return false;
         }
         return true;
@@ -287,32 +303,25 @@ export function PrinciplesPage() {
                                         : "bg-surface text-ink-3 border-line hover:border-line-2"), children: [t("principles.filterAll", { defaultValue: "Show All" }), categories ? ` (${Object.values(categories).reduce((a, b) => a + b, 0)})` : ''] })] }), _jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: t("principles.searchPlaceholder"), className: "flex-1 min-w-[200px] border border-line rounded-[var(--radius-md)] bg-surface text-ink px-3 py-2 text-[13px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", "aria-label": t("principles.searchPlaceholder") }), _jsx("div", { className: "flex gap-1", role: "group", "aria-label": "Status filter", children: statusFilters.map((sf) => (_jsx("button", { onClick: () => setStatusFilter(sf.value), className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-1 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov " +
                                 (statusFilter === sf.value
                                     ? "bg-gov text-paper border-gov"
-                                    : "bg-surface text-ink-3 border-line hover:border-line-2"), children: sf.label }, sf.value))) }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "border border-line rounded-[var(--radius-md)] bg-surface text-ink-3 px-2 py-1 text-[12px] font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", "aria-label": "Sort order", children: [_jsx("option", { value: "updatedAt", children: t("principles.sortByUpdated") }), _jsx("option", { value: "createdAt", children: t("principles.sortByCreated") })] })] }), !loading && !error && summary && (_jsxs("div", { className: "flex flex-wrap border border-line rounded-[var(--radius-md)] bg-panel overflow-hidden mb-6", children: [_jsx(Metric, { num: String(summary.total), label: t("principles.metricDeposited") }), _jsx(Metric, { num: String(summary.active), label: t("principles.metricActive") }), _jsx(Metric, { num: latestUpdatedAt ? formatDate(latestUpdatedAt, i18n.language) : "—", label: t("principles.metricLatest") })] })), loading && (_jsx("div", { className: "grid gap-3 animate-[pdFadeIn_200ms_ease-out]", role: "status", "aria-live": "polite", "aria-label": t("principles.loading", { defaultValue: "Loading…" }), children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "bg-panel border border-line rounded-[var(--radius-md)] p-4 border-l-[3px] border-l-transparent", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 mb-3", children: [_jsx(Skeleton, { className: "h-5 w-[55%] rounded-sm" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-[2px]" })] }), _jsx(Skeleton, { className: "h-4 w-full rounded-sm mb-2" }), _jsx(Skeleton, { className: "h-4 w-[80%] rounded-sm mb-4" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-20 rounded-sm" }), _jsx(Skeleton, { className: "h-3.5 w-24 rounded-sm" })] })] }, i))) })), error && (_jsxs("div", { className: "border border-danger/30 rounded-[var(--radius-md)] p-4 mb-4", children: [_jsx("p", { className: "text-danger text-sm", children: error }), _jsx(Button, { variant: "outline", size: "sm", onClick: loadData, className: "mt-2", children: t("principles.retry", { defaultValue: "Retry" }) })] })), !loading && !error && filtered.length === 0 && principles.length === 0 && (_jsxs("div", { className: "text-center py-12", children: [_jsx("h2", { className: "text-ink-2 text-lg font-semibold mb-2", children: t("principles.emptyTitle") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[480px] mx-auto leading-relaxed", children: filterMode === 'actionable'
+                                    : "bg-surface text-ink-3 border-line hover:border-line-2"), children: sf.label }, sf.value))) }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "border border-line rounded-[var(--radius-md)] bg-surface text-ink-3 px-2 py-1 text-[12px] font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", "aria-label": "Sort order", children: [_jsx("option", { value: "updatedAt", children: t("principles.sortByUpdated") }), _jsx("option", { value: "createdAt", children: t("principles.sortByCreated") })] })] }), !loading && !error && summary && (_jsxs("details", { className: "mb-6 text-[12px] text-ink-3", "data-testid": "principle-library-overview", children: [_jsx("summary", { className: "cursor-pointer text-gov", children: t('principles.libraryOverview') }), _jsxs("div", { className: "mt-3 flex flex-wrap border border-line rounded-[var(--radius-md)] bg-panel overflow-hidden", children: [_jsx(Metric, { num: String(summary.total), label: t("principles.metricDeposited") }), _jsx(Metric, { num: String(summary.active), label: t("principles.metricActive") }), _jsx(Metric, { num: latestUpdatedAt ? formatDate(latestUpdatedAt, i18n.language) : "—", label: t("principles.metricLatest") })] })] })), loading && (_jsx("div", { className: "grid gap-3 animate-[pdFadeIn_200ms_ease-out]", role: "status", "aria-live": "polite", "aria-label": t("principles.loading", { defaultValue: "Loading…" }), children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "bg-panel border border-line rounded-[var(--radius-md)] p-4 border-l-[3px] border-l-transparent", children: [_jsxs("div", { className: "flex items-start justify-between gap-3 mb-3", children: [_jsx(Skeleton, { className: "h-5 w-[55%] rounded-sm" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-[2px]" })] }), _jsx(Skeleton, { className: "h-4 w-full rounded-sm mb-2" }), _jsx(Skeleton, { className: "h-4 w-[80%] rounded-sm mb-4" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-20 rounded-sm" }), _jsx(Skeleton, { className: "h-3.5 w-24 rounded-sm" })] })] }, i))) })), error && (_jsxs("div", { className: "border border-danger/30 rounded-[var(--radius-md)] p-4 mb-4", children: [_jsx("p", { className: "text-danger text-sm", children: error }), _jsx(Button, { variant: "outline", size: "sm", onClick: loadData, className: "mt-2", children: t("principles.retry", { defaultValue: "Retry" }) })] })), !loading && !error && filtered.length === 0 && principles.length === 0 && (_jsxs("div", { className: "text-center py-12", children: [_jsx("h2", { className: "text-ink-2 text-lg font-semibold mb-2", children: t("principles.emptyTitle") }), _jsx("p", { className: "text-ink-3 text-[14px] max-w-[480px] mx-auto leading-relaxed", children: filterMode === 'actionable'
                             ? t("principles.emptyActionable", { defaultValue: "No owner-actionable principles at this time. When PD captures behavior deviation signals, principle candidates will appear here for your review." })
                             : t("principles.emptyDescription") }), categories && filterMode === 'actionable' && (_jsx("div", { className: "flex justify-center gap-2 flex-wrap mt-4", children: Object.entries(categories).map(([cat, count]) => (_jsxs("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-4", children: [cat, ": ", count] }, cat))) }))] })), !loading && !error && filtered.length === 0 && principles.length > 0 && (_jsx("p", { className: "text-ink-3 text-sm", children: t("principles.noResults") })), !loading && !error && filtered.length > 0 && (_jsxs("div", { className: "relative pl-6 grid gap-3 animate-[pdFadeIn_400ms_ease-out]", children: [_jsx("span", { className: "absolute left-[12.5px] top-3 bottom-3 w-px bg-line", "aria-hidden": "true" }), filtered.map((card) => {
                         const ag = approvalByPrinciple.get(card.principleId);
                         const decision = GOV_DECISION[card.status];
                         const decisionRecord = ag?.records?.find((r) => r.status === ag.status) ?? ag?.records?.[0];
                         const decisionDate = decisionRecord?.createdAt;
-                        return (_jsxs("article", { onClick: () => navigate(`/principles/${card.principleId}`), className: "relative bg-panel border border-line rounded-[var(--radius-md)] p-4 cursor-pointer " +
+                        return (_jsxs("article", { className: "relative bg-panel border border-line rounded-[var(--radius-md)] p-5 " +
                                 "border-l-[3px] " +
                                 STATUS_BORDER[card.status] + " " +
                                 "transition-[border-color,background,transform] duration-150 " +
-                                "hover:border-line-2 hover:bg-surface hover:-translate-y-px " +
-                                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", tabIndex: 0, role: "link", "aria-label": card.title, onKeyDown: (e) => {
-                                if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    navigate(`/principles/${card.principleId}`);
-                                }
-                            }, children: [_jsx("span", { className: "absolute -left-[19px] top-4 h-2.5 w-2.5 rounded-full border-2 border-paper " +
-                                        STATUS_DOT_BG[card.status], "aria-hidden": "true" }), _jsxs("div", { className: "flex items-center gap-2 mb-2 flex-wrap", children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-0.5 " +
-                                                STATUS_TEXT[card.status] +
-                                                " border-current/20", children: t("principles.status" + card.status.charAt(0).toUpperCase() + card.status.slice(1)) }), card.channels.map((ch) => (_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-3", children: enumLabel('channel', ch, t) }, ch))), card.detectedLanguage && card.detectedLanguage !== 'unknown' && (_jsx("span", { className: "font-mono text-[11px] tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-4", children: card.detectedLanguage === 'zh'
-                                                ? t("principles.languageHintZh")
-                                                : t("principles.languageHintEn") })), _jsxs("span", { className: "font-mono text-[11px] text-ink-4", children: [t("principles.evaluabilityLabel", { defaultValue: "可评价性" }), ": ", enumLabel('evaluability', card.evaluability, t)] }), card.decisionState !== undefined && (_jsx("span", { className: "font-mono text-[11px] tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-4", children: t(`principles.ownerDecision.state.${card.decisionState}`, { defaultValue: card.decisionState }) }))] }), card.readabilityWarningCode && (_jsx("div", { className: "mb-2 px-3 py-1.5 bg-amber/5 border border-amber/20 rounded-[3px] text-ink-3 text-[12px] leading-snug", children: t("principles.readabilityWarning." + card.readabilityWarningCode, { defaultValue: t("principles.readabilityFallbackTitle") }) })), card.detectedLanguage && card.detectedLanguage !== 'unknown' && i18n.language && !i18n.language.startsWith(card.detectedLanguage) && (_jsx("div", { className: "mb-2 px-3 py-1.5 bg-surface/60 border-l-2 border-line rounded-[3px] text-ink-4 text-[12px] leading-snug", children: t("principles.languageMismatchHint", { lang: card.detectedLanguage === 'en' ? 'English' : '中文' }) })), _jsx("h3", { className: "font-semibold text-ink mb-1", children: card.title }), card.titleUsedFallback && card.originalTitle && (_jsxs("details", { className: "mb-1", children: [_jsx("summary", { className: "text-ink-4 text-[11px] font-mono cursor-pointer hover:underline", children: t("principles.readabilityOriginalLabel") }), _jsx("div", { className: "text-ink-4 text-[12px] leading-snug mt-1 font-mono bg-surface/40 px-2 py-1 rounded-[3px] break-all", children: card.originalTitle })] })), _jsx("p", { className: "text-ink-3 text-[13px] line-clamp-3 leading-relaxed", children: card.text }), _jsxs("p", { className: "font-mono text-[11px] text-ink-4 mt-2", children: [t("principles.updatedAt"), ": ", formatDate(card.updatedAt, i18n.language)] }), _jsx(EvolutionBlock, { label: t("principles.blockBasis"), children: t("principles.blockBasisFallback") }), _jsx(EvolutionBlock, { label: t("principles.blockImpact"), children: card.decisionState !== undefined
-                                        ? t("principles.blockImpactSeeDecisionView", { defaultValue: "以详情页「当前实际执行」为准（本卡片不据此判断影响）。" })
-                                        : t(BLOCK_IMPACT_KEY[card.status]) }), _jsx(EvolutionBlock, { label: t("principles.blockBehavior"), children: card.action ? card.action : t("principles.blockBehaviorFallback") }), _jsx("div", { className: "mt-3 pt-3 border-t border-line/60", children: _jsxs("div", { className: "flex items-center justify-between gap-3 bg-gov/5 border border-line rounded-[3px] px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] text-ink-4", children: t("principles.govDecision") }), _jsxs("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-0.5 " +
-                                                            STATUS_TEXT[card.status] +
-                                                            " border-current/20", children: [decision.glyph, " ", t(decision.labelKey)] }), card.runtimeDeactivated === true && (_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-0.5 border-amber-300 text-amber-700 bg-amber-50", children: t("principles.runtimeDeactivated") }))] }), decisionDate && (_jsx("span", { className: "font-mono text-[11px] text-ink-4 whitespace-nowrap", children: formatDate(decisionDate, i18n.language) }))] }) })] }, card.principleId));
+                                "hover:border-line-2 " +
+                                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", children: [_jsx("span", { className: "absolute -left-[19px] top-4 h-2.5 w-2.5 rounded-full border-2 border-paper " +
+                                        STATUS_DOT_BG[card.status], "aria-hidden": "true" }), _jsxs("div", { className: "mb-2 flex flex-wrap items-start justify-between gap-3", children: [_jsx("h3", { className: "min-w-0 flex-1 text-[15px] font-semibold leading-relaxed text-ink", children: _jsx(Link, { className: "rounded-sm hover:text-gov focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gov", to: `/principles/${card.principleId}`, state: { returnTo: `/principles?${searchParams}` }, children: card.title }) }), _jsx("span", { className: `rounded-[2px] border px-2 py-1 text-[11px] ${STATUS_TEXT[card.status]}`, children: card.decisionState !== undefined ? t(`principles.ownerDecision.state.${card.decisionState}`, { defaultValue: card.decisionState }) : t(decision.labelKey) })] }), card.readabilityWarningCode && (_jsx("div", { className: "mb-2 px-3 py-1.5 bg-amber/5 border border-amber/20 rounded-[3px] text-ink-3 text-[12px] leading-snug", children: t("principles.readabilityWarning." + card.readabilityWarningCode, { defaultValue: t("principles.readabilityFallbackTitle") }) })), card.text.trim() !== card.title.trim() && _jsx("p", { className: "text-ink-3 text-[13px] line-clamp-2 leading-relaxed", children: card.text }), card.runtimeDeactivated === true && _jsx("p", { className: "mt-3 text-[12px] text-amber", role: "status", children: t('principles.runtimeDeactivated') }), _jsxs("details", { className: "mt-4 border-t border-line/60 pt-3", "data-testid": "principle-context-disclosure", children: [_jsx("summary", { className: "cursor-pointer text-[12px] text-gov", children: t('principles.contextDisclosure') }), _jsxs("div", { className: "mt-4 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2 flex-wrap", children: [_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border rounded-[2px] px-2 py-0.5 " +
+                                                                STATUS_TEXT[card.status] +
+                                                                " border-current/20", children: t("principles.status" + card.status.charAt(0).toUpperCase() + card.status.slice(1)) }), card.channels.map((ch) => (_jsx("span", { className: "font-mono text-[11px] uppercase tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-3", children: enumLabel('channel', ch, t) }, ch))), card.detectedLanguage && card.detectedLanguage !== 'unknown' && (_jsx("span", { className: "font-mono text-[11px] tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-4", children: card.detectedLanguage === 'zh'
+                                                                ? t("principles.languageHintZh")
+                                                                : t("principles.languageHintEn") })), _jsxs("span", { className: "font-mono text-[11px] text-ink-4", children: [t("principles.evaluabilityLabel", { defaultValue: "可评价性" }), ": ", enumLabel('evaluability', card.evaluability, t)] }), card.decisionState !== undefined && (_jsx("span", { className: "font-mono text-[11px] tracking-[0.02em] border border-line rounded-[2px] px-2 py-0.5 text-ink-4", children: t(`principles.ownerDecision.state.${card.decisionState}`, { defaultValue: card.decisionState }) }))] }), card.detectedLanguage && card.detectedLanguage !== 'unknown' && i18n.language && !i18n.language.startsWith(card.detectedLanguage) && (_jsx("div", { className: "mb-2 px-3 py-1.5 bg-surface/60 border-l-2 border-line rounded-[3px] text-ink-4 text-[12px] leading-snug", children: t("principles.languageMismatchHint", { lang: card.detectedLanguage === 'en' ? 'English' : '中文' }) })), card.titleUsedFallback && card.originalTitle && (_jsxs("details", { className: "mb-1", children: [_jsx("summary", { className: "text-ink-4 text-[11px] font-mono cursor-pointer hover:underline", children: t("principles.readabilityOriginalLabel") }), _jsx("div", { className: "text-ink-4 text-[12px] leading-snug mt-1 font-mono bg-surface/40 px-2 py-1 rounded-[3px] break-all", children: card.originalTitle })] })), _jsxs("p", { className: "font-mono text-[11px] text-ink-4 mt-2", children: [t("principles.updatedAt"), ": ", formatDate(card.updatedAt, i18n.language)] }), _jsx(EvolutionBlock, { label: t("principles.blockBasis"), children: t("principles.blockBasisFallback") }), _jsx(EvolutionBlock, { label: t("principles.blockImpact"), children: card.decisionState !== undefined
+                                                        ? t("principles.blockImpactSeeDecisionView", { defaultValue: "以详情页「当前实际执行」为准（本卡片不据此判断影响）。" })
+                                                        : t(BLOCK_IMPACT_KEY[card.status]) }), _jsx(EvolutionBlock, { label: t("principles.blockBehavior"), children: card.action ? card.action : t("principles.blockBehaviorFallback") }), decisionDate && _jsxs("p", { className: "text-[11px] text-ink-4", children: [t('principles.govDecision'), ": ", formatDate(decisionDate, i18n.language)] })] })] }), _jsx(Link, { className: "mt-3 inline-block text-[12px] text-gov underline underline-offset-4", to: `/principles/${card.principleId}`, state: { returnTo: `/principles?${searchParams}` }, children: t('principles.openDetails') })] }, card.principleId));
                     })] }))] }));
 }

package/console/dist/ui/utils/approval-review.d.ts

@@ -0,0 +1,30 @@
+import { type ApprovalRecordData } from './validators.js';
+export type ApprovalReviewGuard = {
+    schemaVersion: 'approval-review-v1';
+    approvalId: string;
+    artifactId: string;
+    channel: 'prompt' | 'code_tool_hook' | 'defer_archive';
+} & ({
+    artifactState: 'present';
+    artifactDigest: string;
+} | {
+    artifactState: 'missing';
+});
+export interface ApprovalReviewData {
+    approval: ApprovalRecordData;
+    expectedReview: ApprovalReviewGuard;
+    material: {
+        availability: 'available' | 'missing' | 'unreadable';
+        artifactId: string;
+        statement: string | null;
+        rationale: string | null;
+        targetBehavior: string | null;
+        scope: string[];
+        risks: string[] | null;
+        exactBody: {
+            kind: 'principle' | 'rule_code';
+            text: string;
+        } | null;
+    };
+}
+export declare function validateApprovalReview(value: unknown): ApprovalReviewData | null;

package/console/dist/ui/utils/approval-review.js

@@ -0,0 +1,50 @@
+import { validateApprovalRecordDirect } from './validators.js';
+function record(v) { return v !== null && typeof v === 'object' && !Array.isArray(v); }
+export function validateApprovalReview(value) {
+    if (!record(value) || value.writeGuardVersion !== 'approval-review-v1' || !record(value.review))
+        return null;
+    const approval = validateApprovalRecordDirect(value);
+    const guard = value.review.expectedReview;
+    const { material } = value.review;
+    if (!approval || !record(guard) || guard.schemaVersion !== 'approval-review-v1' || guard.approvalId !== approval.approvalId
+        || guard.artifactId !== approval.artifactId || guard.channel !== approval.channel
+        || !['prompt', 'code_tool_hook', 'defer_archive'].includes(String(guard.channel))
+        || (guard.artifactState !== 'present' && guard.artifactState !== 'missing')
+        || (guard.artifactState === 'present' && (typeof guard.artifactDigest !== 'string' || !/^sha256:[a-f0-9]{64}$/.test(guard.artifactDigest)))
+        || !record(material) || material.artifactId !== approval.artifactId
+        || !['available', 'missing', 'unreadable'].includes(String(material.availability))
+        || (material.statement !== null && typeof material.statement !== 'string')
+        || (material.rationale !== null && typeof material.rationale !== 'string')
+        || (material.targetBehavior !== null && typeof material.targetBehavior !== 'string')
+        || !Array.isArray(material.scope) || !material.scope.every(item => typeof item === 'string')
+        || (material.risks !== null && (!Array.isArray(material.risks) || !material.risks.every(item => typeof item === 'string'))))
+        return null;
+    if (guard.artifactState === 'missing' && (material.availability !== 'missing' || material.exactBody !== null || material.statement !== null || Object.hasOwn(guard, 'artifactDigest')))
+        return null;
+    if (guard.artifactState === 'present' && material.availability === 'missing')
+        return null;
+    const body = material.exactBody;
+    let exactBody = null;
+    if (body !== null) {
+        if (!record(body) || (body.kind !== 'principle' && body.kind !== 'rule_code') || typeof body.text !== 'string')
+            return null;
+        exactBody = { kind: body.kind, text: body.text };
+    }
+    const { channel } = guard;
+    if (channel !== 'prompt' && channel !== 'code_tool_hook' && channel !== 'defer_archive')
+        return null;
+    // The reader treats a material body as present exactly when availability says so;
+    // a payload that disagrees must fail loud rather than render the wrong preview.
+    if ((material.availability === 'available') !== (exactBody !== null))
+        return null;
+    if (exactBody !== null && (channel === 'code_tool_hook') !== (exactBody.kind === 'rule_code'))
+        return null;
+    const expectedReview = guard.artifactState === 'present' && typeof guard.artifactDigest === 'string'
+        ? { schemaVersion: 'approval-review-v1', approvalId: approval.approvalId, artifactId: approval.artifactId, channel, artifactState: 'present', artifactDigest: guard.artifactDigest }
+        : { schemaVersion: 'approval-review-v1', approvalId: approval.approvalId, artifactId: approval.artifactId, channel, artifactState: 'missing' };
+    const { availability } = material;
+    if (availability !== 'available' && availability !== 'missing' && availability !== 'unreadable')
+        return null;
+    return { approval, expectedReview, material: { availability, artifactId: approval.artifactId, statement: material.statement,
+            rationale: material.rationale, targetBehavior: material.targetBehavior, scope: material.scope, risks: material.risks, exactBody } };
+}

package/console/dist/ui/utils/reading-layout.d.ts

@@ -16,4 +16,5 @@ export interface ReadingLayout {
     /** 逐字全文。null 表示原文即短标题、已由 title 完整承载（不重复渲染）。 */
     body: string | null;
 }
+export declare function truncateByCodePoints(text: string, max: number): string;
 export declare function splitReadingTitleBody(text: string | null | undefined): ReadingLayout;

package/console/dist/ui/utils/reading-layout.js

@@ -22,7 +22,7 @@ function firstNonEmptyLine(text) {
     }
     return "";
 }
-function truncateByCodePoints(text, max) {
+export function truncateByCodePoints(text, max) {
     const chars = Array.from(text);
     if (chars.length <= max)
         return text;

package/console/dist/ui/utils/validators.d.ts

@@ -637,6 +637,8 @@ export interface ApprovalGroupRecordData {
     channel: string;
     createdAt: string;
     status: string;
+    /** This record's own revision review is incomplete; absent = no such defect. */
+    revisionReviewUnavailable?: boolean;
 }
 export interface ApprovalGroupData {
     principleId: string;
@@ -650,6 +652,8 @@ export interface ApprovalGroupData {
      */
     revisionReviewUnavailable?: boolean;
     revisionReview?: {
+        artifactId?: string;
+        artifactDigest?: string;
         oldStatement: string;
         newStatement: string;
         intentFields: Record<string, string>;

package/console/dist/ui/utils/validators.js

@@ -1740,7 +1740,13 @@ function validateApprovalGroupRecord(v) {
         return null;
     if (!Object.hasOwn(v, 'status') || !isString(v.status))
         return null;
-    return { id: v.id, artifactId: v.artifactId, channel: v.channel, createdAt: v.createdAt, status: v.status };
+    const record = { id: v.id, artifactId: v.artifactId, channel: v.channel, createdAt: v.createdAt, status: v.status };
+    if (Object.hasOwn(v, 'revisionReviewUnavailable')) {
+        if (typeof v.revisionReviewUnavailable !== 'boolean')
+            return null;
+        record.revisionReviewUnavailable = v.revisionReviewUnavailable;
+    }
+    return record;
 }
 function validateApprovalGroup(v) {
     if (!isObject(v))
@@ -1774,7 +1780,9 @@ function validateApprovalGroup(v) {
             if (typeof value === 'string')
                 intentFields[key] = value;
         }
-        result.revisionReview = { oldStatement: review.oldStatement, newStatement: review.newStatement, intentFields };
+        result.revisionReview = { oldStatement: review.oldStatement, newStatement: review.newStatement, intentFields,
+            ...(typeof review.artifactId === 'string' ? { artifactId: review.artifactId } : {}),
+            ...(typeof review.artifactDigest === 'string' && /^sha256:[a-f0-9]{64}$/.test(review.artifactDigest) ? { artifactDigest: review.artifactDigest } : {}) };
     }
     // Wave 7: optional candidateDescription from artifact contentJson
     if (Object.hasOwn(v, 'candidateDescription') && isString(v.candidateDescription) && v.candidateDescription.length > 0) {

package/console/dist/web/assets/app.css

@@ -434,6 +434,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-7 {
+    margin-top: calc(var(--spacing) * 7);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -530,11 +533,11 @@
   .ml-auto {
     margin-left: auto;
   }
-  .line-clamp-3 {
+  .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
+    -webkit-line-clamp: 2;
   }
   .block {
     display: block;
@@ -644,9 +647,6 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-32 {
-    max-height: calc(var(--spacing) * 32);
-  }
   .max-h-40 {
     max-height: calc(var(--spacing) * 40);
   }
@@ -801,6 +801,9 @@
   .max-w-\[400px\] {
     max-width: 400px;
   }
+  .max-w-\[440px\] {
+    max-width: 440px;
+  }
   .max-w-\[480px\] {
     max-width: 480px;
   }
@@ -816,6 +819,12 @@
   .max-w-\[760px\] {
     max-width: 760px;
   }
+  .max-w-\[1120px\] {
+    max-width: 1120px;
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
   .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -1079,6 +1088,11 @@
     margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
+  :where(.space-y-7 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.space-y-8 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
@@ -1396,6 +1410,12 @@
       border-color: color-mix(in oklab, var(--color-green) 40%, transparent);
     }
   }
+  .border-ink-3\/30 {
+    border-color: color-mix(in srgb, #525966 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-ink-3) 30%, transparent);
+    }
+  }
   .border-ink-4 {
     border-color: var(--color-ink-4);
   }
@@ -1576,6 +1596,12 @@
   .bg-ink-3 {
     background-color: var(--color-ink-3);
   }
+  .bg-ink-3\/10 {
+    background-color: color-mix(in srgb, #525966 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-ink-3) 10%, transparent);
+    }
+  }
   .bg-ink-4 {
     background-color: var(--color-ink-4);
   }
@@ -1798,6 +1824,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2033,6 +2062,10 @@
     --tw-leading: 1.62;
     line-height: 1.62;
   }
+  .leading-\[1\.85\] {
+    --tw-leading: 1.85;
+    line-height: 1.85;
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -2254,9 +2287,6 @@
   .opacity-72 {
     opacity: 72%;
   }
-  .opacity-80 {
-    opacity: 80%;
-  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2499,9 +2529,6 @@
     --tw-content: '';
     content: var(--tw-content);
   }
-  .last\:mb-0:last-child {
-    margin-bottom: 0px;
-  }
   .last\:border-r-0:last-child {
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
@@ -2529,6 +2556,14 @@
     .hover\:border-gov:hover {
       border-color: var(--color-gov);
     }
+    .hover\:border-gov\/50:hover {
+      border-color: color-mix(in srgb, #1e3a5f 50%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-gov\/50:hover {
+        border-color: color-mix(in oklab, var(--color-gov) 50%, transparent);
+      }
+    }
     .hover\:border-line:hover {
       border-color: var(--color-line);
     }
@@ -3301,6 +3336,79 @@
   }
   color: var(--color-amber);
 }
+.owner-workbench-container {
+  container-type: inline-size;
+}
+.owner-workbench {
+  display: grid;
+  gap: 28px;
+}
+.owner-work-reading {
+  border-top: 1px solid var(--color-line);
+  padding-top: 24px;
+  scroll-margin-top: 80px;
+}
+.owner-workbench:has(.owner-work-list-selected) .owner-work-list {
+  display: none;
+}
+.owner-work-list {
+  max-height: 52dvh;
+  overflow-y: auto;
+  padding-right: 8px;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-ink-4) transparent;
+}
+@supports selector(::-webkit-scrollbar) {
+  .owner-work-list {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  .owner-work-list::-webkit-scrollbar {
+    width: 6px;
+  }
+  .owner-work-list::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .owner-work-list::-webkit-scrollbar-thumb {
+    background: var(--color-ink-4);
+    border-radius: 999px;
+  }
+  .owner-work-list:hover::-webkit-scrollbar-thumb {
+    background: var(--color-ink-3);
+  }
+  .owner-work-list::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+@media (forced-colors: active) {
+  .owner-work-list {
+    scrollbar-color: auto;
+  }
+  .owner-work-list::-webkit-scrollbar-thumb {
+    background: ButtonText;
+  }
+}
+@container (min-width: 900px) {
+  .owner-workbench {
+    grid-template-columns: 272px minmax(0, 1fr);
+    align-items: start;
+  }
+  .owner-workbench:has(.owner-work-list-selected) .owner-work-list {
+    display: block;
+  }
+  .owner-work-list {
+    max-height: 72dvh;
+  }
+  .owner-work-reading {
+    border-top: 0;
+    border-left: 1px solid var(--color-line);
+    padding-top: 0;
+    padding-left: 28px;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;