feat: visual artifacts context file with 5 example patterns for AI-generated visuals
This commit is contained in:
Ken
Executable
+230
@@ -0,0 +1,230 @@
|
||||
#!/bin/bash
|
||||
# test_visual_artifacts_md.sh - Verify bundle/context/visual-artifacts.md (task-6)
|
||||
# RED: Run before file is created (should fail)
|
||||
# GREEN: Run after file is created (should pass)
|
||||
|
||||
REPO=/home/ken/workspace/research-workbench
|
||||
PASS=0
|
||||
FAIL=0
|
||||
|
||||
check_file_exists() {
|
||||
local path="$1"
|
||||
if [ -f "$REPO/$path" ]; then
|
||||
echo "PASS: '$path' exists"
|
||||
((PASS++))
|
||||
else
|
||||
echo "FAIL: '$path' should exist but is missing"
|
||||
((FAIL++))
|
||||
fi
|
||||
}
|
||||
|
||||
check_contains() {
|
||||
local file="$1"
|
||||
local description="$2"
|
||||
local pattern="$3"
|
||||
if grep -qF -- "$pattern" "$REPO/$file" 2>/dev/null; then
|
||||
echo "PASS: $file contains '$description'"
|
||||
((PASS++))
|
||||
else
|
||||
echo "FAIL: $file is missing '$description'"
|
||||
((FAIL++))
|
||||
fi
|
||||
}
|
||||
|
||||
check_regex() {
|
||||
local file="$1"
|
||||
local description="$2"
|
||||
local pattern="$3"
|
||||
if grep -qE "$pattern" "$REPO/$file" 2>/dev/null; then
|
||||
echo "PASS: $file matches '$description'"
|
||||
((PASS++))
|
||||
else
|
||||
echo "FAIL: $file is missing '$description' (pattern: $pattern)"
|
||||
((FAIL++))
|
||||
fi
|
||||
}
|
||||
|
||||
TARGET="bundle/context/visual-artifacts.md"
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# File existence
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo "=== Checking $TARGET exists ==="
|
||||
check_file_exists "$TARGET"
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Intro section
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking Intro section ==="
|
||||
check_regex "$TARGET" "intro / overview heading" "^# |^## "
|
||||
check_contains "$TARGET" "visual fenced code block tag" '```visual'
|
||||
check_regex "$TARGET" "sandboxed iframe mention" 'sandbox|iframe|sandboxed'
|
||||
check_regex "$TARGET" "pre-loaded libraries mention" 'pre.loaded|preloaded|pre-loaded'
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# When to Generate section
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking When to Generate section ==="
|
||||
check_regex "$TARGET" "When to Generate heading" 'When to Generate|When to Use'
|
||||
check_regex "$TARGET" "comparing options trigger" 'compar'
|
||||
check_regex "$TARGET" "trends trigger" 'trend'
|
||||
check_regex "$TARGET" "locations trigger" 'locat'
|
||||
check_regex "$TARGET" "scoring/ranking trigger" 'scor|rank'
|
||||
check_regex "$TARGET" "budget/breakdown trigger" 'budget|breakdown'
|
||||
check_regex "$TARGET" "dashboard trigger" 'dashboard'
|
||||
check_regex "$TARGET" "proactive / don't wait to be asked" "proactive|don.t wait|without being asked"
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Available Libraries section
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking Available Libraries section ==="
|
||||
check_regex "$TARGET" "Available Libraries heading" 'Available Lib|Libraries.*pre'
|
||||
check_regex "$TARGET" "Tabler CSS entry" 'Tabler'
|
||||
check_regex "$TARGET" "Chart.js entry" 'Chart\.js|Chart'
|
||||
check_contains "$TARGET" "Chart global variable" '`Chart`'
|
||||
check_regex "$TARGET" "Leaflet.js entry" 'Leaflet'
|
||||
check_contains "$TARGET" "L global variable" '`L`'
|
||||
check_regex "$TARGET" "React v19 entry" 'React.*19|React v19'
|
||||
check_contains "$TARGET" "React global" '`React`'
|
||||
check_contains "$TARGET" "ReactDOM global" '`ReactDOM`'
|
||||
check_regex "$TARGET" "Babel entry" 'Babel'
|
||||
check_regex "$TARGET" "JSX compilation" 'JSX|jsx'
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Output Format section
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking Output Format section ==="
|
||||
check_regex "$TARGET" "Output Format heading" 'Output Format'
|
||||
check_contains "$TARGET" "visual tag in output example" '```visual'
|
||||
check_regex "$TARGET" "title field" '"title"'
|
||||
check_regex "$TARGET" "code field" '"code"'
|
||||
check_regex "$TARGET" "data field" '"data"'
|
||||
check_regex "$TARGET" "height field" '"height"'
|
||||
check_regex "$TARGET" "height default 300" '300'
|
||||
check_regex "$TARGET" "height max 800" '800'
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Code Formats section
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking Code Formats section ==="
|
||||
check_regex "$TARGET" "Code Formats heading" 'Code Format'
|
||||
check_regex "$TARGET" "JSX auto-detection" 'JSX|React.*detect|detect.*React'
|
||||
check_regex "$TARGET" "HTML detection" 'HTML.*detect|detect.*HTML|<div|<table'
|
||||
check_regex "$TARGET" "Plain JS format" 'Plain JS|plain.*js|JS.*function'
|
||||
check_regex "$TARGET" "Babel compilation" 'Babel.*compil|compil.*Babel'
|
||||
check_regex "$TARGET" "App component auto-render" 'App.*component|auto.render|auto-render'
|
||||
check_contains "$TARGET" "#root element" '#root'
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Code Scope section
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking Code Scope section ==="
|
||||
check_regex "$TARGET" "Code Scope heading" 'Code Scope|Available.*Scope|Scope.*Variables'
|
||||
check_contains "$TARGET" "data variable in scope" '`data`'
|
||||
check_contains "$TARGET" "mcp variable in scope" '`mcp`'
|
||||
check_contains "$TARGET" "root variable in scope" '`root`'
|
||||
check_contains "$TARGET" "Chart variable in scope" '`Chart`'
|
||||
check_contains "$TARGET" "L variable in scope" '`L`'
|
||||
check_regex "$TARGET" "mcp.sendMessage" 'sendMessage|mcp\.sendMessage'
|
||||
check_regex "$TARGET" "mcp.callTool" 'callTool|mcp\.callTool'
|
||||
check_regex "$TARGET" "mcp.resize" 'resize|mcp\.resize'
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Example Patterns section - all 5
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking Example 1: Comparison Table ==="
|
||||
check_regex "$TARGET" "Example 1 heading" 'Comparison Table|Example.*1'
|
||||
check_regex "$TARGET" "Hybrid Cars title" 'Hybrid Cars Under|Hybrid Cars.*10K'
|
||||
check_regex "$TARGET" "table headers (Model/Year/Price/Miles/MPG)" 'Model|Year|Price|Miles|MPG'
|
||||
check_regex "$TARGET" "Prius sample data" 'Prius'
|
||||
check_regex "$TARGET" "data.items reference" 'data\.items|data\[.items'
|
||||
check_regex "$TARGET" "green price color" '#7af7a2|7af7a2'
|
||||
check_regex "$TARGET" "blue link color" '#7aa2f7|7aa2f7'
|
||||
check_regex "$TARGET" "height 280" '"height".*280|280.*height|height.*280'
|
||||
|
||||
echo ""
|
||||
echo "=== Checking Example 2: Bar Chart ==="
|
||||
check_regex "$TARGET" "Example 2 heading" 'Bar Chart|Example.*2'
|
||||
check_regex "$TARGET" "Price Comparison title" 'Price Comparison by Model|Price Comparison'
|
||||
check_regex "$TARGET" "Chart.js new Chart" 'new Chart'
|
||||
check_regex "$TARGET" "type bar" "type.*bar|bar.*type|type.*'bar'"
|
||||
check_regex "$TARGET" "data.labels reference" 'data\.labels'
|
||||
check_regex "$TARGET" "data.values reference" 'data\.values'
|
||||
check_regex "$TARGET" "blue rgba color" 'rgba.*122.*162.*247|rgba\(122'
|
||||
check_regex "$TARGET" "onClick with mcp.sendMessage" 'onClick|mcp\.sendMessage.*label|mcp\.sendMessage.*more about'
|
||||
check_regex "$TARGET" "height 380 for chart" '"height".*380|380.*height|height.*380'
|
||||
|
||||
echo ""
|
||||
echo "=== Checking Example 3: Location Map ==="
|
||||
check_regex "$TARGET" "Example 3 heading" 'Location Map|Map|Example.*3'
|
||||
check_regex "$TARGET" "Dealers Near Woodinville title" 'Dealers Near Woodinville|Woodinville'
|
||||
check_regex "$TARGET" "L.map usage" 'L\.map'
|
||||
check_regex "$TARGET" "CARTO dark tile layer" 'CARTO|cartocdn|carto'
|
||||
check_regex "$TARGET" "markers from data.markers" 'data\.markers'
|
||||
check_regex "$TARGET" "bindPopup" 'bindPopup'
|
||||
check_regex "$TARGET" "marker click mcp.sendMessage" 'mcp\.sendMessage.*title|click.*mcp|marker.*mcp'
|
||||
check_regex "$TARGET" "fitBounds for multiple markers" 'fitBounds'
|
||||
|
||||
echo ""
|
||||
echo "=== Checking Example 4: React Dashboard ==="
|
||||
check_regex "$TARGET" "Example 4 heading" 'React Dashboard|Dashboard|Example.*4'
|
||||
check_regex "$TARGET" "Research Summary Dashboard title" 'Research Summary Dashboard|Research Summary'
|
||||
check_regex "$TARGET" "StatCard component" 'StatCard'
|
||||
check_regex "$TARGET" "App component" 'function App|const App|App ='
|
||||
check_regex "$TARGET" "useState for sort" 'useState'
|
||||
check_regex "$TARGET" "sort by price or miles" "sort|price.*miles|miles.*price"
|
||||
check_regex "$TARGET" "Tabler btn classes" 'btn-primary|btn-secondary|btn tabler|tabler.*btn'
|
||||
check_regex "$TARGET" "height 450" '"height".*450|450.*height|height.*450'
|
||||
|
||||
echo ""
|
||||
echo "=== Checking Example 5: Decision Matrix ==="
|
||||
check_regex "$TARGET" "Example 5 heading" 'Decision Matrix|Example.*5'
|
||||
check_regex "$TARGET" "Car Decision Matrix title" 'Car Decision Matrix|Decision Matrix'
|
||||
check_regex "$TARGET" "weight sliders (range input)" 'range.*slider|slider.*range|type.*range|range.*0.*10'
|
||||
check_regex "$TARGET" "criteria (Price, MPG, Reliability)" 'Price|MPG|Reliab'
|
||||
check_regex "$TARGET" "weighted scores calculation" 'weight.*score|score.*weight|weighted'
|
||||
check_regex "$TARGET" "best highlighted green" 'best.*green|green.*best|highlight.*green|green.*highlight'
|
||||
check_regex "$TARGET" "height 400" '"height".*400|400.*height|height.*400'
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Constraints section
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking Constraints section ==="
|
||||
check_regex "$TARGET" "Constraints heading" 'Constraint'
|
||||
check_regex "$TARGET" "self-contained / no API fetches" 'self.contained|no.*fetch|no.*API fetch|no.*external fetch'
|
||||
check_regex "$TARGET" "dark theme constraint" 'dark.*theme|theme.*dark'
|
||||
check_regex "$TARGET" "responsive width constraint" 'responsive|percentage|max.width'
|
||||
check_regex "$TARGET" "no external fetches" 'no.*external|external.*fetch'
|
||||
check_regex "$TARGET" "click-to-explore" 'click.to.explore|click.*explore|explore.*click'
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Visuals vs A2UI decision table
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=== Checking Visuals vs A2UI section ==="
|
||||
check_regex "$TARGET" "Visuals vs A2UI heading" 'Visuals.*A2UI|A2UI.*Visuals|visual.*vs.*a2ui|vs.*A2UI'
|
||||
check_regex "$TARGET" "toggle filters -> A2UI" 'filter|toggle'
|
||||
check_regex "$TARGET" "simple table -> A2UI" 'simple.*table|table.*simple|<5.*row|5.*row'
|
||||
check_regex "$TARGET" "interactive charts -> visual" 'interactive.*chart|chart.*interactive'
|
||||
check_regex "$TARGET" "sortable tables -> visual" 'sortable'
|
||||
check_regex "$TARGET" "maps -> visual" 'map'
|
||||
check_regex "$TARGET" "dashboards -> visual" 'dashboard'
|
||||
check_regex "$TARGET" "decision matrices -> visual" 'decision.*matrix|matrix'
|
||||
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
# Summary
|
||||
# ─────────────────────────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "=============================="
|
||||
echo "Results: $PASS passed, $FAIL failed"
|
||||
echo "=============================="
|
||||
|
||||
[ $FAIL -eq 0 ] && exit 0 || exit 1
|
||||
Reference in New Issue
Block a user