+
+
+
+ Authorized Lab Dashboard
+
本地攻防实证工作台
-
面向授权实验场景的本地静态前端。聚合 advisory、run bundle、日志、浏览器证据、失败原因、利用思路与源头信息，并支持可折叠细节与自动刷新。
-
+
+ Lovart 设计外壳已本地化并接入真实 run bundle 数据。页面只面向授权实验资产，
+ 聚合 advisory、timeline、evidence、logs、sources、raw JSON 与失败原因。
+
-
-
+
+
-
+
{html.escape(title)}
-
{html.escape(description)} | source: {html.escape(str(source_label))}
+
{html.escape(description)}
{html.escape(body)}
@@ -256,31 +254,109 @@ def _dashboard_doc_page(title: str, source_path: Path, description: str) -> str:
"""
+def _remove_path(path: Path) -> None:
+ if not path.exists() and not path.is_symlink():
+ return
+ if path.is_symlink() or path.is_file():
+ path.unlink()
+ return
+ shutil.rmtree(path)
+
+
+def _sync_symlink(target: Path, link_path: Path) -> None:
+ ensure_dir(link_path.parent)
+ relative_target = os.path.relpath(target, link_path.parent)
+ if link_path.is_symlink() and os.readlink(link_path) == relative_target:
+ return
+ _remove_path(link_path)
+ os.symlink(relative_target, link_path, target_is_directory=target.is_dir())
+
+
+def _copy_tree(source: Path, destination: Path) -> None:
+ ensure_dir(destination)
+ for path in source.rglob("*"):
+ relative = path.relative_to(source)
+ target = destination / relative
+ if path.is_dir():
+ ensure_dir(target)
+ continue
+ ensure_dir(target.parent)
+ shutil.copy2(path, target)
+
+
def _write_dashboard_docs() -> None:
docs_dir = DASHBOARD_DIR / "docs"
ensure_dir(docs_dir)
- docs = [
+ sources = [
(
"project-features.html",
"项目功能与特性总览",
- ROOT / "docs" / "project-features.md",
+ (ROOT / "docs" / "project-features.md").read_text(encoding="utf-8"),
"Dashboard-local mirror of the repo feature guide.",
),
(
"frontend-dashboard-design.html",
"本地前端工作台设计文档",
- ROOT / "docs" / "frontend-dashboard-design.md",
+ (ROOT / "docs" / "frontend-dashboard-design.md").read_text(encoding="utf-8"),
"Dashboard-local mirror of the UI and interaction specification.",
),
(
"secure-code-index.html",
"安全编码修复库索引",
- ROOT / "05-defense" / "secure-code" / "INDEX.md",
+ (ROOT / "05-defense" / "secure-code" / "INDEX.md").read_text(encoding="utf-8"),
"Dashboard-local mirror of the secure-code library index.",
),
]
- for filename, title, source_path, description in docs:
- write_text(docs_dir / filename, _dashboard_doc_page(title, source_path, description))
+
+ manifest_body = LOVART_VENDOR_MANIFEST.read_text(encoding="utf-8") if LOVART_VENDOR_MANIFEST.exists() else "{}"
+ sources.append(
+ (
+ "design-source.html",
+ "Lovart 设计来源与本地化清单",
+ manifest_body,
+ "Local vendor manifest for the Lovart-derived dashboard shell.",
+ )
+ )
+
+ for filename, title, body, description in sources:
+ write_text(docs_dir / filename, _dashboard_doc_page(title, body, description))
+
+
+def _write_design_source_manifest() -> None:
+ assets_dir = DASHBOARD_DIR / "assets"
+ ensure_dir(assets_dir)
+ manifest = json.loads(LOVART_VENDOR_MANIFEST.read_text(encoding="utf-8")) if LOVART_VENDOR_MANIFEST.exists() else {}
+ write_json(assets_dir / "design-source.json", manifest)
+
+
+def _render_root_dashboard_shell() -> None:
+ assets_dir = DASHBOARD_DIR / "assets"
+ ensure_dir(assets_dir)
+ for filename in ("index.html",):
+ shutil.copy2(LOVART_TEMPLATE_DIR / filename, DASHBOARD_DIR / filename)
+ _copy_tree(LOVART_TEMPLATE_DIR / "assets", assets_dir)
+
+
+def _render_legacy_dashboard_shell() -> None:
+ legacy_dir = DASHBOARD_DIR / "legacy"
+ _remove_path(legacy_dir)
+ ensure_dir(legacy_dir)
+ shutil.copy2(LEGACY_TEMPLATE_DIR / "index.html", legacy_dir / "index.html")
+ _copy_tree(LEGACY_TEMPLATE_DIR / "assets", legacy_dir / "assets")
+ for json_name in ROOT_JSON_FILES:
+ _sync_symlink(DASHBOARD_DIR / json_name, legacy_dir / json_name)
+ _sync_symlink(DASHBOARD_DIR / "runs", legacy_dir / "runs")
+ _sync_symlink(DASHBOARD_DIR / "docs", legacy_dir / "docs")
+
+
+def _sync_run_bundles(runs: List[Dict[str, Any]]) -> None:
+ runs_dir = DASHBOARD_DIR / "runs"
+ ensure_dir(runs_dir)
+ for item in runs:
+ bundle_dir = Path(item.get("report_refs", {}).get("bundle_dir", ""))
+ if not bundle_dir.exists():
+ continue
+ _sync_symlink(bundle_dir, runs_dir / item["run_id"])
def render_run(run: Dict[str, Any]) -> Dict[str, str]:
@@ -445,32 +521,12 @@ def render_run(run: Dict[str, Any]) -> Dict[str, str]:
def render_dashboard() -> Dict[str, str]:
ensure_dir(DASHBOARD_DIR)
- _write_dashboard_docs()
advisory_records = load_json_dir(ADVISORIES_DIR)
runs = load_json_dir(RUNS_DIR)
advisory_map = {item["canonical_id"]: item for item in advisory_records if item.get("canonical_id")}
profile_map = load_profiles()
- runs_dir = DASHBOARD_DIR / "runs"
- assets_dir = DASHBOARD_DIR / "assets"
- ensure_dir(runs_dir)
- ensure_dir(assets_dir)
- for item in runs:
- bundle_dir = Path(item.get("report_refs", {}).get("bundle_dir", ""))
- if not bundle_dir.exists():
- continue
- symlink_path = runs_dir / item["run_id"]
- relative_target = os.path.relpath(bundle_dir, symlink_path.parent)
- try:
- if symlink_path.is_symlink() or symlink_path.exists():
- if symlink_path.is_symlink() and os.readlink(symlink_path) == relative_target:
- pass
- else:
- symlink_path.unlink()
- os.symlink(relative_target, symlink_path, target_is_directory=True)
- else:
- os.symlink(relative_target, symlink_path, target_is_directory=True)
- except OSError:
- continue
+
+ _sync_run_bundles(runs)
systems: Dict[str, Dict[str, Any]] = {}
for advisory in advisory_records:
@@ -567,7 +623,7 @@ def render_dashboard() -> Dict[str, str]:
for item in runs:
status = item.get("verification_status", "triage-manual")
summary["statuses"][status] = summary["statuses"].get(status, 0) + 1
- summary["systems"] = sorted(systems.values(), key=lambda item: (-item["total"], item["system_id"]))
+ summary["systems"] = sorted(systems.values(), key=lambda entry: (-entry["total"], entry["system_id"]))
summary["recent_failures"] = [
{
"run_id": item["run_id"],
@@ -579,1403 +635,21 @@ def render_dashboard() -> Dict[str, str]:
for item in decorated_runs
if item.get("verification_status") in {"triage-manual", "blocked-artifact", "blocked-destructive"}
][:20]
+
write_json(DASHBOARD_DIR / "summary.json", summary)
write_json(DASHBOARD_DIR / "runs.json", decorated_runs)
write_json(DASHBOARD_DIR / "systems.json", summary["systems"])
write_json(DASHBOARD_DIR / "advisories.json", {key: _advisory_meta(value) for key, value in advisory_map.items()})
write_json(DASHBOARD_DIR / "profiles.json", {key: _profile_meta(value) for key, value in profile_map.items()})
- styles_css = """
-:root {
- --bg: #07111f;
- --panel: rgba(9, 18, 32, 0.86);
- --panel-2: rgba(10, 24, 44, 0.92);
- --panel-soft: rgba(18, 32, 56, 0.74);
- --border: rgba(137, 171, 214, 0.22);
- --text: #f7fafc;
- --muted: #9fb3ca;
- --accent: #5eead4;
- --accent-2: #ffb86b;
- --accent-3: #90cdf4;
- --danger: #ff7b7b;
- --warning: #ffd166;
- --success: #6ee7a5;
- --shadow: 0 24px 80px rgba(1, 7, 20, 0.45);
- --radius: 20px;
-}
+ _write_dashboard_docs()
+ _write_design_source_manifest()
+ _render_root_dashboard_shell()
+ _render_legacy_dashboard_shell()
-* { box-sizing: border-box; }
-html, body { margin: 0; min-height: 100%; }
-body {
- font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
- background:
- radial-gradient(circle at top left, rgba(94, 234, 212, 0.15), transparent 28%),
- radial-gradient(circle at top right, rgba(255, 184, 107, 0.18), transparent 22%),
- linear-gradient(145deg, #050c16 0%, #08111f 44%, #0d1c31 100%);
- color: var(--text);
- overflow-x: hidden;
-}
-
-body::before {
- content: "";
- position: fixed;
- inset: 0;
- pointer-events: none;
- background-image:
- linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
- background-size: 32px 32px;
- mask-image: radial-gradient(circle at center, black 36%, transparent 78%);
- opacity: 0.28;
-}
-
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-button, input, select {
- font: inherit;
-}
-
-.dashboard-shell {
- position: relative;
- max-width: 1640px;
- margin: 0 auto;
- padding: 32px 24px 40px;
-}
-
-.hero {
- position: sticky;
- top: 0;
- z-index: 20;
- backdrop-filter: blur(18px);
- background: linear-gradient(180deg, rgba(7, 17, 31, 0.94), rgba(7, 17, 31, 0.75));
- border: 1px solid var(--border);
- border-radius: 28px;
- padding: 24px 24px 20px;
- box-shadow: var(--shadow);
-}
-
-.hero-grid {
- display: grid;
- grid-template-columns: 1.6fr 1fr;
- gap: 20px;
- align-items: start;
-}
-
-.eyebrow {
- display: inline-flex;
- align-items: center;
- gap: 8px;
- color: var(--muted);
- font-size: 0.88rem;
- letter-spacing: 0.12em;
- text-transform: uppercase;
-}
-
-.eyebrow::before {
- content: "";
- width: 10px;
- height: 10px;
- border-radius: 999px;
- background: radial-gradient(circle, var(--accent), rgba(94, 234, 212, 0.15));
- box-shadow: 0 0 24px rgba(94, 234, 212, 0.8);
- animation: pulse 2.8s ease-in-out infinite;
-}
-
-.hero h1 {
- margin: 12px 0 10px;
- font-family: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
- font-size: clamp(2rem, 4vw, 3.5rem);
- line-height: 1.02;
-}
-
-.hero p {
- margin: 0;
- color: var(--muted);
- max-width: 74ch;
-}
-
-.hero-actions {
- display: flex;
- flex-wrap: wrap;
- gap: 12px;
- margin-top: 18px;
-}
-
-.chip, .ghost-chip {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: 8px;
- border-radius: 999px;
- border: 1px solid var(--border);
- padding: 10px 14px;
- background: rgba(255,255,255,0.06);
- color: var(--text);
-}
-
-.ghost-chip {
- background: rgba(255,255,255,0.04);
-}
-
-.hero-meta {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 14px;
-}
-
-.meta-card, .glass-panel {
- background: var(--panel);
- border: 1px solid var(--border);
- border-radius: var(--radius);
- box-shadow: var(--shadow);
-}
-
-.meta-card {
- padding: 18px;
- min-height: 116px;
-}
-
-.meta-card strong {
- display: block;
- color: var(--muted);
- font-size: 0.84rem;
- letter-spacing: 0.08em;
- text-transform: uppercase;
-}
-
-.meta-card span {
- display: block;
- margin-top: 10px;
- font-size: 2rem;
- font-weight: 700;
-}
-
-.workspace {
- display: grid;
- grid-template-columns: 420px minmax(0, 1fr);
- gap: 20px;
- margin-top: 22px;
-}
-
-.sidebar {
- display: flex;
- flex-direction: column;
- gap: 18px;
-}
-
-.panel-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
- margin-bottom: 16px;
-}
-
-.panel-header h2, .panel-header h3 {
- margin: 0;
- font-size: 1rem;
- letter-spacing: 0.04em;
- text-transform: uppercase;
- color: var(--muted);
-}
-
-.glass-panel {
- padding: 18px;
- background:
- linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%),
- var(--panel);
-}
-
-.filters {
- display: grid;
- gap: 12px;
-}
-
-.filters label {
- display: grid;
- gap: 6px;
- color: var(--muted);
- font-size: 0.9rem;
-}
-
-.filters input, .filters select {
- width: 100%;
- background: rgba(255,255,255,0.05);
- color: var(--text);
- border: 1px solid rgba(159, 179, 202, 0.18);
- border-radius: 14px;
- padding: 12px 14px;
-}
-
-.run-list {
- display: grid;
- gap: 12px;
- max-height: calc(100vh - 460px);
- overflow: auto;
- padding-right: 4px;
-}
-
-.run-card {
- width: 100%;
- text-align: left;
- padding: 16px;
- border-radius: 18px;
- border: 1px solid rgba(159, 179, 202, 0.14);
- background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
- color: var(--text);
- cursor: pointer;
- transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
-}
-
-.run-card:hover, .run-card.is-active {
- transform: translateY(-1px);
- border-color: rgba(94, 234, 212, 0.42);
- background: linear-gradient(180deg, rgba(94, 234, 212, 0.14), rgba(255,255,255,0.05));
-}
-
-.run-card-top, .flex-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
-}
-
-.run-card h4 {
- margin: 10px 0 8px;
- font-size: 1rem;
- line-height: 1.35;
-}
-
-.mini-muted {
- color: var(--muted);
- font-size: 0.86rem;
-}
-
-.status-pill {
- display: inline-flex;
- align-items: center;
- gap: 7px;
- border-radius: 999px;
- padding: 6px 10px;
- font-size: 0.82rem;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.06em;
- border: 1px solid transparent;
-}
-
-.status-pill::before {
- content: "";
- width: 8px;
- height: 8px;
- border-radius: 999px;
- background: currentColor;
- box-shadow: 0 0 16px currentColor;
-}
-
-.status-blocked-artifact, .status-blocked-destructive {
- color: var(--danger);
- background: rgba(255, 123, 123, 0.14);
- border-color: rgba(255, 123, 123, 0.24);
-}
-
-.status-triage-manual, .status-suspected {
- color: var(--warning);
- background: rgba(255, 209, 102, 0.14);
- border-color: rgba(255, 209, 102, 0.24);
-}
-
-.status-verified-real {
- color: var(--success);
- background: rgba(110, 231, 165, 0.14);
- border-color: rgba(110, 231, 165, 0.24);
-}
-
-.status-verified-synthetic {
- color: var(--accent-3);
- background: rgba(144, 205, 244, 0.14);
- border-color: rgba(144, 205, 244, 0.24);
-}
-
-.status-default {
- color: var(--accent);
- background: rgba(94, 234, 212, 0.14);
- border-color: rgba(94, 234, 212, 0.24);
-}
-
-.detail-view {
- display: grid;
- gap: 18px;
-}
-
-.detail-hero {
- padding: 22px;
- overflow: hidden;
- position: relative;
-}
-
-.detail-hero::after {
- content: "";
- position: absolute;
- inset: auto -20% -55% 25%;
- height: 220px;
- background: radial-gradient(circle, rgba(94, 234, 212, 0.2), transparent 55%);
- pointer-events: none;
-}
-
-.detail-headline {
- margin: 8px 0 12px;
- font-family: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
- font-size: clamp(1.6rem, 3vw, 2.8rem);
- line-height: 1.08;
-}
-
-.tag-row, .link-row, .artifact-row {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
-}
-
-.tag {
- display: inline-flex;
- align-items: center;
- padding: 7px 10px;
- border-radius: 999px;
- background: rgba(255,255,255,0.06);
- border: 1px solid rgba(159, 179, 202, 0.18);
- color: var(--text);
- font-size: 0.86rem;
-}
-
-.stat-grid {
- display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
- gap: 12px;
- margin-top: 18px;
-}
-
-.stat-card {
- padding: 14px;
- border-radius: 16px;
- background: rgba(255,255,255,0.04);
- border: 1px solid rgba(159, 179, 202, 0.16);
-}
-
-.stat-card strong {
- display: block;
- color: var(--muted);
- font-size: 0.78rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-.stat-card span {
- display: block;
- margin-top: 10px;
- font-size: 1.15rem;
- font-weight: 700;
-}
-
-.detail-grid {
- display: grid;
- grid-template-columns: minmax(0, 1fr) 360px;
- gap: 18px;
-}
-
-.stack {
- display: grid;
- gap: 18px;
-}
-
-.progress-strip {
- display: grid;
- gap: 12px;
- margin-bottom: 16px;
-}
-
-.progress-bar {
- display: flex;
- width: 100%;
- min-height: 12px;
- overflow: hidden;
- border-radius: 999px;
- background: rgba(255,255,255,0.08);
- border: 1px solid rgba(159, 179, 202, 0.14);
-}
-
-.progress-segment {
- min-width: 10px;
- transition: width 180ms ease;
-}
-
-.progress-completed { background: linear-gradient(90deg, rgba(110, 231, 165, 0.9), rgba(94, 234, 212, 0.9)); }
-.progress-blocked { background: linear-gradient(90deg, rgba(255, 123, 123, 0.95), rgba(255, 160, 122, 0.9)); }
-.progress-failed { background: linear-gradient(90deg, rgba(255, 123, 123, 0.92), rgba(255, 209, 102, 0.88)); }
-.progress-skipped { background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(159, 179, 202, 0.3)); }
-.progress-planned { background: linear-gradient(90deg, rgba(144, 205, 244, 0.82), rgba(94, 234, 212, 0.72)); }
-.progress-other { background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.1)); }
-
-.progress-legend {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
-}
-
-.progress-legend .tag {
- gap: 7px;
-}
-
-.progress-legend .swatch {
- width: 10px;
- height: 10px;
- border-radius: 999px;
- display: inline-block;
-}
-
-.stage-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: 12px;
- margin-bottom: 18px;
-}
-
-.stage-card {
- padding: 14px;
- border-radius: 16px;
- background: rgba(255,255,255,0.04);
- border: 1px solid rgba(159, 179, 202, 0.16);
-}
-
-.stage-card strong {
- display: block;
- margin-bottom: 10px;
-}
-
-.accordion {
- overflow: hidden;
-}
-
-.accordion > summary {
- list-style: none;
- cursor: pointer;
- padding: 18px 20px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
-}
-
-.accordion > summary::-webkit-details-marker { display: none; }
-.accordion > summary span {
- font-size: 1rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--muted);
-}
-
-.accordion .accordion-content {
- padding: 0 20px 20px;
- border-top: 1px solid rgba(159, 179, 202, 0.12);
-}
-
-.timeline-list {
- display: grid;
- gap: 12px;
-}
-
-.timeline-item {
- display: grid;
- grid-template-columns: 120px 180px minmax(0, 1fr);
- gap: 12px;
- padding: 12px 0;
- border-bottom: 1px solid rgba(159, 179, 202, 0.12);
-}
-
-.timeline-item:last-child {
- border-bottom: 0;
-}
-
-.timeline-step {
- font-weight: 700;
-}
-
-.artifact-group {
- margin-bottom: 14px;
-}
-
-.artifact-group h4 {
- margin: 0 0 10px;
- color: var(--muted);
- font-size: 0.88rem;
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-.artifact-button {
- display: inline-flex;
- align-items: center;
- gap: 8px;
- margin: 0 10px 10px 0;
- padding: 10px 12px;
- border-radius: 14px;
- border: 1px solid rgba(159, 179, 202, 0.16);
- background: rgba(255,255,255,0.05);
- color: var(--text);
- cursor: pointer;
-}
-
-.artifact-button:hover, .artifact-button.is-active {
- border-color: rgba(94, 234, 212, 0.4);
- background: rgba(94, 234, 212, 0.12);
-}
-
-.log-viewer {
- min-height: 420px;
- display: grid;
- gap: 14px;
-}
-
-.viewer-toolbar {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- gap: 10px;
- align-items: center;
-}
-
-.viewer-frame {
- background: rgba(2, 8, 22, 0.88);
- border: 1px solid rgba(159, 179, 202, 0.18);
- border-radius: 16px;
- min-height: 300px;
- overflow: hidden;
-}
-
-.viewer-frame pre {
- margin: 0;
- padding: 18px;
- max-height: 560px;
- overflow: auto;
- font-family: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
- font-size: 0.88rem;
- line-height: 1.6;
- color: #d6e5f5;
- white-space: pre-wrap;
-}
-
-.viewer-frame img {
- display: block;
- width: 100%;
- height: auto;
-}
-
-.gallery {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
- gap: 14px;
-}
-
-.gallery button {
- all: unset;
- cursor: pointer;
- border-radius: 18px;
- overflow: hidden;
- border: 1px solid rgba(159, 179, 202, 0.18);
- background: rgba(255,255,255,0.04);
-}
-
-.gallery img {
- display: block;
- width: 100%;
- aspect-ratio: 4 / 3;
- object-fit: cover;
-}
-
-.gallery figcaption {
- padding: 10px 12px 14px;
- color: var(--muted);
- font-size: 0.84rem;
-}
-
-.failure-callout {
- padding: 16px 18px;
- border-radius: 18px;
- border: 1px solid rgba(255, 123, 123, 0.2);
- background: rgba(255, 123, 123, 0.09);
-}
-
-.json-block {
- background: rgba(2, 8, 22, 0.72);
- border-radius: 16px;
- border: 1px solid rgba(159, 179, 202, 0.14);
- padding: 16px;
- overflow: auto;
- font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
- font-size: 0.84rem;
- line-height: 1.55;
- color: #c9d8e8;
-}
-
-.empty-state {
- padding: 40px 24px;
- text-align: center;
- color: var(--muted);
-}
-
-.failure-feed {
- display: grid;
- gap: 10px;
-}
-
-.failure-item {
- padding: 12px 14px;
- border-radius: 16px;
- background: rgba(255,255,255,0.04);
- border: 1px solid rgba(159, 179, 202, 0.16);
-}
-
-.system-grid {
- display: grid;
- gap: 10px;
-}
-
-.system-card {
- padding: 14px 16px;
- border-radius: 16px;
- background: rgba(255,255,255,0.04);
- border: 1px solid rgba(159, 179, 202, 0.14);
-}
-
-.meter {
- position: relative;
- height: 10px;
- border-radius: 999px;
- background: rgba(255,255,255,0.08);
- overflow: hidden;
- margin-top: 10px;
-}
-
-.meter > span {
- position: absolute;
- inset: 0 auto 0 0;
- width: var(--fill, 0%);
- background: linear-gradient(90deg, var(--accent), var(--accent-2));
- border-radius: inherit;
-}
-
-.sync-indicator {
- display: inline-flex;
- align-items: center;
- gap: 8px;
-}
-
-.sync-indicator strong {
- color: var(--text);
-}
-
-.dot {
- width: 10px;
- height: 10px;
- border-radius: 999px;
- background: var(--accent);
- box-shadow: 0 0 18px rgba(94, 234, 212, 0.8);
-}
-
-@keyframes pulse {
- 0%, 100% { transform: scale(1); opacity: 0.88; }
- 50% { transform: scale(1.35); opacity: 1; }
-}
-
-@media (max-width: 1280px) {
- .workspace, .detail-grid, .hero-grid {
- grid-template-columns: 1fr;
- }
-
- .stat-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-}
-
-@media (max-width: 760px) {
- .dashboard-shell {
- padding: 18px 14px 32px;
- }
-
- .hero {
- position: static;
- }
-
- .stat-grid, .hero-meta {
- grid-template-columns: 1fr;
- }
-
- .timeline-item {
- grid-template-columns: 1fr;
- }
-}
-"""
- write_text(assets_dir / "styles.css", styles_css)
-
- app_js = """
-const state = {
- summary: null,
- runs: [],
- systems: [],
- advisories: {},
- profiles: {},
- selectedRunId: null,
- selectedArtifact: null,
- filters: { search: "", system: "", status: "", family: "" },
- autoRefresh: true,
- refreshMs: 5000,
- refreshHandle: null,
-};
-
-const $ = (id) => document.getElementById(id);
-const statusClass = (status) => `status-pill ${({
- "blocked-artifact": "status-blocked-artifact",
- "blocked-destructive": "status-blocked-destructive",
- "triage-manual": "status-triage-manual",
- "verified-real": "status-verified-real",
- "verified-synthetic": "status-verified-synthetic",
- "suspected": "status-suspected",
- "completed": "status-verified-real",
- "failed": "status-blocked-artifact",
- "skipped": "status-triage-manual"
-})[status] || "status-default"}`;
-
-function escapeHtml(value) {
- return String(value ?? "")
- .replaceAll("&", "&")
- .replaceAll("<", "<")
- .replaceAll(">", ">")
- .replaceAll('"', """);
-}
-
-function timeAgo(value) {
- if (!value) return "-";
- const diff = Date.now() - new Date(value).getTime();
- if (Number.isNaN(diff)) return value;
- const seconds = Math.floor(diff / 1000);
- if (seconds < 60) return `${seconds}s ago`;
- const minutes = Math.floor(seconds / 60);
- if (minutes < 60) return `${minutes}m ago`;
- const hours = Math.floor(minutes / 60);
- if (hours < 24) return `${hours}h ago`;
- const days = Math.floor(hours / 24);
- return `${days}d ago`;
-}
-
-async function fetchJson(url) {
- const response = await fetch(`${url}?t=${Date.now()}`, { cache: "no-store" });
- if (!response.ok) {
- throw new Error(`${url} -> ${response.status}`);
- }
- return response.json();
-}
-
-async function loadData(preserveSelection = true) {
- $("syncState").innerHTML = `
Refreshing${new Date().toLocaleTimeString()}`;
- const previousRun = state.selectedRunId;
- try {
- const [summary, runs, systems, advisories, profiles] = await Promise.all([
- fetchJson("./summary.json"),
- fetchJson("./runs.json"),
- fetchJson("./systems.json"),
- fetchJson("./advisories.json"),
- fetchJson("./profiles.json"),
- ]);
- state.summary = summary;
- state.runs = runs;
- state.systems = systems;
- state.advisories = advisories;
- state.profiles = profiles;
- hydrateFilterOptions();
-
- const hashRun = location.hash.startsWith("#run=") ? location.hash.replace("#run=", "") : null;
- const selectedCandidate = preserveSelection ? (hashRun || previousRun) : hashRun;
- if (selectedCandidate && runs.some((item) => item.run_id === selectedCandidate)) {
- state.selectedRunId = selectedCandidate;
- } else {
- state.selectedRunId = runs[0]?.run_id || null;
- }
-
- renderDashboard();
- $("syncState").innerHTML = `
Live${summary.generated_at || new Date().toISOString()}`;
- } catch (error) {
- $("syncState").innerHTML = `
Load Failed${escapeHtml(error.message)}`;
- $("runList").innerHTML = `
Dashboard load failed: ${escapeHtml(error.message)}
`;
- $("detailRoot").innerHTML = `
Unable to load dashboard data. Check generated JSON and local static server state.
`;
- }
-}
-
-function filteredRuns() {
- return state.runs.filter((item) => {
- if (state.filters.system && item.system_id !== state.filters.system) return false;
- if (state.filters.status && item.verification_status !== state.filters.status) return false;
- if (state.filters.family && item.repro_profile_id !== state.filters.family) return false;
- if (!state.filters.search) return true;
- const advisoryTitle = item.advisory_meta?.title || "";
- const haystack = [item.run_id, item.advisory_id, item.system_id, item.repro_profile_id, advisoryTitle]
- .join(" ")
- .toLowerCase();
- return haystack.includes(state.filters.search);
- });
-}
-
-function renderMetrics() {
- const metrics = [
- { label: "Advisories", value: state.summary?.advisory_count ?? 0 },
- { label: "Run Bundles", value: state.summary?.run_count ?? 0 },
- ...Object.entries(state.summary?.statuses || {}).map(([label, value]) => ({ label, value })),
- ];
- $("metrics").innerHTML = metrics
- .map((item) => `
${escapeHtml(item.label)}${escapeHtml(item.value)}`)
- .join("");
-}
-
-function renderSystemCoverage() {
- $("systemCoverage").innerHTML = state.systems
- .map((system) => {
- const total = Math.max(system.total || 0, 1);
- const verified = (system.verified_real || 0) + (system.verified_synthetic || 0);
- const fill = Math.round((verified / total) * 100);
- return `
-
-
- ${escapeHtml(system.display_name || system.system_id)}
- ${escapeHtml(system.browser_present || 0)}/${escapeHtml(system.browser_required || 0)} browser
-
-
${escapeHtml(system.system_id)} · latest ${escapeHtml(system.latest_update || "-")}
-
- real ${escapeHtml(system.verified_real || 0)}
- synthetic ${escapeHtml(system.verified_synthetic || 0)}
- blocked ${escapeHtml(system.blocked || 0)}
- manual ${escapeHtml(system.manual || 0)}
-
-
-
- `;
- })
- .join("");
-}
-
-function renderFailures() {
- const failures = state.summary?.recent_failures || [];
- $("failureFeed").innerHTML = failures.length
- ? failures
- .map((item) => `
-
-
- ${escapeHtml(item.run_id)}
- ${escapeHtml(item.status)}
-
-
${escapeHtml(item.title || item.advisory_id)}
-
${escapeHtml(item.blocked_reason || "-")}
-
- `)
- .join("")
- : `
No recent blockers.
`;
-}
-
-function renderRunList() {
- const filtered = filteredRuns();
- $("runCount").textContent = `${filtered.length} shown`;
- $("runList").innerHTML = filtered.length
- ? filtered
- .map((item) => {
- const active = item.run_id === state.selectedRunId ? "is-active" : "";
- const title = item.advisory_meta?.title || item.advisory_id;
- const reasoning = item.reasoning_lines?.[0] || item.blocked_reason || "";
- const browserLabel = item.browser_evidence?.present ? "ready" : (item.browser_evidence?.required ? "required" : "n/a");
- return `
-
- `;
- })
- .join("")
- : `
No runs match the current filters.
`;
-
- document.querySelectorAll("[data-run-id]").forEach((button) => {
- button.addEventListener("click", () => {
- state.selectedRunId = button.dataset.runId;
- location.hash = `run=${state.selectedRunId}`;
- renderRunList();
- renderDetail();
- });
- });
-}
-
-function renderDashboard() {
- renderMetrics();
- renderSystemCoverage();
- renderFailures();
- renderRunList();
- renderDetail();
-}
-
-function setFilterListeners() {
- [["searchInput", "search"], ["systemFilter", "system"], ["statusFilter", "status"], ["familyFilter", "family"]].forEach(([id, key]) => {
- $(id).addEventListener("input", (event) => {
- state.filters[key] = String(event.target.value || "").trim().toLowerCase();
- if (key !== "search") {
- state.filters[key] = String(event.target.value || "");
- }
- renderRunList();
- });
- });
-}
-
-function hydrateFilterOptions() {
- const distinct = (items) => [...new Set(items.filter(Boolean))].sort();
- const patchOptions = (id, values) => {
- const control = $(id);
- const current = control.value;
- control.innerHTML = control.dataset.base;
- control.innerHTML += distinct(values).map((value) => `
`).join("");
- control.value = current;
- };
- patchOptions("systemFilter", state.runs.map((item) => item.system_id));
- patchOptions("statusFilter", state.runs.map((item) => item.verification_status));
- patchOptions("familyFilter", state.runs.map((item) => item.repro_profile_id));
-}
-
-function defaultArtifact(run) {
- const preference = ["attack", "requests", "container", "browser", "baseline", "compose", "reports"];
- for (const key of preference) {
- const group = (run.artifact_groups || []).find((item) => item.key === key && item.items?.length);
- if (!group) continue;
- const preferredText = group.items.find((item) => item.kind === "text");
- return preferredText || group.items[0];
- }
- return null;
-}
-
-function totalProgress(progress) {
- const values = Object.values(progress || {}).map((value) => Number(value || 0));
- return values.reduce((sum, value) => sum + value, 0);
-}
-
-function renderProgressStrip(progress) {
- const total = totalProgress(progress);
- if (!total) {
- return `
-
-
-
No timeline progress recorded.
-
- `;
- }
- const order = [
- ["completed", "Completed", "progress-completed"],
- ["blocked", "Blocked", "progress-blocked"],
- ["failed", "Failed", "progress-failed"],
- ["skipped", "Skipped", "progress-skipped"],
- ["planned", "Planned", "progress-planned"],
- ["other", "Other", "progress-other"],
- ];
- const segments = order
- .filter(([key]) => Number(progress?.[key] || 0) > 0)
- .map(([key, _label, klass]) => {
- const count = Number(progress?.[key] || 0);
- const pct = Math.max((count / total) * 100, 4);
- return `
`;
- })
- .join("");
- const legend = order
- .filter(([key]) => Number(progress?.[key] || 0) > 0)
- .map(([key, label, klass]) => `
-
-
- ${escapeHtml(label)} ${escapeHtml(progress?.[key] || 0)}
-
- `)
- .join("");
- return `
-
-
${segments}
-
${legend}
-
- `;
-}
-
-function renderStageCards(run) {
- const timeline = run.timeline || [];
- if (!timeline.length) {
- return `
No stage records available.
`;
- }
- return `
-
- ${timeline.map((item) => `
-
- ${escapeHtml(item.step || "-")}
- ${escapeHtml(item.status || "unknown")}
- ${escapeHtml(item.detail || "-")}
- ${escapeHtml(item.at || "-")}
-
- `).join("")}
-
- `;
-}
-
-async function openArtifact(href, label, kind) {
- state.selectedArtifact = { href, label, kind };
- document.querySelectorAll(".artifact-button").forEach((button) => {
- button.classList.toggle("is-active", button.dataset.href === href);
- });
- $("artifactLabel").textContent = label;
- $("artifactOpen").href = href;
- $("artifactMeta").textContent = href;
- try {
- if (kind === "image") {
- $("artifactViewer").innerHTML = `
}?t=${Date.now()})
`;
- return;
- }
- if (href.endsWith(".html")) {
- $("artifactViewer").innerHTML = `
`;
- return;
- }
- const response = await fetch(`${href}?t=${Date.now()}`, { cache: "no-store" });
- if (!response.ok) throw new Error(`${href} -> ${response.status}`);
- const text = await response.text();
- let formatted = text;
- if (href.endsWith(".json")) {
- try {
- formatted = JSON.stringify(JSON.parse(text), null, 2);
- } catch (_error) {
- }
- }
- $("artifactViewer").innerHTML = `
${escapeHtml(formatted)}`;
- } catch (error) {
- $("artifactViewer").innerHTML = `
Artifact load failed: ${escapeHtml(error.message)}`;
- }
-}
-
-function renderDetail() {
- const run = state.runs.find((item) => item.run_id === state.selectedRunId);
- if (!run) {
- $("detailRoot").innerHTML = `
Select a run to inspect full timeline, logs, sources, and reasoning.
`;
- return;
- }
-
- const advisory = run.advisory_meta || {};
- const profile = run.profile_meta || {};
- const screenshotItems = (run.artifact_groups || [])
- .find((group) => group.key === "browser")
- ?.items.filter((item) => item.kind === "image") || [];
-
- $("detailRoot").innerHTML = `
-
- Local Verification Workspace
-
-
${escapeHtml(run.verification_status)}
-
- ${escapeHtml(run.system_id)}
- ${escapeHtml(run.repro_profile_id)}
- ${escapeHtml(run.artifact_mode)}
- ${escapeHtml(run.verification_mode)}
- ${escapeHtml(run.target_env || "local-docker")}
-
-
${escapeHtml(advisory.title || run.advisory_id)}
- ${escapeHtml(advisory.summary || "No summary available.")}
-
-
-
Timeline Steps${escapeHtml(run.timeline?.length || 0)}
-
Artifacts${escapeHtml((run.artifact_groups || []).reduce((sum, group) => sum + group.count, 0))}
-
Browser${run.browser_evidence?.present ? "Ready" : (run.browser_evidence?.required ? "Required" : "Optional")}
-
Finished${escapeHtml(timeAgo(run.finished_at))}
-
-
-
-
-
- Progress Timeline${escapeHtml(run.timeline?.length || 0)} steps
-
- ${renderProgressStrip(run.progress)}
- ${renderStageCards(run)}
-
- ${(run.timeline || []).map((item) => `
-
- ${escapeHtml(item.at || "-")}
- ${escapeHtml(item.step || "-")}
-
-
${escapeHtml(item.status || "unknown")}
-
${escapeHtml(item.detail || "-")}
-
- `).join("") || `
No timeline items available.
`}
-
-
-
-
- Attack Plan & Reasoning${escapeHtml(profile.vuln_family || "unknown")}
-
- ${run.blocked_reason ? `
Failure reason${escapeHtml(run.blocked_reason)}
` : ""}
-
- destructive risk ${escapeHtml(profile.destructive_risk || "-")}
- cleanup ${escapeHtml(profile.cleanup_policy || "-")}
- targets ${(profile.allowed_target_types || []).join(", ") || "-"}
-
-
- ${(run.reasoning_lines || []).map((line) => `
${escapeHtml(line)}
`).join("")}
-
-
- ${(profile.success_criteria || []).map((line) => `${escapeHtml(line)}`).join("")}
-
-
-
-
- Evidence Explorer${escapeHtml((run.artifact_groups || []).length)} groups
-
- ${(run.artifact_groups || []).map((group) => `
-
- ${escapeHtml(group.label)} · ${escapeHtml(group.count)}
-
- ${group.items.map((item) => `
-
- `).join("")}
-
-
- `).join("") || `
No artifacts linked for this run.
`}
- ${screenshotItems.length ? `
-
- ${screenshotItems.map((item) => `
-
- `).join("")}
-
- ` : ""}
-
-
-
- Live Log Viewer${state.selectedArtifact ? "active" : "idle"}
-
-
-
-
Select a report, log, JSON, screenshot, or timeline file to preview it here.
-
-
-
-
-
-
- Sources & Fix Topics${escapeHtml((advisory.secondary_source_urls || []).length + (advisory.official_source_url ? 1 : 0))} links
-
-
- ${(advisory.aliases || []).map((alias) => `${escapeHtml(alias)}`).join("")}
-
-
-
-
-
-
- Run JSONraw
- ${escapeHtml(JSON.stringify(run, null, 2))}
-
-
- Advisory JSONraw
- ${escapeHtml(JSON.stringify(advisory, null, 2))}
-
-
- Profile JSONraw
- ${escapeHtml(JSON.stringify(profile, null, 2))}
-
-
- `;
-
- document.querySelectorAll(".artifact-button").forEach((button) => {
- button.addEventListener("click", () => openArtifact(button.dataset.href, button.dataset.label, button.dataset.kind));
- });
-
- $("refreshArtifact")?.addEventListener("click", () => {
- if (state.selectedArtifact) {
- openArtifact(state.selectedArtifact.href, state.selectedArtifact.label, state.selectedArtifact.kind);
- }
- });
-
- if (!state.selectedArtifact || !(run.artifact_groups || []).some((group) => group.items.some((item) => item.href === state.selectedArtifact.href))) {
- const artifact = defaultArtifact(run);
- if (artifact) {
- openArtifact(artifact.href, artifact.label, artifact.kind);
- }
- } else {
- openArtifact(state.selectedArtifact.href, state.selectedArtifact.label, state.selectedArtifact.kind);
- }
-}
-
-function attachGlobalActions() {
- $("searchInput").addEventListener("input", (event) => {
- state.filters.search = String(event.target.value || "").trim().toLowerCase();
- renderRunList();
- });
- [["systemFilter", "system"], ["statusFilter", "status"], ["familyFilter", "family"]].forEach(([id, key]) => {
- $(id).addEventListener("input", (event) => {
- state.filters[key] = String(event.target.value || "");
- renderRunList();
- });
- });
- $("refreshDashboard").addEventListener("click", () => loadData(false));
- $("autoRefresh").addEventListener("change", (event) => {
- state.autoRefresh = Boolean(event.target.checked);
- startRefreshLoop();
- });
-}
-
-function startRefreshLoop() {
- if (state.refreshHandle) {
- clearInterval(state.refreshHandle);
- state.refreshHandle = null;
- }
- if (!state.autoRefresh) return;
- state.refreshHandle = setInterval(() => loadData(true), state.refreshMs);
-}
-
-async function init() {
- ["systemFilter", "statusFilter", "familyFilter"].forEach((id) => {
- $(id).dataset.base = $(id).innerHTML;
- });
- attachGlobalActions();
- await loadData(false);
- startRefreshLoop();
- window.addEventListener("hashchange", () => loadData(false));
-}
-
-document.addEventListener("DOMContentLoaded", init);
-"""
- write_text(assets_dir / "app.js", app_js)
-
- html_page = """
-
-
-
-
-
-
websafe authorized lab dashboard
-
-
-
-
-
-
-
-
Authorized Lab Dashboard
-
本地攻防实证工作台
-
面向授权实验场景的本地静态前端。聚合 advisory、run bundle、日志、浏览器证据、失败原因、利用思路与源头信息，并支持可折叠细节与自动刷新。
-
-
-
-
-
-
-
-
-
- Select a run to inspect full details.
-
-
-
-
-
-
-"""
- write_text(DASHBOARD_DIR / "index.html", html_page)
return {
"dashboard_dir": str(DASHBOARD_DIR),
- "index_html": str(DASHBOARD_DIR / "index.html"),
+ "index": str(DASHBOARD_DIR / "index.html"),
+ "legacy_index": str(DASHBOARD_DIR / "legacy" / "index.html"),
+ "summary_json": str(DASHBOARD_DIR / "summary.json"),
}