feat: make semantic action graph the primary incident view

README.md

@@ -80,8 +80,8 @@ applyEffects(state, effects);
 2. 打开 `/agentsentry` 返回的认证 URL。裸 `http://127.0.0.1:8765/` 在全新浏览器中按设计返回 `401`；bootstrap token 写入安全 session cookie 后立即从地址栏移除。
 3. 进入 `/command-lab`，先运行一个普通文件写入或健康检查，证明系统不是一刀切。
 4. 再运行隐藏指令、敏感数据外发或记忆投毒样例，观察动作在执行前进入 `deny` 或 `ask`。
-5. 打开 `/security-screen` 的“因果”视图，查看 `intent -> capability -> data -> action -> sink` 路径和命中的边界。
-6. 回到首页查看 `tool_decision`、`guard_finding`、`alert`、`tool_result`，并导出 JSON/CSV 审计记录。
+5. 回到首页查看实时生长的 `intent -> capability -> data -> action -> sink -> guard -> decision` 语义动作图。
+6. 点击高亮攻击路径和右侧 Inspector，回放污染数据如何影响危险参数并在执行前被阻断；需要全局统计时再进入 `/security-screen`。
 
 更完整的演示话术和复现顺序见 [演示与复现实验指南](reports/demo_and_reproduction.md)。
 
@@ -167,9 +167,9 @@ $env:AGENTSENTRY_API_KEY="YOUR_JUDGE_KEY"
 
 认证后可使用三个主视图：
 
-- `/`：实时记录、裁决详情、JSON/CSV 导出和运行配置。
+- `/`：主产品入口，按会话展示实时语义动作图、攻击路径、可读裁决依据和执行回放。
 - `/command-lab`：受控业务工具与公开攻击样例的逐条复测入口。
-- `/security-screen`：安全态势、四域一环指标、告警时间线和 Live Causal Graph。
+- `/security-screen`：全局安全态势、四域一环指标、告警时间线和 3D 拓扑补充视图。
 
 Dashboard 默认只允许 loopback。若要绑定 `0.0.0.0`，必须显式启用远程访问并配置认证 token；不要为了容器部署直接暴露未认证端口。
 

design-qa.md

@@ -1,42 +1,131 @@
-# Security Screen DAG Design QA
+# Semantic Action Graph Design QA
 
-- source visual truth path: `.tmp/graph-v2-1920x1080.png` and `.tmp/graph-v2-1366x768.png`
-- implementation URL: `http://127.0.0.1:8766/security-screen`
-- implementation screenshot path: unavailable; the primary in-app Browser failed before capture because the shared automation runtime omitted its sandbox metadata
-- viewport: intended checks at 1920x1080 and 1366x768
-- state: causal graph view with a real attack trace; authorized and enforcement-bypass traces covered by projection tests
-- full-view comparison evidence: blocked because a current implementation screenshot could not be captured
-- focused region comparison evidence: an independent Chromium pass verified the live 1366x768 layout and interactions, but did not retain a screenshot artifact for source-to-implementation comparison
+- source visual truth path: `E:\weix\xwechat_files\wxid_qb9bpbg86nc222_5bd3\temp\RWTemp\2026-08\0aded3c3359cb22b61fecbb3abf4660c.png`
+- implementation URL: `http://127.0.0.1:8766/`
+- implementation screenshot path: `artifacts/design-qa/implementation-1680x944-final-20260808.jpg`
+- responsive evidence: `artifacts/design-qa/implementation-1366x768-final-20260808.jpg`, `artifacts/design-qa/implementation-390x844-final-20260808.jpg`
+- full-view comparison: `artifacts/design-qa/comparison-reference-left-implementation-right-final-20260808.jpg`
+- focused comparisons: `artifacts/design-qa/comparison-focused-context-final-20260808.jpg`, `artifacts/design-qa/comparison-focused-graph-final-20260808.jpg`, `artifacts/design-qa/comparison-focused-inspector-final-20260808.jpg`
+- primary viewport: `1680x944`
+- state: deny session selected, attack primary path visible, decision node selected, timeline at LIVE
+- browser-rendered evidence: Chrome local preview connected to the real dashboard endpoints
+- primary interactions tested: node and edge selection, all timeline ticks, event-result shortcuts, full-graph toggle, draggable nodes with connected-edge redraw, layout persistence after reload, allow/ask/deny session switching, replay controls, more-actions menu, and allowlist confirmation dialog
+- console errors checked: 0 errors, 0 warnings
+
+## Full-view Comparison Evidence
+
+The source and current implementation were opened together in the full-view comparison artifact. The implementation preserves the source hierarchy of navigation, request context, causal graph, evidence inspector, and event timeline while applying the requested product changes:
+
+- A dynamic core-conclusion bar is now the first content layer.
+- Request context is compressed and Prompt Injection evidence is promoted.
+- Red is limited to confirmed attack content; amber marks suspicious behavior, blue/gray marks normal behavior, and green marks successful enforcement.
+- The default graph is the attack primary path; the complete dependency graph is opt-in.
+- Event summary and timeline are merged into one dynamic incident story.
+
+No actionable P0, P1, or P2 full-view mismatch remains.
+
+## Focused Region Comparison Evidence
+
+- Request context: the focused comparison confirms the four large source cards were intentionally compressed into user request, model input, compact tool tags, and a stronger detection card. Long content wraps and the panel scrolls at short desktop heights.
+- Causal graph: the focused comparison confirms semantic node types, labeled relations, primary-path emphasis, and a green enforcement outcome. The calmer palette preserves red for the Prompt Injection branch.
+- Evidence inspector: the focused comparison confirms the new layered hierarchy of current selection, what happened, local facts, and collapsed technical details. Normal nodes and relations do not inherit irrelevant attack-wide fields.
+
+## Required Fidelity Surfaces
+
+- Fonts and typography: Segoe UI / Microsoft YaHei UI and Cascadia Code fallbacks keep Chinese labels, metadata, policy codes, and graph labels readable. Letter spacing is zero and primary labels do not clip.
+- Spacing and layout rhythm: the 1680 view uses compact three-column investigation tracks plus a 220px result rail. At 1366, context and inspector remain independently scrollable. At 390, the conclusion and graph lead the vertical flow with no page-level horizontal overflow.
+- Colors and visual tokens: blue/gray represent normal behavior, amber represents suspicious behavior, red represents confirmed attack content, and green represents effective safety control. The page no longer reads as a single red alarm state.
+- Image and icon fidelity: the supplied shield asset and vendored Lucide icon set are used. No placeholder imagery, emoji, handcrafted SVG, or CSS illustration was introduced.
+- Copy and content: visible incident IDs, timestamps, tools, targets, decisions, evidence, policies, and timeline events come from `/api/security/overview`, `/api/records`, and `/api/settings/enforcement`. Visible branding is `玄鉴`.
+- Interaction and accessibility: graph nodes and edge hit areas are keyboard-focusable, selected items have visible emphasis, nodes are draggable, timeline ticks are buttons, summary results are buttons, dialogs are labeled, and reduced-motion behavior is supported. Compact metadata now uses contrast ratios above 4.5:1, and visible timeline/alert labels are included in their accessible names.
+
+## Comparison History
+
+1. Replaced the dashboard-first composition with the supplied incident-detail structure.
+2. Added real backend projection for session, graph, inspector, request context, and timeline data.
+3. Added selection-specific node and edge evidence instead of a static attack-wide JSON panel.
+4. Added timeline-to-graph synchronization, result-summary shortcuts, draggable nodes, and persisted per-view layouts.
+5. Added the dynamic core conclusion, compressed context, detection card, primary-path mode, layered inspector, and merged result rail.
+6. Corrected the preview tool call from `graph_builder` to `send_email` and mapped that timeline step to `action-email`.
+7. Corrected review-event detection time to prefer the matching audit record's full `created_at` value.
+8. Removed narrow-screen graph-confidence clipping by hiding secondary graph metadata below 1480px.
+9. Corrected the more-actions menu direction so the allowlist entry is visible and its confirmation dialog is reachable.
+10. Raised compact metadata contrast and aligned brand, alert, and timeline accessible names with their visible labels.
 
 ## Findings
 
-- P1: A source-to-implementation visual comparison is not available. The HTML module parses, the live endpoint serves the new markup, and the 1366x768 live pass found no overflow or console errors, but a retained current screenshot is still required for formal comparison at both target viewports.
-
-## Patches Made Since Previous QA
-
-- Preserved the existing security-screen palette, panel layout, and Three.js topology.
-- Replaced the causal view's serpentine coordinates with a topological rank layout.
-- Added connected display-only collapse nodes for long paths.
-- Added fit, zoom, pan, keyboard tabs, node/edge inspection, directed focus, stable alert selection, dynamic evidence legend, and partial-graph counters.
-- Added attack, authorized, and enforcement-bypass trace presentations.
-- Added a six-step causal story in both the graph header and evidence bar: authorization actor, authorization result, data field, tool chain, destination, and verdict.
-- Made the first real graph open automatically while preserving a user's manual topology/causal view choice across polling refreshes.
-- Verified the rebuilt `8766` endpoint serves the six-step markup and currently exposes 4 real causal graphs across 66 overview alerts.
-- Bound authorization evidence to the final Sink action so an earlier authorized read cannot be presented as authorization for a later unapproved external send.
-- Separated graph-path verdict from the final merged enforcement decision; the sixth step now follows the actual alert action.
-- Added two frontend regression tests for those security invariants.
-- Consolidated the three crowded left-column cards and the attack-chain card into one four-tab `态势侧舱`; hidden panes continue receiving live render updates.
-- Converted the attack chain to a vertical side-panel sequence and expanded the bottom row from three cramped columns to two wider evidence panels.
-- Replaced the generic competition-ready banner with `玄鉴已启动 · 全域戒备` and live protection-layer wording.
-- Added keyboard tab navigation (`ArrowLeft`, `ArrowRight`, `Home`, `End`) and stable per-tab live summaries.
-
-## Implementation Checklist
-
-- Capture both target viewports from the current `8766` build.
-- Check node and edge-label collisions with 6, 12, and 16 projected nodes.
-- Verify node selection, edge selection, inspector close, wheel zoom, drag pan, reset, Tab, and arrow-key view switching.
-- Compare the current screenshots against the two source screenshots in one combined visual input.
-- Reconfirm all six story cells at 1920x1080 and retain both current screenshots for comparison.
-- Capture the new four-tab side console at 1920x1080 and 1366x768; verify every tab, focus state, vertical attack-chain layout, and two-column bottom row without overlap.
+No actionable P0, P1, or P2 findings remain.
+
+## Follow-up Polish
+
+- P3: at 1366x768, request context and Inspector use internal scrolling to protect the graph and result rail; a future density preference could trade footer height for more vertical investigation space.
+- P3: the default primary-path graph uses a deliberately quiet background compared with the source so relation labels remain legible during replay.
+
+final result: passed
+
+## Operations Workspace QA (2026-08-08)
+
+- implementation URL: `http://127.0.0.1:8767`
+- routes verified: `/overview`, `/agents`, `/policies`, `/tools`, `/alerts`, `/audit`, `/settings`
+- desktop evidence: `artifacts/design-qa/workspace-*-1680.png`
+- mobile evidence: `artifacts/design-qa/workspace-*-390.png`
+- data contracts verified: security overview, records, stats, policy config, tool manifests, alerts, health, enforcement, and checkpoints
+- browser state: every route reached `LIVE` and rendered backend fixture data without a synchronization error
+- interaction checks: tool detail and revoke-confirmation dialog, tool filtering, policy dirty state, alert detail, audit filtering and detail, agent detail, mode inventory, and security-stack inventory
+- navigation check: overview and agent session links select the requested attack-monitor session through `?session=...`
+- branding check: dynamic backend labels display `玄鉴`; internal API field names remain unchanged
+- runtime errors observed during the interaction pass: 0
+
+The workspace reuses the attack-monitor shell, density, color semantics, navigation, and responsive behavior. The QA pass corrected native button backgrounds in alert and identity-risk rows, removed danger color from zero-value attack metrics, and constrained long section metadata on mobile.
+
+No actionable P0, P1, or P2 workspace finding remains.
+
+## Theme Toggle QA (2026-08-08)
+
+- source visual truth path: existing semantic action graph and operations workspace screens
+- implementation screenshots: `artifacts/design-qa/theme-overview-midnight-1680.png`, `artifacts/design-qa/theme-overview-graphite-1680.png`, `artifacts/design-qa/theme-root-graphite-1680.png`, `artifacts/design-qa/theme-overview-graphite-390.png`
+- states: default midnight, graphite after click, graphite after reload, graphite on attack monitor, graphite on 390px mobile viewport
+- primary interactions tested: theme button click, icon and accessible label update, localStorage persistence, cross-route persistence, and mobile viewport rendering
+- console errors checked: 0 runtime errors during the theme interaction pass
+- visual result: the graphite palette changes shell, panel, graph, and control surfaces while retaining red/amber/green risk semantics
+- responsive result: no horizontal overflow on the verified 1680px and 390px states
+
+No actionable P0, P1, or P2 theme finding remains.
+
+## Production Console Restraint Pass (2026-08-09)
+
+- routes verified: `/overview`, `/`, `/tools`
+- viewports verified: 1680x944 desktop and 390x844 mobile
+- themes verified: 夜航 and 石墨, including persistence across routes
+- data source: the live local dashboard contracts on port 8767; no backend response shape changed
+- interaction checks: attack edge selection, normal-node selection, selection-specific Inspector content, theme switching, and internal table scrolling
+- runtime checks: API state reached `实时`; no browser console errors or warnings were observed
+
+The overview now leads with current safety status, primary risk, and required attention instead of eight equal KPI cards. Secondary metrics use typography and spacing rather than individual frames. Tool trust and boolean properties render as plain attributes, while revocation and signature integrity remain explicit status badges.
+
+The causal graph now uses neutral gray for ordinary behavior, amber for sensitive or suspicious data, red for confirmed attack propagation, and green for effective enforcement. Visible relation labels use concise Chinese product language while raw relation kinds remain available in technical details. On mobile, the page has no document-level horizontal overflow; wide tool tables scroll only inside their table container.
+
+No actionable P0, P1, or P2 finding remains after this pass.
+
+## Navigation Brand Mark QA (2026-08-09)
+
+- source visual truth path: `E:\soft\qq记录\Tencent Files\2726640566\nt_qq\nt_data\Pic\2026-08\Ori\c0d3a891f491c1a42bf05aa6e57da686.png`
+- implementation asset path: `openclaw-plugin/public/brand-mark.png`
+- implementation screenshot path: unavailable because the configured in-app browser connection is not exposed in this session
+- intended viewport and state: 1680x944 desktop, shared navigation header on `/` and `/overview`
+- focused asset evidence: the supplied 1024x1024 lockup and the transparent 340x356 shield crop were opened at original resolution; the crop preserves the complete shield silhouette and blue gradient without duplicating the `玄鉴` wordmark
+- runtime evidence: both routes return the new asset reference; `/brand-mark.png?v=20260809-1` returns `200`, `Content-Type: image/png`, and 115999 bytes
+- responsive code evidence: the shared desktop slot is 42x44px and the existing mobile override constrains the mark to the compact header
+- checks: build, typecheck, lint, focused unit tests, source/build asset hash, and `git diff --check` passed
+
+### Findings
+
+No P0/P1/P2 issue was found in the source asset, transparent crop, route integration, MIME response, or responsive sizing rules. A browser-rendered comparison of the final navigation header could not be captured in this session.
+
+### Comparison History
+
+1. Replaced the legacy navigation shield reference with the supplied raster brand mark.
+2. Removed the legacy hue rotation so the supplied blue gradient renders unchanged.
+3. Verified the same shared brand lockup on the attack monitor and operations workspace shells.
 
 final result: blocked

openclaw-plugin/package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "node ./scripts/build.mjs",
+    "preview:dashboard": "npm run build && node ./scripts/dashboard-ui-preview.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --max-warnings=0 config.ts index.ts core server tests",
     "test": "vitest run && npm run test:policy && npm run test:security && npm run test:property",

openclaw-plugin/public/README.md

@@ -4,8 +4,8 @@
 
 页面入口：
 
-- `index.html`：运行记录与风险观测。
+- `index.html`：实时语义动作图、会话故事、裁决 Inspector 与执行回放。
 - `command-lab.html`：业务测试台和公开 benchmark 单条复测。
-- `security-screen.html`：安全态势感知大屏。
+- `security-screen.html`：全局安全态势与 3D 拓扑补充视图。
 
 所有样式和脚本都本地加载，不依赖外部 CDN。