feat: UI screenshot harness — automated visual acceptance for every PR

[dev01lay2]

What

Automated UI screenshot harness that captures every page and interaction of the full Tauri app, running inside Docker with Xvfb + tauri-driver (WebDriver).

How it works

Docker container:
  Xvfb :99 → tauri-driver :4444 → WebKitWebDriver → ClawPal binary (full Tauri app)
                    ↑
  Selenium (Node.js) — CSS selector navigation + driver.takeScreenshot()

• No coordinate hacking — navigates via DOM selectors (By.css('aside nav button'))
• Full Tauri IPC — Rust backend runs, all commands functional
• 28 screenshots across 13 business flows:

  Flow	What
  01-start-page	Overview, Profiles, Settings sections
  02-home	Dashboard, scrolled
  03-channels	Channel list
  04-recipes	Recipe list
  05-cron	Cron jobs
  06-doctor	Diagnostics
  07-context	OpenClaw context
  08-history	Session history
  09-chat	Chat panel open
  10-settings	4 scroll positions
  11-dark-mode	7 pages in dark theme
  12-responsive	1024×680 minimum width
  13-dialogs	Create Agent dialog

CI Integration

Same pattern as metrics.yml:

• Triggers on PR to develop/main
• Uses peter-evans/find-comment + create-or-update-comment
• Every PR push updates the screenshot comment with inline images
• Screenshots also uploaded as downloadable artifact (30 day retention)

Verified

✅ Built and ran on ns5027657 (this server) — all 28 screenshots captured successfully with proper UI rendering (verified via image analysis).

See baseline screenshots: #138

Files

File	Purpose
harness/screenshot/Dockerfile	Multi-stage: build Tauri binary → runtime with Xvfb + WebDriver
harness/screenshot/capture.mjs	Selenium test script — 13 flows with DOM navigation
harness/screenshot/entrypoint.sh	Starts Xvfb → tauri-driver → runs capture
harness/screenshot/mock-data/	Mock OpenClaw config for realistic page content
.github/workflows/screenshot.yml	GitHub Actions workflow

[github-actions]

📊 Test Coverage Report

Metric	Base (develop)	PR (feat/screenshot-harness)	Delta
Lines	74.34% (6134/8251)	74.34% (6134/8251)	⚪ ±0.00%
Functions	68.88% (704/1022)	68.88% (704/1022)	⚪ ±0.00%
Regions	75.86% (10156/13388)	75.86% (10156/13388)	⚪ ±0.00%

Coverage measured by cargo llvm-cov (clawpal-core + clawpal-cli).

[github-actions]

📏 Metrics Gate Report

Status: ✅ All gates passed

Commit Size ❌

Metric	Value	Limit	Status
Commits checked	1	—	—
All within limit	0/1	≤ 500 lines	❌
Largest commit	633 lines	≤ 500	❌

Bundle Size ✅

Metric	Value	Limit	Status
JS bundle (raw)	913 KB	—	—
JS bundle (gzip)	287 KB	≤ 512 KB	✅
JS initial load (gzip)	165 KB	—	ℹ️

Perf Metrics E2E ✅

Metric	Value	Limit	Status
Tests	10 passed, 0 failed	0 failures	✅
RSS (test process)	3.2 MB	≤ 80 MB	✅
VMS (test process)	269.9 MB	—	ℹ️
Command P50 latency	0 ms	—	ℹ️
Command P95 latency	0 ms	≤ 100 ms	✅
Command max latency	0 ms	—	ℹ️

Command Perf (local) ✅

Metric	Value	Status
Tests	4 passed, 0 failed	✅
Commands measured	5	ℹ️
RSS (test process)	4.4 MB	ℹ️

Local command timings

Command	P50	P95	Max
local_openclaw_config_exists	0	0	0
list_ssh_hosts	0	0	0
get_app_preferences	0	0	0
read_app_log	0	0	0
read_error_log	0	0	0

Command Perf (remote SSH) ✅

Metric	Value	Status
SSH transport	OK	✅
Command failures	12/15 runs	⚠️ expected in Docker

Remote command timings (via Docker SSH)

Command	Median	Max
openclaw_status	2331 ms	3266 ms
cat__root_.openclaw_openclaw.json	249 ms	251 ms
openclaw_gateway	2446 ms	2582 ms
openclaw_cron	2302 ms	2304 ms
openclaw_agent	2412 ms	2566 ms

Home Page Render Probes ✅

Probe	Value	Limit	Status
status	9 ms	—	ℹ️
version	9 ms	—	ℹ️
agents	9 ms	—	ℹ️
models	111 ms	—	ℹ️
settled	9 ms	< 5000 ms	✅

Code Readability (informational)

File	Lines	Target	Status
commands/mod.rs	230	≤ 2000	✅
App.tsx	1737	≤ 500	⚠️
Files > 500 lines	28	trend ↓	ℹ️

---

📊 Metrics defined in docs/architecture/metrics.md

[github-actions]

📸 UI Screenshots

Commit: 8ab124702044ba7efe0c7cc9fb15ea124ff54b26 | Screenshots: Download artifact

Light Mode — Core Pages

Start Page	Home	Channels

Recipes	Cron	Doctor

Context	History	Chat Panel

Settings (4 scroll positions)

Main	Appearance	Advanced	Bottom

Start Page Sections

Overview	Profiles	Settings

Dark Mode

Start	Home	Channels	Doctor

Dark mode — more pages

Recipes	Cron	Settings

Responsive + Dialogs

Home 1024×680	Chat 1024×680	Create Agent

---

🔧 Harness: Docker + Xvfb + tauri-driver + Selenium | 28 screenshots, 13 flows

[github-actions]

📦 PR Build Artifacts

Platform	Download	Size
Windows-x64	📥 clawpal-Windows-x64	15.6 MB
Linux-x64	📥 clawpal-Linux-x64	102.7 MB
macOS-ARM64	📥 clawpal-macOS-ARM64	12.3 MB
macOS-x64	📥 clawpal-macOS-x64	12.9 MB

---

🔨 Built from d14c86e · View workflow run
⚠️ Unsigned development builds — for testing only