Squash Odysseus development history

tests/fixtures/vl/basic-shapes.json

@@ -0,0 +1,12 @@
+{
+  "fixture": "basic-shapes.png",
+  "required_facts": {
+    "text": "ODYSSEUS 42",
+    "left_object": "red circle",
+    "right_object": "blue square"
+  },
+  "followup": {
+    "prompt": "What color was the shape on the right?",
+    "required_answer": "blue"
+  }
+}

tests/fixtures/vl/basic-shapes.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewBox="0 0 640 480">
+  <rect width="640" height="480" fill="#ffffff"/>
+  <text x="320" y="90" text-anchor="middle" font-family="DejaVu Sans, sans-serif" font-size="52" font-weight="bold" fill="#111111">ODYSSEUS 42</text>
+  <circle cx="190" cy="285" r="90" fill="#e53935"/>
+  <rect x="370" y="195" width="180" height="180" fill="#1e5bd7"/>
+</svg>

tests/fixtures/vl/quarterly-dashboard.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Quarterly Sales Dashboard</title>
+  <style>
+    body { margin: 0; background: #eef2f7; color: #172033; font: 24px Arial, sans-serif; }
+    main { width: 960px; height: 640px; box-sizing: border-box; padding: 42px 56px; }
+    h1 { margin: 0 0 28px; font-size: 38px; }
+    .cards { display: flex; gap: 20px; margin-bottom: 34px; }
+    .card { background: white; border-radius: 14px; padding: 18px 24px; box-shadow: 0 3px 12px #17203320; }
+    .label { color: #64748b; font-size: 18px; }
+    .value { font-size: 30px; font-weight: 700; margin-top: 5px; }
+    .healthy { color: #14804a; }
+    .chart { height: 350px; display: flex; align-items: end; gap: 42px; padding: 0 45px; background: white; border-radius: 14px; box-shadow: 0 3px 12px #17203320; }
+    .column { width: 135px; text-align: center; font-weight: 700; }
+    .bar { background: #3976e8; border-radius: 10px 10px 0 0; color: white; padding-top: 10px; box-sizing: border-box; }
+    .q1 { height: 100px; } .q2 { height: 175px; } .q3 { height: 275px; background: #7c3aed; } .q4 { height: 200px; }
+    .quarter { padding: 12px 0 18px; color: #334155; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>Quarterly Sales Dashboard</h1>
+    <div class="cards">
+      <div class="card"><div class="label">Build status</div><div class="value healthy">Healthy</div></div>
+      <div class="card"><div class="label">API latency</div><div class="value">142 ms</div></div>
+      <div class="card"><div class="label">Active users</div><div class="value">1,284</div></div>
+    </div>
+    <div class="chart" aria-label="Quarterly sales: Q1 20, Q2 35, Q3 55, Q4 40">
+      <div class="column"><div class="bar q1">20</div><div class="quarter">Q1</div></div>
+      <div class="column"><div class="bar q2">35</div><div class="quarter">Q2</div></div>
+      <div class="column"><div class="bar q3">55</div><div class="quarter">Q3</div></div>
+      <div class="column"><div class="bar q4">40</div><div class="quarter">Q4</div></div>
+    </div>
+  </main>
+</body>
+</html>