Expand review studio world-class action cards

This commit is contained in:
yaojingang
2026-06-16 07:02:02 +08:00
parent 5338a77016
commit 30451d41f6
49 changed files with 1278 additions and 1024 deletions
+44
View File
@@ -22,6 +22,13 @@ def action_command_rows(commands: dict[str, Any]) -> list[dict[str, str]]:
return rows
def first_text_items(*values: Any, limit: int = 4) -> list[str]:
for value in values:
if isinstance(value, list) and value:
return [str(item) for item in value[:limit]]
return []
def world_class_action_steps(data: dict[str, Any]) -> list[dict[str, Any]]:
ledger = data.get("world_class_evidence_ledger", {}) if isinstance(data, dict) else {}
entries = ledger.get("entries", []) if isinstance(ledger, dict) else []
@@ -58,6 +65,7 @@ def world_class_action_steps(data: dict[str, Any]) -> list[dict[str, Any]]:
runbook = entry.get("runbook", [])
if not runbook and isinstance(checklist.get("must_collect", {}), dict):
runbook = checklist["must_collect"].get("runbook", [])
must_collect = checklist.get("must_collect", {}) if isinstance(checklist.get("must_collect", {}), dict) else {}
steps.append(
{
"key": key,
@@ -74,11 +82,31 @@ def world_class_action_steps(data: dict[str, Any]) -> list[dict[str, Any]]:
"blocked_checks": blocked_checks,
"commands": action_command_rows(checklist.get("commands", {}) if isinstance(checklist.get("commands", {}), dict) else {}),
"runbook": [str(item) for item in runbook[:3]],
"provenance_requirements": first_text_items(
must_collect.get("provenance_requirements"),
entry.get("provenance_requirements"),
limit=3,
),
"success_checks": first_text_items(must_collect.get("success_checks"), entry.get("success_checks")),
"evidence_artifacts": first_text_items(
must_collect.get("evidence_artifacts"),
entry.get("evidence_artifacts"),
limit=5,
),
"privacy_contract": first_text_items(must_collect.get("privacy_contract"), entry.get("privacy_contract"), limit=3),
}
)
return steps
def render_small_list(items: list[Any], empty: str, ordered: bool = False) -> str:
if not items:
return f"<p class='muted'>{html.escape(empty)}</p>"
tag = "ol" if ordered else "ul"
rows = "".join(f"<li>{html.escape(str(item))}</li>" for item in items)
return f"<{tag}>{rows}</{tag}>"
def render_action_evidence_steps(steps: list[dict[str, Any]]) -> str:
if not steps:
return ""
@@ -136,6 +164,22 @@ def render_action_evidence_steps(steps: list[dict[str, Any]]) -> str:
else "<p class='muted'>暂无首要步骤。</p>"
)
+ "</details>"
"<details class='action-collection-details'><summary>采集契约</summary>"
"<div class='action-collection-grid'>"
"<section><h5>来源要求</h5>"
+ render_small_list(step.get("provenance_requirements", []), "暂无来源要求。")
+ "</section>"
"<section><h5>通过条件</h5>"
+ render_small_list(step.get("success_checks", []), "暂无通过条件。")
+ "</section>"
"<section><h5>证据资产</h5>"
+ render_small_list(step.get("evidence_artifacts", []), "暂无证据资产。")
+ "</section>"
"<section><h5>隐私边界</h5>"
+ render_small_list(step.get("privacy_contract", []), "暂无隐私边界。")
+ "</section>"
"</div>"
"</details>"
"</article>"
)
return (
+10 -664
View File
@@ -2,12 +2,17 @@
"""Static layout contract for Review Studio HTML."""
import html
from pathlib import Path
SCRIPT_INTERFACE = "internal-module"
SCRIPT_INTERFACE_REASON = "Imported by render_review_studio.py to keep Review Studio layout and CSS out of gate logic."
ROOT = Path(__file__).resolve().parent.parent
ASSET_DIR = ROOT / "assets"
REVIEW_STUDIO_NAV = [
("#overview", "审查总览"),
("#intent", "意图画布"),
@@ -28,6 +33,10 @@ REVIEW_STUDIO_NAV = [
]
def read_layout_asset(filename: str) -> str:
return (ASSET_DIR / filename).read_text(encoding="utf-8").strip()
def render_review_nav(nav_items: list[tuple[str, str]] | None = None) -> str:
items = REVIEW_STUDIO_NAV if nav_items is None else nav_items
return "".join(
@@ -37,667 +46,4 @@ def render_review_nav(nav_items: list[tuple[str, str]] | None = None) -> str:
def review_studio_css() -> str:
return """
:root {
--ink: #1B365D;
--text: #24201d;
--muted: #746d66;
--line: #e7ded2;
--soft: #faf8f5;
--pass: #1e6b52;
--warn: #9a6718;
--block: #9b2c2c;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: #ffffff;
color: var(--text);
font-family: Georgia, "Times New Roman", "Songti SC", serif;
line-height: 1.58;
}
nav {
position: sticky;
top: 0;
z-index: 10;
display: flex;
gap: 4px;
justify-content: center;
flex-wrap: wrap;
padding: 10px 16px;
background: rgba(255,255,255,0.94);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(10px);
}
nav a {
color: var(--ink);
text-decoration: none;
font-size: 14px;
padding: 7px 10px;
border-radius: 6px;
}
nav a:hover { background: var(--soft); }
main { max-width: 1180px; margin: 0 auto; padding: 44px 28px 76px; }
header { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 28px; }
.eyebrow { color: var(--ink); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { color: var(--text); font-weight: 500; margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.03; max-width: 920px; margin-top: 12px; }
h2 { font-size: 30px; margin-bottom: 14px; }
h3 { font-size: 19px; }
p { margin: 0; }
.lede { max-width: 820px; color: var(--muted); font-size: 20px; margin-top: 18px; }
.decision {
display: inline-flex;
align-items: baseline;
gap: 12px;
margin-top: 24px;
padding: 12px 16px;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink);
background: var(--soft);
}
.decision strong { font-size: 28px; }
section { padding: 30px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 76px; }
.metrics, .gates {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.gates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric, .gate {
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px;
background: #fff;
min-width: 0;
}
.metric span, .gate span { display: block; color: var(--muted); font-size: 13px; }
.metric strong { display: block; color: var(--ink); font-size: 34px; line-height: 1.1; margin: 8px 0; }
.metric p, .gate p, .gate footer, .issues span, .evidence span { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.gate { display: flex; flex-direction: column; gap: 10px; }
.gate.pass { border-top: 4px solid var(--pass); }
.gate.warn { border-top: 4px solid var(--warn); }
.gate.block { border-top: 4px solid var(--block); }
.gate footer { border-top: 1px solid var(--line); padding-top: 10px; }
a { color: var(--ink); }
.twocol {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
align-items: start;
}
.panel {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: #fff;
}
.panel p { color: var(--muted); }
.kv-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
margin: 2px 0 0;
}
.kv-grid div {
min-width: 0;
padding: 9px 0 0;
border-top: 1px solid var(--line);
}
.kv-grid dt {
color: var(--muted);
font-size: 13px;
}
.kv-grid dd {
margin: 2px 0 0;
color: var(--ink);
font-size: 15px;
overflow-wrap: anywhere;
}
.issues, .evidence {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.issues li, .evidence li {
border-left: 3px solid var(--line);
padding-left: 12px;
display: grid;
gap: 3px;
}
.muted { color: var(--muted); }
.actions-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.annotations-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.action-card {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: #fff;
display: grid;
gap: 10px;
min-width: 0;
}
.action-card.warn { border-left: 4px solid var(--warn); }
.action-card.block { border-left: 4px solid var(--block); }
.action-card.with-evidence {
grid-column: 1 / -1;
}
.action-evidence-panel {
display: grid;
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 12px;
margin-top: 2px;
}
.action-evidence-panel h4 {
margin: 0;
color: var(--ink);
font-size: 16px;
font-weight: 500;
}
.action-evidence-panel p {
color: var(--muted);
font-size: 14px;
}
.action-evidence-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.action-evidence-item {
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px;
display: grid;
gap: 10px;
min-width: 0;
background: var(--soft);
}
.action-evidence-item.pending { border-left: 4px solid var(--warn); }
.action-evidence-item.accepted { border-left: 4px solid var(--pass); }
.action-evidence-item h4,
.action-evidence-item h5 {
margin: 0;
color: var(--ink);
font-weight: 500;
}
.action-evidence-item h4 { font-size: 16px; }
.action-evidence-item h5 { font-size: 14px; }
.action-evidence-item section {
border-top: 1px solid var(--line);
padding-top: 10px;
display: grid;
gap: 8px;
}
.action-command-details,
.action-runbook-details {
border-top: 1px solid var(--line);
padding-top: 10px;
display: grid;
gap: 8px;
}
.action-command-details summary,
.action-runbook-details summary {
cursor: pointer;
color: var(--ink);
font-size: 14px;
font-weight: 500;
}
.action-command-details[open] summary,
.action-runbook-details[open] summary {
margin-bottom: 8px;
}
.action-evidence-item dl {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
gap: 6px 10px;
margin: 0;
}
.action-evidence-item dt {
color: var(--ink);
font-size: 14px;
}
.action-evidence-item dd {
margin: 0;
min-width: 0;
}
.action-evidence-checks,
.action-command-list,
.action-runbook-list {
margin: 0;
display: grid;
gap: 8px;
}
.action-evidence-checks,
.action-command-list {
padding: 0;
list-style: none;
}
.action-runbook-list {
padding-left: 20px;
}
.action-evidence-check,
.action-command-list li {
display: grid;
gap: 3px;
min-width: 0;
border-top: 1px solid var(--line);
padding-top: 8px;
}
.action-evidence-check.blocked { border-left: 3px solid var(--warn); padding-left: 8px; }
.action-evidence-check.pass { border-left: 3px solid var(--pass); padding-left: 8px; }
.action-evidence-check span,
.action-command-list span {
color: var(--ink);
font-size: 13px;
}
.action-evidence-check code,
.action-evidence-check small,
.action-command-list code,
.action-runbook-list li {
color: var(--muted);
font-size: 13px;
overflow-wrap: anywhere;
}
.action-command-list code {
display: block;
white-space: normal;
}
.annotation-card {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: #fff;
display: grid;
gap: 10px;
min-width: 0;
}
.annotation-card.warning { border-left: 4px solid var(--warn); }
.annotation-card.blocker { border-left: 4px solid var(--block); }
.annotation-card.resolved { opacity: .72; }
.world-evidence-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin-top: 16px;
}
.world-evidence-card {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: #fff;
display: grid;
gap: 12px;
min-width: 0;
}
.world-evidence-card.pending { border-left: 4px solid var(--warn); }
.world-evidence-card.accepted { border-left: 4px solid var(--pass); }
.world-evidence-card span,
.world-evidence-card p,
.world-evidence-card dd,
.world-evidence-card li {
color: var(--muted);
font-size: 14px;
overflow-wrap: anywhere;
}
.world-evidence-card dl {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 6px 10px;
margin: 0;
}
.world-evidence-card dt { color: var(--ink); font-size: 14px; }
.world-evidence-card dd { margin: 0; }
.world-evidence-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 12px;
}
.world-evidence-columns h4 {
margin: 0 0 6px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
}
.world-evidence-columns ul {
margin: 0;
padding-left: 18px;
}
.world-source-panel {
border-top: 1px solid var(--line);
padding-top: 12px;
}
.world-runbook-panel {
border-top: 1px solid var(--line);
padding-top: 12px;
}
.world-runbook-panel h4,
.world-source-panel h4 {
margin: 0 0 8px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
}
.world-runbook-panel ul {
margin: 0;
padding-left: 18px;
}
.world-source-checks {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.world-source-check {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(0, .6fr) minmax(0, 1fr);
gap: 10px;
align-items: start;
min-width: 0;
padding: 9px 0 0;
border-top: 1px solid var(--line);
}
.world-source-check span {
color: var(--ink);
font-size: 14px;
}
.world-source-check code,
.world-source-check small {
color: var(--muted);
font-size: 13px;
overflow-wrap: anywhere;
}
.world-source-check.pass { border-left: 3px solid var(--pass); padding-left: 8px; }
.world-source-check.blocked { border-left: 3px solid var(--warn); padding-left: 8px; }
.output-review-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin-top: 16px;
}
.output-review-card {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: #fff;
display: grid;
gap: 12px;
min-width: 0;
}
.output-review-card.awaiting-decision,
.output-review-card.fix-decision { border-left: 4px solid var(--warn); }
.output-review-card.adjudicated { border-left: 4px solid var(--pass); }
.output-review-card span,
.output-review-card p,
.output-review-card dd,
.output-review-card li {
color: var(--muted);
font-size: 14px;
overflow-wrap: anywhere;
}
.output-review-card dl {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 6px 10px;
margin: 0;
}
.output-review-card dt { color: var(--ink); font-size: 14px; }
.output-review-card dd { margin: 0; min-width: 0; }
.output-review-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 12px;
}
.output-review-steps h4 {
margin: 0 0 6px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
}
.output-review-steps ul {
margin: 0;
padding-left: 18px;
}
.output-review-commands,
.output-review-fields {
list-style: none;
padding: 0;
display: grid;
gap: 8px;
}
.output-review-commands li,
.output-review-fields li {
display: grid;
gap: 2px;
min-width: 0;
padding: 8px 0 0;
border-top: 1px solid var(--line);
}
.output-review-commands code {
overflow-wrap: anywhere;
white-space: normal;
display: block;
}
.world-intake-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin-top: 16px;
}
.world-intake-card {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: #fff;
display: grid;
gap: 12px;
min-width: 0;
}
.world-intake-card.awaiting-submission,
.world-intake-card.fix-submission,
.world-intake-card.fix-template { border-left: 4px solid var(--warn); }
.world-intake-card.ready-for-ledger-review,
.world-intake-card.accepted { border-left: 4px solid var(--pass); }
.world-intake-card span,
.world-intake-card p,
.world-intake-card dd,
.world-intake-card li {
color: var(--muted);
font-size: 14px;
overflow-wrap: anywhere;
}
.world-intake-card dl {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 6px 10px;
margin: 0;
}
.world-intake-card dt { color: var(--ink); font-size: 14px; }
.world-intake-card dd { margin: 0; min-width: 0; }
.world-intake-steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
border-top: 1px solid var(--line);
padding-top: 12px;
}
.world-intake-steps h4 {
margin: 0 0 6px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
}
.world-intake-steps ul {
margin: 0;
padding-left: 18px;
}
.world-intake-commands {
list-style: none;
padding: 0;
display: grid;
gap: 8px;
}
.world-intake-commands li {
display: grid;
gap: 2px;
min-width: 0;
padding: 8px 0 0;
border-top: 1px solid var(--line);
}
.world-intake-commands code {
overflow-wrap: anywhere;
white-space: normal;
display: block;
}
.section-subtitle {
margin-top: 22px;
margin-bottom: 12px;
color: var(--ink);
}
.waiver-summary { margin-top: 16px; }
.waiver-candidate-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.waiver-card {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: #fff;
display: grid;
gap: 12px;
min-width: 0;
}
.waiver-card.allowed { border-left: 4px solid var(--warn); }
.waiver-card.blocked { border-left: 4px solid var(--block); }
.waiver-card span,
.waiver-card p,
.waiver-card dd,
.waiver-card li {
color: var(--muted);
font-size: 14px;
overflow-wrap: anywhere;
}
.waiver-card dl {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 6px 10px;
margin: 0;
}
.waiver-card dt {
color: var(--ink);
font-size: 14px;
}
.waiver-card dd { margin: 0; min-width: 0; }
.waiver-review {
border-top: 1px solid var(--line);
padding-top: 12px;
}
.waiver-review h4 {
margin: 0 0 6px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
}
.waiver-review ul {
margin: 0;
padding-left: 18px;
}
.waiver-command {
display: grid;
gap: 4px;
border-top: 1px solid var(--line);
padding-top: 12px;
}
.waiver-command span {
color: var(--ink);
font-size: 14px;
}
.waiver-command code {
display: block;
max-width: 100%;
overflow-wrap: anywhere;
white-space: normal;
}
.action-card span,
.annotation-card span,
.action-card small,
.annotation-card small,
.action-card footer,
.annotation-card footer,
.action-card dd {
color: var(--muted);
font-size: 14px;
overflow-wrap: anywhere;
}
.annotation-card dd { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.action-card dl, .annotation-card dl {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: 6px 10px;
margin: 0;
}
.action-card dt, .annotation-card dt { color: var(--ink); font-size: 14px; }
.action-card dd, .annotation-card dd { margin: 0; }
.source-ref-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 6px;
}
.source-ref-list li {
display: grid;
gap: 2px;
min-width: 0;
padding: 8px 0 0;
border-top: 1px solid var(--line);
}
.source-ref-list a,
.source-ref-list span {
overflow-wrap: anywhere;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
}
.source-ref-list small {
font-size: 12px;
color: var(--muted);
}
.source-ref-list blockquote {
margin: 2px 0 0;
padding: 7px 9px;
border-left: 3px solid var(--line);
background: var(--soft);
color: var(--muted);
font-size: 12px;
overflow-wrap: anywhere;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
}
@media (max-width: 980px) {
.metrics, .gates, .twocol, .actions-grid, .annotations-grid, .action-evidence-grid, .action-evidence-item dl, .output-review-grid, .output-review-steps, .world-evidence-grid, .world-evidence-columns, .world-source-check, .world-intake-grid, .world-intake-steps, .waiver-candidate-grid, .waiver-card dl, .kv-grid { grid-template-columns: 1fr; }
main { padding: 32px 18px 60px; }
nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
nav a { flex: 0 0 auto; }
}
""".strip()
return read_layout_asset("review-studio.css")