[
  {
    "testName": "counter",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 10,
    "pass1": 1,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n  let count = $state(0);\n\n  function decrement() {\n    count -= 1;\n  }\n\n  function increment() {\n    count += 1;\n  }\n</script>\n\n<div class=\"counter\">\n  <button data-testid=\"decrement-button\" onclick={decrement}>-</button>\n  <span data-testid=\"count-value\">{count}</span>\n  <button data-testid=\"increment-button\" onclick={increment}>+</button>\n</div>\n\n<style>\n  .counter {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-family: sans-serif;\n  }\n\n  button {\n    width: 2.5rem;\n    height: 2.5rem;\n    font-size: 1.5rem;\n    font-weight: bold;\n    background: #2563eb;\n    color: white;\n    border: none;\n    border-radius: 0.375rem;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  button:hover {\n    background: #1d4ed8;\n  }\n\n  span {\n    font-size: 1.5rem;\n    font-weight: bold;\n    min-width: 2rem;\n    text-align: center;\n  }\n</style>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<div class=\"counter\">\n\t<button data-testid=\"decrement-button\" onclick={() => count--}>-</button>\n\t<span data-testid=\"count-value\">{count}</span>\n\t<button data-testid=\"increment-button\" onclick={() => count++}>+</button>\n</div>\n\n<script>\n\tlet count = $state(0);\n</script>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 1rem;\n\t\tpadding: 2rem;\n\t\tfont-family: system-ui, -apple-system, sans-serif;\n\t}\n\n\tbutton {\n\t\twidth: 3rem;\n\t\theight: 3rem;\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: bold;\n\t\tborder: 2px solid #3b82f6;\n\t\tbackground: #3b82f6;\n\t\tcolor: white;\n\t\tborder-radius: 0.5rem;\n\t\tcursor: pointer;\n\t\ttransition: all 0.2s;\n\t}\n\n\tbutton:hover {\n\t\tbackground: #2563eb;\n\t\tborder-color: #2563eb;\n\t}\n\n\tbutton:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\tspan {\n\t\tmin-width: 3rem;\n\t\ttext-align: center;\n\t\tfont-size: 2rem;\n\t\tfont-weight: 600;\n\t\tcolor: #1f2937;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet count = $state(0);\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n\n\tfunction decrement() {\n\t\tcount -= 1;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button data-testid=\"decrement-button\" onclick={decrement}>-</button>\n\t<span data-testid=\"count-value\">{count}</span>\n\t<button data-testid=\"increment-button\" onclick={increment}>+</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 1rem;\n\t\tfont-family: system-ui, -apple-system, sans-serif;\n\t}\n\n\tbutton {\n\t\twidth: 3rem;\n\t\theight: 3rem;\n\t\tfont-size: 1.5rem;\n\t\tborder: 1px solid #cbd5e1;\n\t\tbackground: #f8fafc;\n\t\tborder-radius: 0.5rem;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttransition: all 0.2s;\n\t\tcolor: #334155;\n\t}\n\n\tbutton:hover {\n\t\tbackground: #e2e8f0;\n\t\tborder-color: #94a3b8;\n\t}\n\n\tbutton:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\tspan {\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 600;\n\t\tmin-width: 3rem;\n\t\ttext-align: center;\n\t\tcolor: #0f172a;\n\t\tuser-select: none;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet count = $state(0);\n</script>\n\n<div class=\"counter\">\n\t<button data-testid=\"decrement-button\" onclick={() => count--}>-</button>\n\t<span data-testid=\"count-value\">{count}</span>\n\t<button data-testid=\"increment-button\" onclick={() => count++}>+</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<script>\n  let count = $state(0);\n\n  function increment() {\n    count += 1;\n  }\n\n  function decrement() {\n    count -= 1;\n  }\n</script>\n\n<div class=\"counter\">\n  <button data-testid=\"decrement-button\" onclick={decrement}>-</button>\n  <span data-testid=\"count-value\">{count}</span>\n  <button data-testid=\"increment-button\" onclick={increment}>+</button>\n</div>\n\n<style>\n  .counter {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    font-family: system-ui, sans-serif;\n  }\n\n  .counter button {\n    width: 40px;\n    height: 40px;\n    font-size: 1.25rem;\n    border: 1px solid #ccc;\n    border-radius: 6px;\n    background: white;\n    cursor: pointer;\n    transition: all 0.2s;\n  }\n\n  .counter button:hover {\n    background: #f5f5f5;\n    border-color: #999;\n  }\n\n  .counter span {\n    font-size: 1.5rem;\n    font-weight: 600;\n    min-width: 40px;\n    text-align: center;\n  }\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet count = $state(0);\n</script>\n\n<div class=\"counter\">\n\t<button data-testid=\"decrement-button\" onclick={() => count--}>-</button>\n\t<span data-testid=\"count-value\">{count}</span>\n\t<button data-testid=\"increment-button\" onclick={() => count++}>+</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 0.75rem;\n\t\tfont-family: system-ui, -apple-system, sans-serif;\n\t\tpadding: 1rem;\n\t\tbackground: #f8fafc;\n\t\tborder-radius: 12px;\n\t\tbox-shadow: 0 2px 8px rgba(0,0,0,0.1);\n\t\twidth: max-content;\n\t}\n\n\t.counter button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tborder: none;\n\t\tborder-radius: 8px;\n\t\tfont-size: 1.25rem;\n\t\tfont-weight: 600;\n\t\tcursor: pointer;\n\t\ttransition: all 0.15s ease;\n\t}\n\n\t.counter button:first-child {\n\t\tbackground: #fee2e2;\n\t\tcolor: #dc2626;\n\t}\n\n\t.counter button:first-child:hover {\n\t\tbackground: #fecaca;\n\t\ttransform: scale(1.05);\n\t}\n\n\t.counter button:last-child {\n\t\tbackground: #dbeafe;\n\t\tcolor: #2563eb;\n\t}\n\n\t.counter button:last-child:hover {\n\t\tbackground: #bfdbfe;\n\t\ttransform: scale(1.05);\n\t}\n\n\t.counter span {\n\t\tmin-width: 3ch;\n\t\ttext-align: center;\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 700;\n\t\tcolor: #1e293b;\n\t\tpadding: 0 0.5rem;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet count = $state(0);\n\t\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n\t\n\tfunction decrement() {\n\t\tcount -= 1;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button onclick={decrement} data-testid=\"decrement-button\">-</button>\n\t<span data-testid=\"count-value\">{count}</span>\n\t<button onclick={increment} data-testid=\"increment-button\">+</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 1rem;\n\t\tfont-family: system-ui, sans-serif;\n\t}\n\t\n\tbutton {\n\t\twidth: 2.5rem;\n\t\theight: 2.5rem;\n\t\tfont-size: 1.25rem;\n\t\tfont-weight: 600;\n\t\tborder: 2px solid #e2e8f0;\n\t\tborder-radius: 0.5rem;\n\t\tbackground: white;\n\t\tcursor: pointer;\n\t\ttransition: all 0.2s;\n\t}\n\t\n\tbutton:hover {\n\t\tborder-color: #94a3b8;\n\t\tbackground: #f8fafc;\n\t}\n\t\n\tbutton:active {\n\t\ttransform: scale(0.95);\n\t}\n\t\n\tspan {\n\t\tmin-width: 3rem;\n\t\ttext-align: center;\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 700;\n\t\tcolor: #1e293b;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet { buttonStyle = \"fill\", colors = \"purple\", initialCount = 0 } = $props();\n\n\tlet count = $state(initialCount);\n</script>\n\n<div class=\"counter\" data-variant={buttonStyle} data-colors={colors}>\n\t<button type=\"button\" class=\"decrement\" data-testid=\"decrement-button\" onclick={() => count--}>\n\t\t<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t<path d=\"M5 12h14\" />\n\t\t</svg>\n\t</button>\n\n\t<span data-testid=\"count-value\" class=\"count-display\">{count}</span>\n\n\t<button type=\"button\" class=\"increment\" data-testid=\"increment-button\" onclick={() => count++}>\n\t\t<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t<path d=\"M5 12h14\" />\n\t\t\t<path d=\"M12 5v14\" />\n\t\t</svg>\n\t</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 0.25rem;\n\t\tpadding: 0.5rem;\n\t\tborder-radius: 1rem;\n\t\tbackground: rgba(255, 255, 255, 0.7);\n\t\tborder: 1px solid rgba(255, 255, 255, 0.5);\n\t\tbackdrop-filter: blur(8px);\n\t\t-webkit-backdrop-filter: blur(8px);\n\t\tbox-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);\n\t}\n\n\t.count-display {\n\t\tmin-width: 2.5rem;\n\t\tfont-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n\t\tfont-variant-numeric: tabular-nums;\n\t\tfont-size: 1.25rem;\n\t\tfont-weight: 600;\n\t\tcolor: #0f0f23;\n\t\ttext-align: center;\n\t\tuser-select: none;\n\t\tpadding: 0 0.5rem;\n\t}\n\n\tbutton {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 2.5rem;\n\t\theight: 2.5rem;\n\t\tborder: 0;\n\t\tborder-radius: 0.75rem;\n\t\tcursor: pointer;\n\t\tcolor: #4c4c6d;\n\t\tbackground: transparent;\n\t\ttransition: all 0.15s ease;\n\t}\n\n\tbutton:hover {\n\t\tbackground: rgba(255, 255, 255, 0.6);\n\t\tcolor: #7c3aed;\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n\t}\n\n\tbutton:active {\n\t\ttransform: scale(0.92);\n\t}\n\n\t.counter[data-variant=\"fill\"] .decrement {\n\t\tbackground: #f8f5ff;\n\t\tcolor: #7c3aed;\n\t}\n\n\t.counter[data-variant=\"fill\"] .decrement:hover {\n\t\tbackground: #f0ebff;\n\t}\n\n\t.counter[data-variant=\"fill\"] .increment {\n\t\tbackground: #7c3aed;\n\t\tcolor: #fff;\n\t\tbox-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);\n\t}\n\n\t.counter[data-variant=\"fill\"] .increment:hover {\n\t\tbackground: #6d28d9;\n\t\tbox-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);\n\t}\n\n\t.counter[data-colors=\"teal\"] .increment {\n\t\tbackground: #14b8a6;\n\t\tbox-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);\n\t}\n\n\t.counter[data-colors=\"teal\"] .increment:hover {\n\t\tbackground: #0d9488;\n\t\tbox-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);\n\t}\n\n\t.counter[data-colors=\"teal\"] .decrement {\n\t\tbackground: #f0fdfa;\n\t\tcolor: #14b8a6;\n\t}\n\n\t.counter[data-colors=\"teal\"] .decrement:hover {\n\t\tbackground: #ccfbf1;\n\t}\n\n\t@media (max-width: 640px) {\n\t\tbutton {\n\t\t\twidth: 2.25rem;\n\t\t\theight: 2.25rem;\n\t\t}\n\n\t\t.count-display {\n\t\t\tfont-size: 1.125rem;\n\t\t}\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet count = $state(0);\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n\n\tfunction decrement() {\n\t\tcount -= 1;\n\t}\n</script>\n\n<div class=\"counter\">\n\t<button data-testid=\"decrement-button\" onclick={decrement}>-</button>\n\t<span data-testid=\"count-value\">{count}</span>\n\t<button data-testid=\"increment-button\" onclick={increment}>+</button>\n</div>\n\n<style>\n\t.counter {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 1rem;\n\t\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n\t\tpadding: 1rem;\n\t}\n\n\tbutton {\n\t\tfont-size: 1.5rem;\n\t\twidth: 3rem;\n\t\theight: 3rem;\n\t\tborder: none;\n\t\tborder-radius: 0.5rem;\n\t\tbackground: #4f46e5;\n\t\tcolor: white;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttransition: background 0.2s;\n\t}\n\n\tbutton:hover {\n\t\tbackground: #4338ca;\n\t}\n\n\tspan {\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 600;\n\t\tmin-width: 2rem;\n\t\ttext-align: center;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet count = $state(0);\n</script>\n\n<div class=\"counter\">\n\t<button data-testid=\"decrement-button\" onclick={() => count--}>-</button>\n\t<span data-testid=\"count-value\">{count}</span>\n\t<button data-testid=\"increment-button\" onclick={() => count++}>+</button>\n</div>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  },
  {
    "testName": "derived",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 8,
    "pass1": 0.7999999999999999,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n\n\tfunction incrementNumber() {\n\t\tnumber += 1;\n\t}\n</script>\n\n<div class=\"container\">\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={incrementNumber}>Increment</button>\n</div>\n\n<style>\n\t:global(body) {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n\t\tbackground: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\n\t\tmin-height: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tcolor: #e2e8f0;\n\t}\n\n\t.container {\n\t\tbackground: rgba(30, 41, 59, 0.7);\n\t\tbackdrop-filter: blur(12px);\n\t\t-webkit-backdrop-filter: blur(12px);\n\t\tborder: 1px solid rgba(148, 163, 184, 0.1);\n\t\tpadding: 3rem;\n\t\tborder-radius: 24px;\n\t\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n\t\ttext-align: center;\n\t\tmin-width: 320px;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\t.container::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 2px;\n\t\tbackground: linear-gradient(90deg, #0ea5e9, #6366f1, #a855f7);\n\t\topacity: 0.6;\n\t}\n\n\tp {\n\t\tmargin: 0 0 1.5rem 0;\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 500;\n\t\tletter-spacing: -0.02em;\n\t}\n\n\tp:last-of-type {\n\t\tcolor: #818cf8;\n\t\tfont-weight: 600;\n\t\tfont-size: 2rem;\n\t\tmargin-bottom: 2.5rem;\n\t\ttext-shadow: 0 0 20px rgba(129, 140, 248, 0.3);\n\t}\n\n\tbutton {\n\t\tbackground: linear-gradient(135deg, #3b82f6, #6366f1);\n\t\tcolor: white;\n\t\tborder: none;\n\t\tpadding: 1rem 2.5rem;\n\t\tfont-size: 1.1rem;\n\t\tfont-weight: 600;\n\t\tborder-radius: 12px;\n\t\tcursor: pointer;\n\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n\t\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\tbutton:hover {\n\t\ttransform: translateY(-2px);\n\t\tbox-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.4), 0 8px 10px -6px rgba(59, 130, 246, 0.2);\n\t}\n\n\tbutton:active {\n\t\ttransform: translateY(0);\n\t}\n\n\tbutton::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: -50%;\n\t\tleft: -50%;\n\t\twidth: 200%;\n\t\theight: 200%;\n\t\tbackground: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);\n\t\ttransform: scale(0);\n\t\ttransition: transform 0.5s ease-out;\n\t}\n\n\tbutton:active::after {\n\t\ttransform: scale(1);\n\t\ttransition: 0s;\n\t}\n</style>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n\n\tfunction increment() {\n\t\tnumber += 1;\n\t}\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number += 1}>Increment</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number++}>Increment</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number++}>\n\t\tIncrement\n\t</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n\n\tfunction increment() {\n\t\tnumber++;\n\t}\n</script>\n\n<div class=\"container\">\n\t<div class=\"card\">\n\t\t<h2>Derived Value Demo</h2>\n\t\t<div class=\"stats\">\n\t\t\t<p data-testid=\"number-value\" class=\"stat-row\">\n\t\t\t\t<span class=\"label\">Number</span>\n\t\t\t\t<span class=\"value\">{number}</span>\n\t\t\t</p>\n\t\t\t<p data-testid=\"doubled-value\" class=\"stat-row\">\n\t\t\t\t<span class=\"label\">Doubled</span>\n\t\t\t\t<span class=\"value accent\">{doubled}</span>\n\t\t\t</p>\n\t\t</div>\n\t\t<button data-testid=\"increment-button\" onclick={increment} class=\"btn\">\n\t\t\t<span class=\"btn-icon\">+</span>\n\t\t\tIncrement\n\t\t</button>\n\t</div>\n</div>\n\n<style>\n\t:global(body) {\n\t\tfont-family: 'Inter', system-ui, -apple-system, sans-serif;\n\t\tbackground-color: #f8fafc;\n\t\tmargin: 0;\n\t\tmin-height: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.container {\n\t\tpadding: 2rem;\n\t}\n\n\t.card {\n\t\tbackground: #ffffff;\n\t\tborder-radius: 16px;\n\t\tpadding: 2.5rem;\n\t\twidth: 320px;\n\t\tbox-shadow:\n\t\t\t0 4px 6px -1px rgba(0, 0, 0, 0.05),\n\t\t\t0 10px 15px -3px rgba(0, 0, 0, 0.05),\n\t\t\t0 0 0 1px rgba(0, 0, 0, 0.02);\n\t\ttransition: box-shadow 0.3s ease;\n\t}\n\n\t.card:hover {\n\t\tbox-shadow:\n\t\t\t0 10px 15px -3px rgba(0, 0, 0, 0.08),\n\t\t\t0 20px 25px -5px rgba(0, 0, 0, 0.06),\n\t\t\t0 0 0 1px rgba(0, 0, 0, 0.03);\n\t}\n\n\th2 {\n\t\tmargin: 0 0 2rem 0;\n\t\tfont-size: 1.25rem;\n\t\tfont-weight: 600;\n\t\tcolor: #1e293b;\n\t\tletter-spacing: -0.025em;\n\t}\n\n\t.stats {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1rem;\n\t\tmargin-bottom: 2rem;\n\t}\n\n\t.stat-row {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tmargin: 0;\n\t\tpadding: 1rem 1.25rem;\n\t\tbackground: #f8fafc;\n\t\tborder-radius: 12px;\n\t\tborder: 1px solid #f1f5f9;\n\t\ttransition: background 0.2s ease;\n\t}\n\n\t.stat-row:hover {\n\t\tbackground: #f1f5f9;\n\t}\n\n\t.label {\n\t\tfont-size: 0.875rem;\n\t\tfont-weight: 500;\n\t\tcolor: #64748b;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.05em;\n\t}\n\n\t.value {\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 700;\n\t\tcolor: #334155;\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\n\t.value.accent {\n\t\tcolor: #4f46e5;\n\t}\n\n\t.btn {\n\t\twidth: 100%;\n\t\tpadding: 0.875rem 1.5rem;\n\t\tbackground: #4f46e5;\n\t\tcolor: white;\n\t\tborder: none;\n\t\tborder-radius: 10px;\n\t\tfont-size: 0.9375rem;\n\t\tfont-weight: 600;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 0.5rem;\n\t\ttransition: all 0.2s ease;\n\t\tbox-shadow: 0 1px 3px rgba(79, 70, 229, 0.2);\n\t}\n\n\t.btn:hover {\n\t\tbackground: #4338ca;\n\t\ttransform: translateY(-1px);\n\t\tbox-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);\n\t}\n\n\t.btn:active {\n\t\ttransform: translateY(0);\n\t}\n\n\t.btn-icon {\n\t\tfont-size: 1.125rem;\n\t\tfont-weight: 400;\n\t}\n</style>",
        "success": false,
        "errors": [
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Number: 5\u001b[39m\nReceived:\n\u001b[31m  Number 5\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Number: 6\u001b[39m\nReceived:\n\u001b[31m  Number 6\u001b[39m"
        ]
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number++}>Increment</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n</script>\n\n<div class=\"flex flex-col items-center gap-6\">\n\t<div class=\"grid w-full grid-cols-1 gap-4 sm:grid-cols-2\">\n\t\t<div class=\"flex flex-col gap-1 rounded-xl border border-slate-700 bg-slate-800/50 p-5 text-center shadow-sm\">\n\t\t\t<span class=\"text-xs font-semibold uppercase tracking-widest text-slate-400\">Current</span>\n\t\t\t<p data-testid=\"number-value\" class=\"text-4xl font-extrabold text-sky-400\">{number}</p>\n\t\t</div>\n\n\t\t<div class=\"flex flex-col gap-1 rounded-xl border border-slate-700 bg-slate-800/50 p-5 text-center shadow-sm\">\n\t\t\t<span class=\"text-xs font-semibold uppercase tracking-widest text-slate-400\">Doubled</span>\n\t\t\t<p data-testid=\"doubled-value\" class=\"text-4xl font-extrabold text-emerald-400\">{doubled}</p>\n\t\t</div>\n\t</div>\n\n\t<button\n\t\tdata-testid=\"increment-button\"\n\t\tonclick={() => number++}\n\t\tclass=\"relative w-full overflow-hidden rounded-lg bg-slate-100 px-6 py-3.5 font-bold text-slate-900 shadow-lg transition-all duration-200 hover:scale-[1.02] hover:bg-white hover:shadow-xl active:scale-[0.98] sm:w-auto\"\n\t>\n\t\tIncrement\n\t</button>\n</div>",
        "success": false,
        "errors": [
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Number: 5\u001b[39m\nReceived:\n\u001b[31m  5\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Number: 6\u001b[39m\nReceived:\n\u001b[31m  6\u001b[39m"
        ]
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number++}>Increment</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $derived(number * 2);\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number++}>\n\t\tIncrement\n\t</button>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tgap: 0.75rem;\n\t\tfont-family: system-ui, -apple-system, sans-serif;\n\t\tpadding: 2rem;\n\t}\n\n\tp {\n\t\tfont-size: 1.125rem;\n\t\tcolor: #374151;\n\t\tmargin: 0;\n\t}\n\n\tbutton {\n\t\tpadding: 0.5rem 1.5rem;\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tcolor: #fff;\n\t\tbackground-color: #3b82f6;\n\t\tborder: none;\n\t\tborder-radius: 0.375rem;\n\t\tcursor: pointer;\n\t\ttransition: background-color 0.15s ease;\n\t}\n\n\tbutton:hover {\n\t\tbackground-color: #2563eb;\n\t}\n\n\tbutton:active {\n\t\ttransform: scale(0.98);\n\t}\n</style>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  },
  {
    "testName": "derived-by",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 7,
    "pass1": 0.7,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('');\n\t\n\tconst stats = $derived.by(() => {\n\t\tconst trimmed = text.trim();\n\t\tconst words = trimmed === '' ? 0 : trimmed.split(/\\s+/).length;\n\t\tconst chars = text.length;\n\t\tconst isLong = words > 15;\n\t\t\n\t\treturn { words, chars, isLong };\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<button data-testid=\"clear-button\" onclick={() => text = ''}>Clear</button>\n\t<div>\n\t\t<p data-testid=\"word-count\">Words: {stats.words}</p>\n\t\t<p data-testid=\"char-count\">Characters: {stats.chars}</p>\n\t\t<p data-testid=\"length-indicator\">Status: {stats.isLong ? 'Long text' : 'Short text'}</p>\n\t</div>\n</div>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('');\n\n\tconst stats = $derived.by(() => {\n\t\tconst trimmed = text.trim();\n\t\tconst words = trimmed === '' ? 0 : trimmed.split(/\\s+/).length;\n\t\tconst chars = text.length;\n\t\tconst isLong = words > 15;\n\t\treturn { words, chars, isLong };\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<button data-testid=\"clear-button\" onclick={() => text = ''}>Clear</button>\n\t<div>\n\t\t<p data-testid=\"word-count\">Words: {stats.words}</p>\n\t\t<p data-testid=\"char-count\">Characters: {stats.chars}</p>\n\t\t<p data-testid=\"length-indicator\">Status: {stats.isLong ? 'Long text' : 'Short text'}</p>\n\t</div>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<div class=\"container\">\n  <div class=\"input-section\">\n    <input \n      data-testid=\"text-input\"\n      type=\"text\" \n      bind:value={text}\n      placeholder=\"Type something...\" \n    />\n    <button data-testid=\"clear-button\" onclick={clearText}>Clear</button>\n  </div>\n  \n  <div class=\"stats-section\">\n    <p data-testid=\"word-count\">\n      Words: <span class=\"stat-value\">{wordCount}</span>\n    </p>\n    <p data-testid=\"char-count\">\n      Characters: <span class=\"stat-value\">{charCount}</span>\n    </p>\n    <p data-testid=\"length-indicator\">\n      Status: <span class=\"stat-value\" class:is-long={isLong} class:is-short={!isLong}>{isLong ? 'Long text' : 'Short text'}</span>\n    </p>\n  </div>\n</div>\n\n<script>\n  let text = $state('')\n\n  const stats = $derived.by(() => {\n    const words = text.trim() === '' ? 0 : text.trim().split(/\\s+/).length\n    const chars = text.length\n    const long = words > 15\n    return { words, chars, long }\n  })\n\n  let wordCount = $derived(stats.words)\n  let charCount = $derived(stats.chars)\n  let isLong = $derived(stats.long)\n\n  function clearText() {\n    text = ''\n  }\n</script>\n\n<style>\n  .container {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n    max-width: 500px;\n    margin: 2rem auto;\n    padding: 2rem;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  }\n\n  .input-section {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  input[type=\"text\"] {\n    flex: 1;\n    padding: 0.75rem 1rem;\n    font-size: 1rem;\n    border: 2px solid #e5e7eb;\n    border-radius: 8px;\n    background: #f9fafb;\n    color: #111827;\n    transition: all 0.2s ease;\n    outline: none;\n  }\n\n  input[type=\"text\"]:focus {\n    border-color: #3b82f6;\n    background: white;\n    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n  }\n\n  input[type=\"text\"]::placeholder {\n    color: #9ca3af;\n  }\n\n  button {\n    padding: 0.75rem 1.25rem;\n    font-size: 0.875rem;\n    font-weight: 600;\n    color: white;\n    background: #ef4444;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n  }\n\n  button:hover {\n    background: #dc2626;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);\n  }\n\n  button:active {\n    transform: translateY(0);\n  }\n\n  .stats-section {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n  }\n\n  .stats-section p {\n    margin: 0;\n    padding: 0.75rem 1rem;\n    background: #f3f4f6;\n    border-radius: 8px;\n    font-size: 0.9375rem;\n    color: #374151;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .stat-value {\n    font-weight: 700;\n    color: #111827;\n    font-size: 1.125rem;\n  }\n\n  .stat-value.is-long {\n    color: #ef4444;\n  }\n\n  .stat-value.is-short {\n    color: #10b981;\n  }\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\n  let text = $state('');\n\n  const stats = $derived.by(() => {\n    const words = text.trim() === '' ? [] : text.trim().split(/\\s+/);\n    return {\n      wordCount: words.length,\n      charCount: text.length,\n      isLong: words.length > 15\n    };\n  });\n</script>\n\n<div>\n  <input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n  <button data-testid=\"clear-button\" onclick={() => text = ''}>Clear</button>\n  <div>\n    <p data-testid=\"word-count\">Words: {stats.wordCount}</p>\n    <p data-testid=\"char-count\">Characters: {stats.charCount}</p>\n    <p data-testid=\"length-indicator\">Status: {stats.isLong ? 'Long text' : 'Short text'}</p>\n  </div>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('');\n\n\tconst stats = $derived.by(() => {\n\t\tconst trimmed = text.trim();\n\t\tconst words = trimmed === '' ? 0 : trimmed.split(/\\s+/).length;\n\t\tconst chars = text.length;\n\t\tconst isLong = words > 15;\n\t\treturn { words, chars, isLong };\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<button data-testid=\"clear-button\" onclick={() => text = ''}>Clear</button>\n\t<div>\n\t\t<p data-testid=\"word-count\">Words: {stats.words}</p>\n\t\t<p data-testid=\"char-count\">Characters: {stats.chars}</p>\n\t\t<p data-testid=\"length-indicator\">Status: {stats.isLong ? 'Long text' : 'Short text'}</p>\n\t</div>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('');\n\t\n\tlet stats = $derived.by(() => {\n\t\tconst charCount = text.length;\n\t\tconst wordCount = text.trim() === '' ? 0 : text.trim().split(/\\s+/).length;\n\t\tconst isLong = wordCount > 15;\n\t\treturn {\n\t\t\twordCount,\n\t\t\tcharCount,\n\t\t\tisLong\n\t\t};\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<button data-testid=\"clear-button\" onclick={() => text = ''}>Clear</button>\n\t<div>\n\t\t<p data-testid=\"word-count\">Words: {stats.wordCount}</p>\n\t\t<p data-testid=\"char-count\">Characters: {stats.charCount}</p>\n\t\t<p data-testid=\"length-indicator\">Status: {stats.isLong ? 'Long text' : 'Short text'}</p>\n\t</div>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('');\n\t\n\tconst stats = $derived.by(() => {\n\t\tconst trimmed = text.trim();\n\t\tconst words = trimmed ? trimmed.split(/\\s+/).length : 0;\n\t\tconst chars = text.length;\n\t\tconst isLong = words > 15;\n\t\treturn { words, chars, isLong };\n\t});\n\n\tfunction clear() {\n\t\ttext = '';\n\t}\n</script>\n\n<div class=\"min-h-screen bg-slate-950 text-slate-200 p-8 flex items-center justify-center\">\n\t<div class=\"w-full max-w-xl bg-slate-900/80 backdrop-blur-sm border border-slate-700/50 rounded-2xl shadow-2xl shadow-black/30 p-8 space-y-8\">\n\t\t<div class=\"space-y-2\">\n\t\t\t<h2 class=\"text-2xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent\">\n\t\t\t\tText Analyzer\n\t\t\t</h2>\n\t\t\t<p class=\"text-sm text-slate-400\">Type below to see real-time text statistics.</p>\n\t\t</div>\n\n\t\t<div class=\"space-y-4\">\n\t\t\t<input\n\t\t\t\tdata-testid=\"text-input\"\n\t\t\t\tbind:value={text}\n\t\t\t\tplaceholder=\"Start typing...\"\n\t\t\t\tclass=\"w-full bg-slate-950/50 border border-slate-700 rounded-xl px-5 py-3.5 text-slate-100 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-cyan-500/40 focus:border-cyan-500/60 transition-all duration-200\"\n\t\t\t/>\n\n\t\t\t<button\n\t\t\t\tdata-testid=\"clear-button\"\n\t\t\t\tonclick={clear}\n\t\t\t\tclass=\"w-full py-3 px-5 rounded-xl font-semibold text-sm tracking-wide uppercase bg-slate-800 hover:bg-slate-700 active:bg-slate-600 text-slate-300 border border-slate-700 hover:border-slate-600 transition-all duration-200 shadow-lg hover:shadow-xl\"\n\t\t\t>\n\t\t\t\tClear Text\n\t\t\t</button>\n\t\t</div>\n\n\t\t<div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n\t\t\t<div class=\"bg-slate-950/50 border border-slate-700/50 rounded-xl p-5 flex flex-col items-center justify-center text-center space-y-2 transition-colors duration-300 hover:border-slate-600\">\n\t\t\t\t<span class=\"text-xs font-semibold uppercase tracking-wider text-slate-500\">Words</span>\n\t\t\t\t<p data-testid=\"word-count\" class=\"text-3xl font-bold text-cyan-400 tabular-nums\">\n\t\t\t\t\t{stats.words}\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div class=\"bg-slate-950/50 border border-slate-700/50 rounded-xl p-5 flex flex-col items-center justify-center text-center space-y-2 transition-colors duration-300 hover:border-slate-600\">\n\t\t\t\t<span class=\"text-xs font-semibold uppercase tracking-wider text-slate-500\">Characters</span>\n\t\t\t\t<p data-testid=\"char-count\" class=\"text-3xl font-bold text-violet-400 tabular-nums\">\n\t\t\t\t\t{stats.chars}\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div class=\"bg-slate-950/50 border border-slate-700/50 rounded-xl p-5 flex flex-col items-center justify-center text-center space-y-2 transition-colors duration-300 {stats.isLong ? 'border-amber-500/30 bg-amber-500/5' : 'hover:border-slate-600'}\">\n\t\t\t\t<span class=\"text-xs font-semibold uppercase tracking-wider text-slate-500\">Status</span>\n\t\t\t\t<p data-testid=\"length-indicator\" class=\"text-lg font-bold {stats.isLong ? 'text-amber-400' : 'text-emerald-400'}\">\n\t\t\t\t\t{stats.isLong ? 'Long text' : 'Short text'}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>",
        "success": false,
        "errors": [
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 0\u001b[39m\nReceived:\n\u001b[31m  0\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 2\u001b[39m\nReceived:\n\u001b[31m  2\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 2\u001b[39m\nReceived:\n\u001b[31m  2\u001b[39m"
        ]
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('');\n\n\tconst metrics = $derived.by(() => {\n\t\tconst words = text.trim() === '' ? 0 : text.trim().split(/\\s+/).length;\n\t\treturn {\n\t\t\twordCount: words,\n\t\t\tcharCount: text.length,\n\t\t\tisLong: words > 15\n\t\t};\n\t});\n\n\tfunction clearText() {\n\t\ttext = '';\n\t}\n</script>\n\n<div class=\"min-h-screen bg-slate-50 p-8\">\n\t<div class=\"max-w-2xl mx-auto\">\n\t\t<div class=\"bg-white rounded-xl shadow-sm border border-slate-200 p-6\">\n\t\t\t<div class=\"mb-6\">\n\t\t\t\t<h1 class=\"text-xl font-bold text-slate-800 mb-1\">Text Analyzer</h1>\n\t\t\t\t<p class=\"text-sm text-slate-500\">Type below to see real-time text metrics calculated with $derived.by</p>\n\t\t\t</div>\n\n\t\t\t<div class=\"flex gap-3 mb-6\">\n\t\t\t\t<input\n\t\t\t\t\tdata-testid=\"text-input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tbind:value={text}\n\t\t\t\t\tplaceholder=\"Enter some text...\"\n\t\t\t\t\tclass=\"flex-1 px-4 py-2.5 bg-slate-50 border border-slate-300 rounded-lg text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all\"\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\tdata-testid=\"clear-button\"\n\t\t\t\t\tonclick={clearText}\n\t\t\t\t\tclass=\"px-5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium rounded-lg transition-colors\"\n\t\t\t\t>\n\t\t\t\t\tClear\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class=\"grid grid-cols-3 gap-4 mb-6\">\n\t\t\t\t<div class=\"bg-slate-50 rounded-lg p-4 border border-slate-100\">\n\t\t\t\t\t<p class=\"text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1\">Words</p>\n\t\t\t\t\t<p data-testid=\"word-count\" class=\"text-2xl font-bold text-slate-800\">{metrics.wordCount}</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bg-slate-50 rounded-lg p-4 border border-slate-100\">\n\t\t\t\t\t<p class=\"text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1\">Characters</p>\n\t\t\t\t\t<p data-testid=\"char-count\" class=\"text-2xl font-bold text-slate-800\">{metrics.charCount}</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bg-slate-50 rounded-lg p-4 border border-slate-100\">\n\t\t\t\t\t<p class=\"text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1\">Status</p>\n\t\t\t\t\t<p data-testid=\"length-indicator\" class=\"text-sm font-bold {metrics.isLong ? 'text-red-600' : 'text-emerald-600'}\">\n\t\t\t\t\t\t{metrics.isLong ? 'Long text' : 'Short text'}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"mb-6\">\n\t\t\t\t<div class=\"flex justify-between text-xs text-slate-500 mb-1.5\">\n\t\t\t\t\t<span>Word Count</span>\n\t\t\t\t\t<span>{metrics.wordCount} / 15</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"w-full bg-slate-100 rounded-full h-2.5 overflow-hidden\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"h-2.5 rounded-full transition-all duration-300 ease-out {metrics.isLong ? 'bg-red-500' : 'bg-emerald-500'}\"\n\t\t\t\t\t\tstyle=\"width: {Math.min((metrics.wordCount / 15) * 100, 100)}%\"\n\t\t\t\t\t></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{#if metrics.wordCount > 0}\n\t\t\t\t<div class=\"border-t border-slate-100 pt-4\">\n\t\t\t\t\t<h3 class=\"text-sm font-semibold text-slate-700 mb-3\">Letter Frequency</h3>\n\t\t\t\t\t<div class=\"grid grid-cols-6 gap-1.5\">\n\t\t\t\t\t\t{#each Object.entries(Object.fromEntries(Object.entries(\n\t\t\t\t\t\t\t[...text.toLowerCase().replace(/[^a-z]/g, '')].reduce((acc, char) => {\n\t\t\t\t\t\t\t\tacc[char] = (acc[char] || 0) + 1;\n\t\t\t\t\t\t\t\treturn acc;\n\t\t\t\t\t\t\t}, {})\n\t\t\t\t\t\t).sort((a, b) => b[1] - a[1]).slice(0, 12))) as [letter, count]}\n\t\t\t\t\t\t\t<div class=\"flex flex-col items-center bg-slate-50 rounded-md py-2 border border-slate-100\">\n\t\t\t\t\t\t\t\t<span class=\"text-lg font-bold text-slate-800 uppercase\">{letter}</span>\n\t\t\t\t\t\t\t\t<span class=\"text-xs text-slate-500\">{count}</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t{/if}\n\t\t</div>\n\t</div>\n</div>\n\n<style>\n\t:global(body) {\n\t\tfont-family: system-ui, -apple-system, sans-serif;\n\t}\n</style>",
        "success": false,
        "errors": [
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 0\u001b[39m\nReceived:\n\u001b[31m  0\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 2\u001b[39m\nReceived:\n\u001b[31m  2\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 2\u001b[39m\nReceived:\n\u001b[31m  2\u001b[39m"
        ]
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('');\n\n\tconst stats = $derived.by(() => {\n\t\tconst words = text.trim() ? text.trim().split(/\\s+/) : [];\n\t\tconst wordCount = words.length;\n\t\tconst charCount = text.length;\n\t\tconst isLong = wordCount > 15;\n\t\treturn {\n\t\t\twordCount,\n\t\t\tcharCount,\n\t\t\tisLong,\n\t\t\treadability: wordCount > 0 ? (charCount / wordCount).toFixed(1) : '0.0'\n\t\t};\n\t});\n\n\tfunction clearText() {\n\t\ttext = '';\n\t}\n</script>\n\n<div class=\"min-h-screen bg-slate-900 flex items-center justify-center p-4 font-sans\">\n\t<div class=\"w-full max-w-md bg-slate-800 rounded-2xl shadow-2xl border border-slate-700 overflow-hidden\">\n\t\t<div class=\"bg-indigo-600 p-6 text-center\">\n\t\t\t<h1 class=\"text-2xl font-bold text-white tracking-wide\">Text Analyzer</h1>\n\t\t\t<p class=\"text-indigo-200 text-sm mt-1\">Real-time content insights</p>\n\t\t</div>\n\n\t\t<div class=\"p-6 space-y-6\">\n\t\t\t<div class=\"relative group\">\n\t\t\t\t<textarea\n\t\t\t\t\tdata-testid=\"text-input\"\n\t\t\t\t\tbind:value={text}\n\t\t\t\t\tplaceholder=\"Type or paste your text here...\"\n\t\t\t\t\tclass=\"w-full h-32 p-4 bg-slate-900 border-2 border-slate-600 rounded-xl text-slate-200 placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all duration-200 resize-none text-base leading-relaxed\"\n\t\t\t\t></textarea>\n\t\t\t\t<div class=\"absolute bottom-3 right-3 text-xs text-slate-500 font-medium\">\n\t\t\t\t\t{stats.charCount} chars\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"grid grid-cols-2 gap-4\">\n\t\t\t\t<div class=\"bg-slate-900/50 p-4 rounded-xl border border-slate-700/50 text-center hover:border-indigo-500/30 transition-colors\">\n\t\t\t\t\t<p class=\"text-3xl font-bold text-indigo-400 mb-1\" data-testid=\"word-count\">{stats.wordCount}</p>\n\t\t\t\t\t<p class=\"text-xs font-medium text-slate-400 uppercase tracking-wider\">Words</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bg-slate-900/50 p-4 rounded-xl border border-slate-700/50 text-center hover:border-emerald-500/30 transition-colors\">\n\t\t\t\t\t<p class=\"text-3xl font-bold text-emerald-400 mb-1\" data-testid=\"char-count\">{stats.charCount}</p>\n\t\t\t\t\t<p class=\"text-xs font-medium text-slate-400 uppercase tracking-wider\">Characters</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"bg-slate-900/50 p-4 rounded-xl border border-slate-700/50\">\n\t\t\t\t<div class=\"flex items-center justify-between mb-3\">\n\t\t\t\t\t<span class=\"text-sm font-medium text-slate-400\">Length Status</span>\n\t\t\t\t\t<span\n\t\t\t\t\t\tdata-testid=\"length-indicator\"\n\t\t\t\t\t\tclass=\"px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider {stats.isLong ? 'bg-amber-500/20 text-amber-400 border border-amber-500/30' : 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'}\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{stats.isLong ? 'Long text' : 'Short text'}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"w-full bg-slate-700 rounded-full h-2.5 overflow-hidden\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"h-2.5 rounded-full transition-all duration-500 ease-out {stats.isLong ? 'bg-amber-500 w-full' : 'bg-emerald-500'}\"\n\t\t\t\t\t\tstyle=\"width: {Math.min((stats.wordCount / 15) * 100, 100)}%\"\n\t\t\t\t\t></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"flex justify-between mt-2 text-xs text-slate-500\">\n\t\t\t\t\t<span>0 words</span>\n\t\t\t\t\t<span>15 words</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"flex items-center justify-between pt-2\">\n\t\t\t\t<div class=\"text-xs text-slate-500\">\n\t\t\t\t\tAvg. word length: <span class=\"text-slate-300 font-medium\">{stats.readability}</span>\n\t\t\t\t</div>\n\t\t\t\t<button\n\t\t\t\t\tdata-testid=\"clear-button\"\n\t\t\t\t\tonclick={clearText}\n\t\t\t\t\tclass=\"px-5 py-2.5 bg-rose-600 hover:bg-rose-500 text-white text-sm font-semibold rounded-lg shadow-lg shadow-rose-600/20 transition-all duration-200 active:scale-95 flex items-center gap-2\"\n\t\t\t\t>\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n\t\t\t\t\t\t<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tClear\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>",
        "success": false,
        "errors": [
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 0\u001b[39m\nReceived:\n\u001b[31m  0\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 2\u001b[39m\nReceived:\n\u001b[31m  2\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Words: 2\u001b[39m\nReceived:\n\u001b[31m  2\u001b[39m"
        ]
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('');\n\n\tconst stats = $derived.by(() => {\n\t\tconst trimmed = text.trim();\n\t\tconst words = trimmed === '' ? 0 : trimmed.split(/\\s+/).length;\n\t\tconst chars = text.length;\n\t\tconst isLong = words > 15;\n\t\treturn { words, chars, isLong };\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<button data-testid=\"clear-button\" onclick={() => (text = '')}>Clear</button>\n\t<div>\n\t\t<p data-testid=\"word-count\">Words: {stats.words}</p>\n\t\t<p data-testid=\"char-count\">Characters: {stats.chars}</p>\n\t\t<p data-testid=\"length-indicator\">Status: {stats.isLong ? 'Long text' : 'Short text'}</p>\n\t</div>\n</div>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  },
  {
    "testName": "each",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 10,
    "pass1": 1,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet characters = $state(['Jerry', 'Elaine', 'Kramer']);\n</script>\n\n<div>\n\t<ul data-testid=\"characters-list\">\n\t\t{#each characters as character}\n\t\t\t<li data-testid=\"character\">{character}</li>\n\t\t{/each}\n\t</ul>\n\t<button\n\t\tdata-testid=\"add-george-button\"\n\t\tonclick={() => { characters = [...characters, 'George']; }}\n\t>\n\t\tAdd George\n\t</button>\n</div>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet characters = $state(['Jerry', 'Elaine', 'Kramer']);\n\tfunction addGeorge() {\n\t\tcharacters.push('George');\n\t}\n</script>\n\n<div>\n\t<ul data-testid=\"characters-list\">\n\t\t{#each characters as character}\n\t\t\t<li data-testid=\"character\">{character}</li>\n\t\t{/each}\n\t</ul>\n\t<button data-testid=\"add-george-button\" onclick={addGeorge}>Add George</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<div class=\"container\">\n\t<ul data-testid=\"characters-list\" class=\"characters-list\">\n\t\t{#each ['Jerry', 'Elaine', 'Kramer'] as character}\n\t\t\t<li data-testid=\"character\" class=\"character\">{character}</li>\n\t\t{/each}\n\t</ul>\n\t<button\n\t\tdata-testid=\"add-george-button\"\n\t\tclass=\"add-button\"\n\t\tonclick={() => {\n\t\t\tconst list = document.querySelector('[data-testid=\"characters-list\"]');\n\t\t\tconst li = document.createElement('li');\n\t\t\tli.setAttribute('data-testid', 'character');\n\t\t\tli.className = 'character';\n\t\t\tli.textContent = 'George';\n\t\t\tlist.appendChild(li);\n\t\t}}\n\t>\n\t\tAdd George\n\t</button>\n</div>\n\n<style>\n\t.container {\n\t\tfont-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n\t\tmax-width: 400px;\n\t\tmargin: 0 auto;\n\t\tpadding: 24px;\n\t\tbackground-color: #ffffff;\n\t\tborder-radius: 16px;\n\t\tbox-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n\t}\n\n\t.characters-list {\n\t\tlist-style: none;\n\t\tpadding: 0;\n\t\tmargin: 0 0 20px 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\n\t.character {\n\t\tpadding: 12px 16px;\n\t\tbackground-color: #f8f9fa;\n\t\tborder-radius: 8px;\n\t\tfont-size: 16px;\n\t\tfont-weight: 500;\n\t\tcolor: #2d3748;\n\t\ttransition: transform 0.2s ease, background-color 0.2s ease;\n\t\tborder-left: 4px solid #4a5568;\n\t}\n\n\t.character:hover {\n\t\tbackground-color: #edf2f7;\n\t\ttransform: translateX(4px);\n\t}\n\n\t.add-button {\n\t\twidth: 100%;\n\t\tpadding: 12px 20px;\n\t\tbackground-color: #4a5568;\n\t\tcolor: white;\n\t\tborder: none;\n\t\tborder-radius: 8px;\n\t\tfont-size: 15px;\n\t\tfont-weight: 600;\n\t\tcursor: pointer;\n\t\ttransition: background-color 0.2s ease, transform 0.1s ease;\n\t}\n\n\t.add-button:hover {\n\t\tbackground-color: #2d3748;\n\t}\n\n\t.add-button:active {\n\t\ttransform: scale(0.98);\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet characters = $state([\"Jerry\", \"Elaine\", \"Kramer\"]);\n</script>\n\n<div>\n\t<ul data-testid=\"characters-list\">\n\t\t{#each characters as character}\n\t\t\t<li data-testid=\"character\">{character}</li>\n\t\t{/each}\n\t</ul>\n\t<button\n\t\tdata-testid=\"add-george-button\"\n\t\tonclick={() => {\n\t\t\tcharacters = [...characters, \"George\"];\n\t\t}}\n\t>\n\t\tAdd George\n\t</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<script>\n  let characters = $state([\"Jerry\", \"Elaine\", \"Kramer\"]);\n\n  function addGeorge() {\n    characters.push(\"George\");\n  }\n</script>\n\n<div>\n  <ul data-testid=\"characters-list\">\n    {#each characters as character}\n      <li data-testid=\"character\">{character}</li>\n    {/each}\n  </ul>\n  <button data-testid=\"add-george-button\" onclick={addGeorge}>Add George</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tconst characters = $state([\"Jerry\", \"Elaine\", \"Kramer\"]);\n\n\tfunction addGeorge() {\n\t\tif (!characters.includes(\"George\")) {\n\t\t\tcharacters.push(\"George\");\n\t\t}\n\t}\n</script>\n\n<div>\n\t<ul data-testid=\"characters-list\">\n\t\t{#each characters as character}\n\t\t\t<li data-testid=\"character\">{character}</li>\n\t\t{/each}\n\t</ul>\n\t<button data-testid=\"add-george-button\" onclick={addGeorge}>Add George</button>\n</div>\n\n<style>\n\tdiv {\n\t\tfont-family: sans-serif;\n\t\tpadding: 1rem;\n\t}\n\n\tul {\n\t\tlist-style: none;\n\t\tpadding: 0;\n\t\tmargin: 0 0 1rem 0;\n\t}\n\n\tli {\n\t\tpadding: 0.5rem;\n\t\tbackground: #f8f9fa;\n\t\tborder: 1px solid #e9ecef;\n\t\tborder-radius: 4px;\n\t\tmargin-bottom: 0.5rem;\n\t\tfont-size: 1rem;\n\t}\n\n\tbutton {\n\t\tpadding: 0.5rem 1rem;\n\t\tbackground: #007bff;\n\t\tcolor: white;\n\t\tborder: none;\n\t\tborder-radius: 4px;\n\t\tfont-size: 1rem;\n\t\tcursor: pointer;\n\t}\n\n\tbutton:hover {\n\t\tbackground: #0056b3;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet characters = $state([\"Jerry\", \"Elaine\", \"Kramer\"]);\n\n\tfunction addGeorge() {\n\t\tcharacters = [...characters, \"George\"];\n\t}\n</script>\n\n<div>\n\t<ul data-testid=\"characters-list\">\n\t\t{#each characters as character}\n\t\t\t<li data-testid=\"character\">{character}</li>\n\t\t{/each}\n\t</ul>\n\t<button data-testid=\"add-george-button\" onclick={addGeorge}>Add George</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<div>\n  <ul data-testid=\"characters-list\">\n    {#each characters as character (character)}\n      <li data-testid=\"character\">{character}</li>\n    {/each}\n  </ul>\n  <button data-testid=\"add-george-button\" onclick={addGeorge}>Add George</button>\n</div>\n\n<script>\n  let characters = $state(['Jerry', 'Elaine', 'Kramer'])\n\n  function addGeorge() {\n    characters.push('George')\n  }\n</script>",
        "success": true,
        "errors": []
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<script>\n  let characters = $state([\"Jerry\", \"Elaine\", \"Kramer\"]);\n\n  function addGeorge() {\n    if (!characters.includes(\"George\")) {\n      characters.push(\"George\");\n    }\n  }\n</script>\n\n<div>\n  <ul data-testid=\"characters-list\">\n    {#each characters as character}\n      <li data-testid=\"character\">{character}</li>\n    {/each}\n  </ul>\n  <button data-testid=\"add-george-button\" onclick={addGeorge}>\n    Add George\n  </button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet characters = $state([\"Jerry\", \"Elaine\", \"Kramer\"]);\n</script>\n\n<div>\n\t<ul data-testid=\"characters-list\">\n\t\t{#each characters as character}\n\t\t\t<li data-testid=\"character\">{character}</li>\n\t\t{/each}\n\t</ul>\n\t<button onclick={() => {\n\t\tif (!characters.includes(\"George\")) {\n\t\t\tcharacters = [...characters, \"George\"];\n\t\t}\n\t}} data-testid=\"add-george-button\">Add George</button>\n</div>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  },
  {
    "testName": "effect",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 8,
    "pass1": 0.7999999999999999,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $state(10);\n\n\t$effect(() => {\n\t\tdoubled = number * 2;\n\t});\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number++}>Increment</button>\n</div>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<div>\n  <p data-testid=\"number-value\">Number: {number}</p>\n  <p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n  <button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n</div>\n\n<script>\n  let number = $state(5);\n  let doubled = $state(0);\n\n  $effect(() => {\n    doubled = number * 2;\n  });\n\n  function increment() {\n    number += 1;\n  }\n</script>",
        "success": true,
        "errors": []
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<div>\n  <p data-testid=\"number-value\">Number: {number}</p>\n  <p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n  <button data-testid=\"increment-button\" onclick={() => number += 1}>Increment</button>\n</div>\n\n<script>\n  let number = $state(5);\n  let doubled = $state(10);\n\n  $effect(() => {\n    doubled = number * 2;\n  });\n</script>",
        "success": true,
        "errors": []
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5)\n\tlet doubled = $state(10)\n\n\t$effect(() => {\n\t\tdoubled = number * 2\n\t})\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number++}>\n\t\tIncrement\n\t</button>\n</div>\n\n<style>\n\tdiv {\n\t\tfont-family: sans-serif;\n\t\ttext-align: center;\n\t\tmargin-top: 2rem;\n\t}\n\n\tp {\n\t\tfont-size: 1.25rem;\n\t\tmargin: 0.5rem;\n\t\tcolor: #1a202c;\n\t}\n\n\tbutton {\n\t\tpadding: 0.75rem 1.5rem;\n\t\tfont-size: 1rem;\n\t\tcursor: pointer;\n\t\tborder: none;\n\t\tborder-radius: 0.375rem;\n\t\tbackground-color: #3b82f6;\n\t\tcolor: white;\n\t\ttransition: background-color 0.2s;\n\t}\n\n\tbutton:hover {\n\t\tbackground-color: #2563eb;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $state(10);\n\n\t$effect(() => {\n\t\tdoubled = number * 2;\n\t});\n\n\tfunction increment() {\n\t\tnumber += 1;\n\t}\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<div class=\"container\">\n  <div class=\"card\">\n    <h2>$effect Demo</h2>\n    \n    <p data-testid=\"number-value\">Number: {number}</p>\n    <p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n    \n    <button data-testid=\"increment-button\" onclick={increment}>\n      Increment\n    </button>\n  </div>\n</div>\n\n<script>\n  let number = $state(5);\n  let doubled = $state(10);\n\n  $effect(() => {\n    doubled = number * 2;\n  });\n\n  function increment() {\n    number += 1;\n  }\n</script>\n\n<style>\n  .container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100vh;\n    background-color: #f3f4f6;\n    font-family: system-ui, -apple-system, sans-serif;\n    margin: 0;\n  }\n\n  .card {\n    background: white;\n    padding: 2rem;\n    border-radius: 1rem;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n    min-width: 300px;\n    text-align: center;\n  }\n\n  h2 {\n    margin-top: 0;\n    color: #1f2937;\n  }\n\n  p {\n    color: #4b5563;\n    font-size: 1.125rem;\n    margin: 0.75rem 0;\n  }\n\n  button {\n    background-color: #3b82f6;\n    color: white;\n    border: none;\n    padding: 0.75rem 1.5rem;\n    border-radius: 0.5rem;\n    font-size: 1rem;\n    font-weight: 600;\n    cursor: pointer;\n    margin-top: 1rem;\n    transition: background-color 0.2s;\n  }\n\n  button:hover {\n    background-color: #2563eb;\n  }\n\n  button:active {\n    transform: scale(0.98);\n  }\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $state(10);\n\n\t$effect(() => {\n\t\tdoubled = number * 2;\n\t});\n</script>\n\n<div>\n\t<p data-testid=\"number-value\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={() => number++}>\n\t\tIncrement\n\t</button>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<div class=\"svelte-effect-demo\">\n\t<h1>Svelte 5 <code>$effect</code> Rune Demo</h1>\n\t<p class=\"intro\">Modify the counter and watch the doubled value update automatically using the <code>$effect</code> rune.</p>\n\n\t<div class=\"card\">\n\t\t<div class=\"stats\">\n\t\t\t<p data-testid=\"number-value\" class=\"stat-item\">\n\t\t\t\t<span class=\"stat-label\">Number</span>\n\t\t\t\t<span class=\"stat-value\">{number}</span>\n\t\t\t</p>\n\t\t\t<p data-testid=\"doubled-value\" class=\"stat-item\">\n\t\t\t\t<span class=\"stat-label\">Doubled</span>\n\t\t\t\t<span class=\"stat-value doubled\">{doubled}</span>\n\t\t\t</p>\n\t\t</div>\n\n\t\t<div class=\"controls\">\n\t\t\t<button data-testid=\"increment-button\" class=\"btn primary\" onclick={increment}>\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>\n\t\t\t\tIncrement\n\t\t\t</button>\n\t\t\t<button class=\"btn ghost\" onclick={reset}>Reset</button>\n\t\t</div>\n\t</div>\n\n\t<div class=\"code-hint\">\n\t\t<pre><code>$state(5) &rarr; $effect &rarr; number * 2</code></pre>\n\t</div>\n</div>\n\n<style>\n\t:global(body) {\n\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n\t\tbackground-color: #f8fafc;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmin-height: 100vh;\n\t\tmargin: 0;\n\t\tpadding: 20px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.svelte-effect-demo {\n\t\twidth: 100%;\n\t\tmax-width: 420px;\n\t\ttext-align: center;\n\t}\n\n\th1 {\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 700;\n\t\tcolor: #1e293b;\n\t\tmargin: 0 0 8px 0;\n\t}\n\n\th1 code {\n\t\tbackground: #e2e8f0;\n\t\tcolor: #334155;\n\t\tpadding: 2px 8px;\n\t\tborder-radius: 6px;\n\t\tfont-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;\n\t\tfont-size: 1.1rem;\n\t}\n\n\t.intro {\n\t\tcolor: #64748b;\n\t\tfont-size: 0.95rem;\n\t\tmargin: 0 0 24px 0;\n\t\tline-height: 1.5;\n\t}\n\n\t.intro code {\n\t\tbackground: #f1f5f9;\n\t\tcolor: #475569;\n\t\tpadding: 1px 4px;\n\t\tborder-radius: 4px;\n\t\tfont-family: monospace;\n\t\tfont-size: 0.85em;\n\t}\n\n\t.card {\n\t\tbackground: white;\n\t\tborder-radius: 16px;\n\t\tpadding: 32px;\n\t\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05);\n\t\tborder: 1px solid #e2e8f0;\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.stats {\n\t\tdisplay: flex;\n\t\tjustify-content: space-around;\n\t\tgap: 16px;\n\t\tmargin-bottom: 32px;\n\t}\n\n\t.stat-item {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\tmargin: 0;\n\t}\n\n\t.stat-label {\n\t\tfont-size: 0.875rem;\n\t\tcolor: #94a3b8;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.05em;\n\t\tfont-weight: 600;\n\t}\n\n\t.stat-value {\n\t\tfont-size: 2.5rem;\n\t\tfont-weight: 800;\n\t\tcolor: #1e293b;\n\t\tline-height: 1;\n\t\tmin-width: 60px;\n\t\ttransition: color 0.2s ease;\n\t}\n\n\t.stat-value.doubled {\n\t\tcolor: #4f46e5;\n\t}\n\n\t.controls {\n\t\tdisplay: flex;\n\t\tgap: 12px;\n\t\tjustify-content: center;\n\t}\n\n\t.btn {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 8px;\n\t\tpadding: 10px 20px;\n\t\tborder-radius: 8px;\n\t\tfont-size: 0.95rem;\n\t\tfont-weight: 600;\n\t\tcursor: pointer;\n\t\tborder: none;\n\t\ttransition: all 0.15s ease;\n\t}\n\n\t.btn.primary {\n\t\tbackground-color: #4f46e5;\n\t\tcolor: white;\n\t\tbox-shadow: 0 1px 3px rgba(79, 70, 229, 0.2);\n\t}\n\n\t.btn.primary:hover {\n\t\tbackground-color: #4338ca;\n\t\ttransform: translateY(-1px);\n\t\tbox-shadow: 0 4px 6px rgba(79, 70, 229, 0.25);\n\t}\n\n\t.btn.primary:active {\n\t\ttransform: translateY(0);\n\t}\n\n\t.btn.ghost {\n\t\tbackground-color: #f1f5f9;\n\t\tcolor: #475569;\n\t\tborder: 1px solid #e2e8f0;\n\t}\n\n\t.btn.ghost:hover {\n\t\tbackground-color: #e2e8f0;\n\t}\n\n\t.code-hint {\n\t\tbackground: #1e293b;\n\t\tborder-radius: 8px;\n\t\tpadding: 12px;\n\t}\n\n\t.code-hint pre {\n\t\tmargin: 0;\n\t}\n\n\t.code-hint code {\n\t\tcolor: #e2e8f0;\n\t\tfont-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;\n\t\tfont-size: 0.875rem;\n\t}\n</style>\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $state(10);\n\n\t$effect(() => {\n\t\tdoubled = number * 2;\n\t});\n\n\tfunction increment() {\n\t\tnumber += 1;\n\t}\n\n\tfunction reset() {\n\t\tnumber = 5;\n\t}\n</script>",
        "success": false,
        "errors": [
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Number: 5\u001b[39m\nReceived:\n\u001b[31m  Number 5\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Number: 6\u001b[39m\nReceived:\n\u001b[31m  Number 6\u001b[39m"
        ]
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<script>\n  let number = $state(5);\n  let doubled = $state(10);\n  \n  $effect(() => {\n    doubled = number * 2;\n  });\n</script>\n\n<div class=\"min-h-screen flex items-center justify-center p-6 bg-gradient-to-br from-slate-50 to-slate-200\">\n  <div class=\"bg-white rounded-3xl shadow-xl p-10 w-full max-w-md text-center border border-slate-100 relative overflow-hidden\">\n    <div class=\"absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-emerald-400 to-teal-500\"></div>\n    \n    <div class=\"flex justify-center mb-8\">\n      <div class=\"w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50 flex items-center justify-center shadow-sm border border-emerald-100\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-emerald-600\">\n          <path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"/>\n          <path d=\"m9 9 2 2 4-4\"/>\n        </svg>\n      </div>\n    </div>\n    \n    <h2 class=\"text-2xl font-bold text-slate-800 mb-2 tracking-tight\">Reactive Math</h2>\n    <p class=\"text-slate-500 mb-10 text-sm\">Svelte 5 Runes Demo</p>\n    \n    <div class=\"space-y-6 mb-10\">\n      <div class=\"bg-slate-50 rounded-2xl p-6 border border-slate-100\">\n        <p class=\"text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2\">Current Number</p>\n        <p data-testid=\"number-value\" class=\"text-5xl font-bold text-slate-800 tabular-nums transition-all duration-300\">\n          {number}\n        </p>\n      </div>\n      \n      <div class=\"bg-emerald-50 rounded-2xl p-6 border border-emerald-100\">\n        <p class=\"text-xs font-semibold text-emerald-600/70 uppercase tracking-wider mb-2\">Doubled Value</p>\n        <p data-testid=\"doubled-value\" class=\"text-5xl font-bold text-emerald-600 tabular-nums transition-all duration-300\">\n          {doubled}\n        </p>\n      </div>\n    </div>\n    \n    <button \n      data-testid=\"increment-button\"\n      onclick={() => number += 1}\n      class=\"w-full bg-slate-900 hover:bg-slate-800 active:bg-slate-900 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 transform active:scale-[0.98] shadow-lg shadow-slate-900/20 flex items-center justify-center gap-3 group\"\n    >\n      <span>Increment</span>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"transition-transform duration-200 group-hover:translate-x-0.5\">\n        <path d=\"M5 12h14\"/>\n        <path d=\"m12 5 7 7-7 7\"/>\n      </svg>\n    </button>\n    \n    <div class=\"mt-6 flex justify-center gap-1.5\">\n      {#each Array(3) as _, i}\n        <div class=\"w-1.5 h-1.5 rounded-full {i === 0 ? 'bg-emerald-500' : 'bg-slate-200'}\"></div>\n      {/each}\n    </div>\n  </div>\n</div>",
        "success": false,
        "errors": [
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Number: 5\u001b[39m\nReceived:\n\u001b[31m  5\u001b[39m",
          "\u001b[2mexpect(\u001b[22m\u001b[31melement\u001b[39m\u001b[2m).toHaveTextContent()\u001b[22m\n\nExpected element to have text content:\n\u001b[32m  Number: 6\u001b[39m\nReceived:\n\u001b[31m  6\u001b[39m"
        ]
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet number = $state(5);\n\tlet doubled = $state(10);\n\n\t$effect(() => {\n\t\tdoubled = number * 2;\n\t});\n\n\tfunction increment() {\n\t\tnumber += 1;\n\t}\n</script>\n\n<div class=\"max-w-sm mx-auto p-6 bg-white rounded-lg shadow-md text-center space-y-4 mt-10\">\n\t<p data-testid=\"number-value\" class=\"text-2xl font-bold text-gray-800\">Number: {number}</p>\n\t<p data-testid=\"doubled-value\" class=\"text-xl text-blue-600 font-semibold\">Doubled: {doubled}</p>\n\t<button data-testid=\"increment-button\" onclick={increment} class=\"px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\">\n\t\tIncrement\n\t</button>\n</div>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  },
  {
    "testName": "hello-world",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 10,
    "pass1": 1,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n</script>\n\n<div data-testid=\"greeting\" class=\"greeting\">Hello, World!</div>\n\n<style>\n\t.greeting {\n\t\tcolor: blue;\n\t\ttext-align: center;\n\t\tmargin: 1rem;\n\t}\n</style>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet greeting = 'Hello, World!';\n</script>\n\n<div data-testid=\"greeting\" class=\"greeting\">\n\t{greeting}\n</div>\n\n<style>\n\t:global(html, body) {\n\t\theight: 100%;\n\t\tmargin: 0;\n\t}\n\n\t.greeting {\n\t\tcolor: blue;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmin-height: 100vh;\n\t\tmargin: 1rem;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet message = \"Hello, World!\";\n</script>\n\n<div data-testid=\"greeting\" class=\"greeting\">\n\t{message}\n</div>\n\n<style>\n\t.greeting {\n\t\tcolor: blue;\n\t\ttext-align: center;\n\t\tmargin: 1rem;\n\t\tfont-size: 2rem;\n\t\tfont-family: system-ui, -apple-system, sans-serif;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\n</script>\n\n<div class=\"container\">\n\t<div data-testid=\"greeting\" class=\"greeting\">Hello, World!</div>\n</div>\n\n<style>\n\t:global(body) {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tbackground-color: #f8fafc;\n\t\tfont-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n\t}\n\n\t.container {\n\t\tmin-height: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 2rem;\n\t}\n\n\t.greeting {\n\t\tcolor: #2563eb;\n\t\tfont-size: 2rem;\n\t\tfont-weight: 600;\n\t\ttext-align: center;\n\t\tmargin: 1rem;\n\t\tpadding: 1.5rem 2.5rem;\n\t\tbackground-color: #ffffff;\n\t\tborder-radius: 1rem;\n\t\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n\t\tborder: 1px solid #e2e8f0;\n\t\ttransition: transform 0.2s ease, box-shadow 0.2s ease;\n\t}\n\n\t.greeting:hover {\n\t\ttransform: translateY(-2px);\n\t\tbox-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -4px rgba(37, 99, 235, 0.1);\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<div data-testid=\"greeting\" class=\"greeting\">Hello, World!</div>\n\n<style>\n  .greeting {\n    color: blue;\n    text-align: center;\n    margin: 1rem;\n  }\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<div data-testid=\"greeting\" class=\"greeting\">Hello, World!</div>\n\n<style>\n\t.greeting {\n\t\tcolor: blue;\n\t\ttext-align: center;\n\t\tmargin: 1rem;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<div data-testid=\"greeting\" class=\"greeting\">Hello, World!</div>\n\n<style>\n  .greeting {\n    color: blue;\n    text-align: center;\n    margin: 1rem;\n  }\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<script>\n</script>\n\n<div data-testid=\"greeting\" class=\"greeting\">Hello, World!</div>\n\n<style>\n\t:global(body) {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmin-height: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.greeting {\n\t\tcolor: blue;\n\t\ttext-align: center;\n\t\tmargin: 20px;\n\t\tfont-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n\t\tfont-size: 2rem;\n\t\tfont-weight: 500;\n\t}\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<div data-testid=\"greeting\" class=\"greeting\">Hello, World!</div>\n\n<style>\n  .greeting {\n    color: blue;\n    text-align: center;\n    margin: 1rem;\n  }\n</style>",
        "success": true,
        "errors": []
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet greeting = $state('Hello, World!');\n\tlet clickCount = $state(0);\n\tlet isHovered = $state(false);\n\n\tfunction handleClick() {\n\t\tclickCount += 1;\n\t\tif (clickCount === 1) {\n\t\t\tgreeting = 'Hello, World! Nice to meet you!';\n\t\t} else if (clickCount === 5) {\n\t\t\tgreeting = 'Hello, World! You are very persistent!';\n\t\t} else if (clickCount === 10) {\n\t\t\tgreeting = 'Hello, World! You must really like clicking!';\n\t\t} else if (clickCount >= 15) {\n\t\t\tgreeting = `Hello, World! You've clicked ${clickCount} times!`;\n\t\t} else {\n\t\t\tgreeting = `Hello, World! (Clicked ${clickCount} times)`;\n\t\t}\n\t}\n\n\tfunction handleKeydown(event) {\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tevent.preventDefault();\n\t\t\thandleClick();\n\t\t}\n\t}\n\n\tfunction resetGreeting() {\n\t\tclickCount = 0;\n\t\tgreeting = 'Hello, World!';\n\t}\n</script>\n\n<div class=\"page-container\">\n\t<div \n\t\tclass=\"greeting-container\" \n\t\tclass:hovered={isHovered}\n\t\tonmouseenter={() => isHovered = true}\n\t\tonmouseleave={() => isHovered = false}\n\t>\n\t\t<div \n\t\t\tdata-testid=\"greeting\" \n\t\t\tclass=\"greeting\"\n\t\t\trole=\"button\"\n\t\t\ttabindex=\"0\"\n\t\t\tonclick={handleClick}\n\t\t\tonkeydown={handleKeydown}\n\t\t\ttitle=\"Click me!\"\n\t\t>\n\t\t\t{greeting}\n\t\t</div>\n\t\t\n\t\t{#if clickCount > 0}\n\t\t\t<div class=\"interaction-hint\">\n\t\t\t\t<span class=\"click-counter\">Interactions: {clickCount}</span>\n\t\t\t\t<button class=\"reset-btn\" onclick={resetGreeting} type=\"button\">\n\t\t\t\t\tReset\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t{:else}\n\t\t\t<div class=\"interaction-hint default-hint\">\n\t\t\t\tClick the text above to interact!\n\t\t\t</div>\n\t\t{/if}\n\t</div>\n</div>\n\n<style>\n\t:global(body) {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tbackground: #f8fafc;\n\t\tfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n\t}\n\n\t.page-container {\n\t\tmin-height: 100vh;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n\t}\n\n\t.greeting-container {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tgap: 1.5rem;\n\t\tpadding: 3rem;\n\t\tborder-radius: 24px;\n\t\tbackground: rgba(255, 255, 255, 0.7);\n\t\tbackdrop-filter: blur(12px);\n\t\tbox-shadow: \n\t\t\t0 4px 6px -1px rgba(0, 0, 0, 0.05),\n\t\t\t0 10px 15px -3px rgba(0, 0, 0, 0.05),\n\t\t\t0 20px 25px -5px rgba(0, 0, 0, 0.03);\n\t\tborder: 1px solid rgba(255, 255, 255, 0.5);\n\t\ttransition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;\n\t\tcursor: default;\n\t}\n\n\t.greeting-container.hovered {\n\t\ttransform: translateY(-4px);\n\t\tbox-shadow: \n\t\t\t0 10px 15px -3px rgba(0, 0, 0, 0.08),\n\t\t\t0 20px 25px -5px rgba(0, 0, 0, 0.06),\n\t\t\t0 25px 50px -12px rgba(0, 0, 0, 0.04);\n\t}\n\n\t.greeting {\n\t\tcolor: #2563eb;\n\t\tfont-size: 2.5rem;\n\t\tfont-weight: 700;\n\t\ttext-align: center;\n\t\tmargin: 0.5rem;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tposition: relative;\n\t\tpadding: 0.5rem 1rem;\n\t\tborder-radius: 12px;\n\t\ttransition: all 0.2s ease;\n\t\tletter-spacing: -0.02em;\n\t}\n\n\t.greeting:hover {\n\t\tbackground: rgba(37, 99, 235, 0.08);\n\t\ttransform: scale(1.02);\n\t}\n\n\t.greeting:active {\n\t\ttransform: scale(0.98);\n\t}\n\n\t.greeting:focus-visible {\n\t\toutline: 3px solid #93c5fd;\n\t\toutline-offset: 2px;\n\t}\n\n\t.interaction-hint {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tgap: 0.75rem;\n\t\tanimation: fadeIn 0.4s ease-out;\n\t}\n\n\t.default-hint {\n\t\tcolor: #64748b;\n\t\tfont-size: 0.95rem;\n\t\tfont-weight: 500;\n\t\tletter-spacing: 0.01em;\n\t}\n\n\t.click-counter {\n\t\tcolor: #475569;\n\t\tfont-size: 1rem;\n\t\tfont-weight: 600;\n\t\tbackground: rgba(37, 99, 235, 0.1);\n\t\tpadding: 0.5rem 1rem;\n\t\tborder-radius: 20px;\n\t}\n\n\t.reset-btn {\n\t\tbackground: transparent;\n\t\tborder: 1.5px solid #cbd5e1;\n\t\tcolor: #64748b;\n\t\tpadding: 0.4rem 1.2rem;\n\t\tborder-radius: 20px;\n\t\tfont-size: 0.85rem;\n\t\tfont-weight: 600;\n\t\tcursor: pointer;\n\t\ttransition: all 0.2s ease;\n\t}\n\n\t.reset-btn:hover {\n\t\tborder-color: #94a3b8;\n\t\tcolor: #475569;\n\t\tbackground: rgba(148, 163, 184, 0.1);\n\t}\n\n\t.reset-btn:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\t@keyframes fadeIn {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-8px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n</style>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  },
  {
    "testName": "inspect",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 3,
    "pass1": 0.30000000000000004,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('Hello world');\n\n\t$inspect(text);\n\n\t$inspect(text).with((type, value) => {\n\t\tconsole.log(`[Custom ${type}]`, value);\n\t});\n\n\t$effect(() => {\n\t\t$inspect.trace();\n\t\ttext;\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<p data-testid=\"text-value\">Current text: \"{text}\"</p>\n\t<p data-testid=\"char-count\">Character count: {text.length}</p>\n</div>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('Hello world');\n\tlet charCount = $derived(text.length);\n\n\t$inspect(text);\n\n\t$inspect(text).with((type, value) => {\n\t\tconsole.log(`[${type}] Input value: \"${value}\"`);\n\t});\n\n\t$effect(() => {\n\t\tconst finish = $inspect.trace('text-effect');\n\t\tconsole.log('Effect running for text:', text);\n\t\tfinish();\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<p data-testid=\"text-value\">Current text: \"{text}\"</p>\n\t<p data-testid=\"char-count\">Character count: {charCount}</p>\n</div>",
        "success": false,
        "errors": [
          "tmp/samples/moonshot/inspect_sample1_8d741b50105ef3bd/Component.svelte:14:17 `$inspect.trace(...)` must be the first statement of a function body\nhttps://svelte.dev/e/inspect_trace_invalid_placement"
        ]
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('Hello world');\n\n\t$inspect(text);\n\t$inspect(text).with((type, value) => {\n\t\tconsole.log(`[inspect.with] ${type}: \"${value}\"`);\n\t});\n\n\t$effect(() => {\n\t\t$inspect.trace('input-change');\n\t\ttext;\n\t});\n\n\tlet charCount = $derived(text.length);\n</script>\n\n<div class=\"min-h-screen bg-slate-50 flex items-center justify-center p-6 font-sans\">\n\t<div class=\"w-full max-w-lg bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden\">\n\t\t<div class=\"bg-indigo-600 px-8 py-6\">\n\t\t\t<h1 class=\"text-2xl font-bold text-white\">$inspect Rune Playground</h1>\n\t\t\t<p class=\"text-indigo-100 mt-1 text-sm opacity-90\">Open your browser's developer console to see the magic.</p>\n\t\t</div>\n\n\t\t<div class=\"p-8 space-y-8\">\n\t\t\t<div class=\"space-y-3\">\n\t\t\t\t<label for=\"text-input\" class=\"block text-sm font-semibold text-slate-700 uppercase tracking-wider\">\n\t\t\t\t\tText Input\n\t\t\t\t</label>\n\t\t\t\t<div class=\"relative\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"text-input\"\n\t\t\t\t\t\tdata-testid=\"text-input\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tbind:value={text}\n\t\t\t\t\t\tclass=\"w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl text-slate-800 placeholder-slate-400 focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all duration-200 text-lg\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div class=\"absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none\">\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n\t\t\t\t\t\t\t<path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"bg-slate-50 rounded-xl p-6 border border-slate-200 space-y-4\">\n\t\t\t\t<div>\n\t\t\t\t\t<p class=\"text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Current Value</p>\n\t\t\t\t\t<p data-testid=\"text-value\" class=\"text-lg text-slate-800 font-medium break-all\">\n\t\t\t\t\t\t{text}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"flex items-center gap-3 pt-4 border-t border-slate-200\">\n\t\t\t\t\t<div class=\"flex items-center justify-center w-10 h-10 bg-indigo-100 text-indigo-600 rounded-lg\">\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n\t\t\t\t\t\t\t<path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 20l4-16m2 16l4-16M6 9h14M4 15h14\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p class=\"text-xs font-bold text-slate-500 uppercase tracking-wider\">Character Count</p>\n\t\t\t\t\t\t<p data-testid=\"char-count\" class=\"text-2xl font-bold text-indigo-600\">\n\t\t\t\t\t\t\t{charCount}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n\t\t\t\t<div class=\"bg-emerald-50 border border-emerald-100 rounded-lg p-4 flex flex-col items-center text-center\">\n\t\t\t\t\t<div class=\"w-8 h-8 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mb-2 text-xs font-bold\">1</div>\n\t\t\t\t\t<h3 class=\"text-sm font-bold text-emerald-800\">$inspect</h3>\n\t\t\t\t\t<p class=\"text-xs text-emerald-600 mt-1\">Basic state logging</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bg-amber-50 border border-amber-100 rounded-lg p-4 flex flex-col items-center text-center\">\n\t\t\t\t\t<div class=\"w-8 h-8 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mb-2 text-xs font-bold\">2</div>\n\t\t\t\t\t<h3 class=\"text-sm font-bold text-amber-800\">.with()</h3>\n\t\t\t\t\t<p class=\"text-xs text-amber-600 mt-1\">Custom callback hooks</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bg-rose-50 border border-rose-100 rounded-lg p-4 flex flex-col items-center text-center\">\n\t\t\t\t\t<div class=\"w-8 h-8 bg-rose-100 text-rose-600 rounded-full flex items-center justify-center mb-2 text-xs font-bold\">3</div>\n\t\t\t\t\t<h3 class=\"text-sm font-bold text-rose-800\">.trace()</h3>\n\t\t\t\t\t<p class=\"text-xs text-rose-600 mt-1\">Effect dependency tracing</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>",
        "success": false,
        "errors": [
          "expected false to be true // Object.is equality",
          "expected false to be true // Object.is equality",
          "expected false to be true // Object.is equality",
          "expected false to be true // Object.is equality"
        ]
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('Hello world');\n\n\t$inspect(text);\n\t$inspect(text).with((type, value) => {\n\t\tconsole.log(`[with] ${type}: \"${value}\"`);\n\t});\n\n\t$effect(() => {\n\t\t$inspect.trace();\n\t\tconst traceMessage = `Effect ran with text: \"${text}\"`;\n\t\tconsole.log(traceMessage);\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<p data-testid=\"text-value\">Current text: \"{text}\"</p>\n\t<p data-testid=\"char-count\">Character count: {text.length}</p>\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('Hello world');\n\n\t$inspect(text);\n\n\t$inspect(text).with((type, value) => {\n\t\tconsole.log('Input changed:', type, value);\n\t});\n\n\t$effect(() => {\n\t\ttext;\n\t\t$inspect.trace();\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<p data-testid=\"text-value\">Current text: \"{text}\"</p>\n\t<p data-testid=\"char-count\">Character count: {text.length}</p>\n</div>",
        "success": false,
        "errors": [
          "tmp/samples/moonshot/inspect_sample4_6eb823d7e44ef692/Component.svelte:14:2 `$inspect.trace(...)` must be the first statement of a function body\nhttps://svelte.dev/e/inspect_trace_invalid_placement"
        ]
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<script>\n  let text = $state('Hello world');\n\n  $inspect(text);\n  $inspect(text).with((type, val) => {\n    console.log(`[custom] text ${type}: \"${val}\"`);\n  });\n\n  $effect(() => {\n    const currentText = text;\n    $inspect.trace();\n    console.log(`Effect running for text: \"${currentText}\"`);\n  });\n</script>\n\n<div class=\"min-h-screen bg-slate-50 p-6 font-sans text-slate-800\">\n  <div class=\"max-w-2xl mx-auto bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden\">\n    <div class=\"bg-slate-800 px-6 py-5 border-b border-slate-700\">\n      <h1 class=\"text-xl font-bold text-white tracking-tight\">$inspect Rune Demo</h1>\n      <p class=\"text-slate-400 text-sm mt-1\">Interactive Svelte 5 rune demonstration</p>\n    </div>\n\n    <div class=\"p-6 space-y-6\">\n      <div class=\"space-y-2\">\n        <label for=\"text-input\" class=\"block text-sm font-semibold text-slate-600 uppercase tracking-wider\">\n          Input Text\n        </label>\n        <input\n          id=\"text-input\"\n          data-testid=\"text-input\"\n          type=\"text\"\n          bind:value={text}\n          class=\"w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-lg text-slate-800 placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:bg-white transition-all duration-200 ease-out\"\n        />\n      </div>\n\n      <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n        <div class=\"bg-blue-50 border border-blue-100 rounded-lg p-4\">\n          <div class=\"flex items-center gap-2 mb-1\">\n            <svg class=\"w-4 h-4 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span class=\"text-xs font-bold text-blue-700 uppercase tracking-wide\">Current Value</span>\n          </div>\n          <p data-testid=\"text-value\" class=\"text-lg text-blue-900 font-medium break-all\">\n            \"{text}\"\n          </p>\n        </div>\n\n        <div class=\"bg-emerald-50 border border-emerald-100 rounded-lg p-4\">\n          <div class=\"flex items-center gap-2 mb-1\">\n            <svg class=\"w-4 h-4 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 20l4-16m2 16l4-16M6 9h14M4 15h14\" />\n            </svg>\n            <span class=\"text-xs font-bold text-emerald-700 uppercase tracking-wide\">Character Count</span>\n          </div>\n          <p data-testid=\"char-count\" class=\"text-lg text-emerald-900 font-medium\">\n            {text.length}\n          </p>\n        </div>\n      </div>\n\n      <div class=\"bg-amber-50 border border-amber-100 rounded-lg p-4\">\n        <div class=\"flex items-start gap-3\">\n          <div class=\"mt-0.5 text-amber-500\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\" />\n            </svg>\n          </div>\n          <div>\n            <h3 class=\"text-sm font-bold text-amber-800\">How it works</h3>\n            <p class=\"text-sm text-amber-700 mt-1 leading-relaxed\">\n              This component uses <code class=\"bg-amber-100 px-1.5 py-0.5 rounded text-amber-900 font-mono text-xs\">$inspect</code> to log reactive state changes,\n              <code class=\"bg-amber-100 px-1.5 py-0.5 rounded text-amber-900 font-mono text-xs\">.with()</code> for custom callbacks, and\n              <code class=\"bg-amber-100 px-1.5 py-0.5 rounded text-amber-900 font-mono text-xs\">$inspect.trace()</code> inside an effect to trace execution.\n              Open the browser console to see the logs.\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
        "success": false,
        "errors": [
          "tmp/samples/moonshot/inspect_sample5_5aad7b03044da35b/Component.svelte:13:4 `$inspect.trace(...)` must be the first statement of a function body\nhttps://svelte.dev/e/inspect_trace_invalid_placement"
        ]
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('Hello world');\n\n\t$inspect(text);\n\n\t$inspect(text).with((type, values) => {\n\t\tconsole.log('Custom inspect:', type, values);\n\t});\n\n\t$effect(() => {\n\t\ttext;\n\t\t$inspect.trace();\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<p data-testid=\"text-value\">Current text: \"{text}\"</p>\n\t<p data-testid=\"char-count\">Character count: {text.length}</p>\n</div>",
        "success": false,
        "errors": [
          "tmp/samples/moonshot/inspect_sample6_8aa6ea1debb76e1f/Component.svelte:14:2 `$inspect.trace(...)` must be the first statement of a function body\nhttps://svelte.dev/e/inspect_trace_invalid_placement"
        ]
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<div class=\"demo-container\">\n  <div class=\"inspect-demo\">\n    <h1>$inspect Rune Demo</h1>\n    \n    <div class=\"input-section\">\n      <label for=\"text-input\">Enter some text:</label>\n      <input \n        id=\"text-input\"\n        data-testid=\"text-input\" \n        type=\"text\" \n        bind:value={text} \n      />\n    </div>\n\n    <div class=\"output-section\">\n      <p data-testid=\"text-value\">Current text: \"{text}\"</p>\n      <p data-testid=\"char-count\">Character count: {text.length}</p>\n    </div>\n\n    <div class=\"info-box\">\n      <p>\n        Open your browser's developer console to see the \n        <code>$inspect</code> rune in action!\n      </p>\n      <ul>\n        <li>Basic <code>$inspect(text)</code> logs value changes</li>\n        <li><code>$inspect(text).with(...)</code> shows custom formatted logs</li>\n        <li><code>$inspect.trace()</code> inside the effect logs execution traces</li>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<script>\n  let text = $state(\"Hello world\");\n\n  $inspect(text);\n\n  $inspect(text).with((type, value) => {\n    console.log(`$inspect.with -> [${type.toUpperCase()}] \"${value}\"`);\n  });\n\n  $effect(() => {\n    $inspect.trace();\n    const current = text;\n    const count = current.length;\n    console.log(`Effect executed: \"${current}\" has ${count} characters`);\n  });\n</script>\n\n<style>\n  .demo-container {\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    min-height: 100vh;\n    padding: 2rem;\n    background-color: #f5f5f5;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n\n  .inspect-demo {\n    background: white;\n    border-radius: 12px;\n    padding: 2rem;\n    width: 100%;\n    max-width: 500px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  }\n\n  h1 {\n    margin: 0 0 1.5rem 0;\n    font-size: 1.5rem;\n    color: #1a1a1a;\n    border-bottom: 2px solid #ff3e00;\n    padding-bottom: 0.75rem;\n  }\n\n  .input-section {\n    margin-bottom: 1.5rem;\n  }\n\n  label {\n    display: block;\n    margin-bottom: 0.5rem;\n    font-weight: 600;\n    color: #333;\n  }\n\n  input {\n    width: 100%;\n    padding: 0.75rem;\n    font-size: 1rem;\n    border: 2px solid #ddd;\n    border-radius: 8px;\n    box-sizing: border-box;\n    transition: border-color 0.2s;\n  }\n\n  input:focus {\n    outline: none;\n    border-color: #ff3e00;\n  }\n\n  .output-section {\n    background-color: #fafafa;\n    border-radius: 8px;\n    padding: 1rem;\n    margin-bottom: 1.5rem;\n  }\n\n  .output-section p {\n    margin: 0.5rem 0;\n    color: #444;\n    font-size: 1.05rem;\n  }\n\n  .info-box {\n    background-color: #fff8e1;\n    border-left: 4px solid #ff9800;\n    border-radius: 0 8px 8px 0;\n    padding: 1rem;\n  }\n\n  .info-box p {\n    margin: 0 0 0.75rem 0;\n    font-weight: 600;\n    color: #5d4037;\n  }\n\n  .info-box ul {\n    margin: 0;\n    padding-left: 1.25rem;\n    color: #6d4c41;\n  }\n\n  .info-box li {\n    margin-bottom: 0.5rem;\n    line-height: 1.5;\n  }\n\n  code {\n    background-color: #e8e8e8;\n    padding: 0.15rem 0.35rem;\n    border-radius: 4px;\n    font-family: 'SF Mono', monospace;\n    font-size: 0.9em;\n    color: #d81b60;\n  }\n</style>",
        "success": false,
        "errors": [
          "expected 'Hello world\\n$inspect.with -> [INIT] …' to contain 'init'",
          "expected 'Hello world\\n$inspect.with -> [INIT] …' to contain 'init'",
          "expected 'Hello world\\n$inspect.with -> [INIT] …' to contain 'init'"
        ]
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('Hello world');\n\tlet charCount = $derived(text.length);\n\n\t$inspect(text);\n\n\t$inspect(text).with((type, value) => {\n\t\tconsole.log(`Text ${type}:`, value);\n\t});\n\n\t$effect(() => {\n\t\ttext;\n\t\t$inspect.trace();\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<p data-testid=\"text-value\">Current text: \"{text}\"</p>\n\t<p data-testid=\"char-count\">Character count: {charCount}</p>\n</div>",
        "success": false,
        "errors": [
          "tmp/samples/moonshot/inspect_sample8_0c789470ee494b6f/Component.svelte:15:2 `$inspect.trace(...)` must be the first statement of a function body\nhttps://svelte.dev/e/inspect_trace_invalid_placement"
        ]
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet text = $state('Hello world');\n\n\t$inspect(text);\n\n\t$inspect(text).with((type, value) => {\n\t\tconsole.log(`Text updated (${type}):`, value);\n\t});\n\n\t$effect(() => {\n\t\t$inspect.trace();\n\t\ttext;\n\t});\n</script>\n\n<div>\n\t<input data-testid=\"text-input\" type=\"text\" bind:value={text} />\n\t<p data-testid=\"text-value\">Current text: \"{text}\"</p>\n\t<p data-testid=\"char-count\">Character count: {text.length}</p>\n</div>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  },
  {
    "testName": "props",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 10,
    "pass1": 1,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet {\n\t\tname = 'World',\n\t\tcount: initialCount = 0,\n\t\tshowDetails = false\n\t} = $props();\n\n\tlet count = $state(initialCount);\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n</script>\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {count}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>\n\t\tIncrement\n\t</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {count}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet { name = 'World', count = 0, showDetails = false } = $props();\n\tlet internalCount = $state(count);\n</script>\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {internalCount}</p>\n\t<button data-testid=\"increment-button\" onclick={() => internalCount++}>\n\t\tIncrement\n\t</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {internalCount}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet { name = \"World\", count = 0, showDetails = false } = $props();\n\t\n\tlet localCount = $state(count);\n\t\n\tfunction increment() {\n\t\tlocalCount += 1;\n\t}\n</script>\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {localCount}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {localCount}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\nlet { name = \"World\", count = 0, showDetails = false } = $props();\nlet localCount = $state(count);\n\nfunction increment() {\n\tlocalCount += 1;\n}\n</script>\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {localCount}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {localCount}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {count}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {count}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>\n\n<script>\n\tlet { name = \"World\", count: initialCount = 0, showDetails = false } = $props();\n\n\tlet count = $state(initialCount);\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n</script>",
        "success": true,
        "errors": []
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<script>\nlet { name = \"World\", count = 0, showDetails = false } = $props();\nlet localCount = $state(count);\n\nfunction increment() {\n\tlocalCount += 1;\n}\n</script>\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {localCount}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {localCount}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet { name = \"World\", count: initialCount = 0, showDetails = false } = $props();\n\tlet count = $state(initialCount);\n\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n</script>\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {count}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {count}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<script>\n  let {\n    name = \"World\",\n    count: initialCount = 0,\n    showDetails = false\n  } = $props();\n\n  let count = $state(initialCount);\n\n  function increment() {\n    count += 1;\n  }\n</script>\n\n<div>\n  <h1 data-testid=\"name-display\">Hello, {name}!</h1>\n  <p data-testid=\"count-display\">Count: {count}</p>\n  <button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n\n  {#if showDetails}\n    <div data-testid=\"details\">\n      <p>Name is {name}</p>\n      <p>Count is {count}</p>\n      <p>ShowDetails is {showDetails}</p>\n    </div>\n  {/if}\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet { \n\t\tname = \"World\", \n\t\tcount: initialCount = 0, \n\t\tshowDetails = false \n\t} = $props();\n\t\n\tlet count = $state(initialCount);\n\t\n\tfunction increment() {\n\t\tcount += 1;\n\t}\n</script>\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {count}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>\n\t\tIncrement\n\t</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {count}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>",
        "success": true,
        "errors": []
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet { name = \"World\", count = 0, showDetails = false } = $props();\n\tlet localCount = $state(count);\n\n\tfunction increment() {\n\t\tlocalCount += 1;\n\t}\n</script>\n\n<div>\n\t<h1 data-testid=\"name-display\">Hello, {name}!</h1>\n\t<p data-testid=\"count-display\">Count: {localCount}</p>\n\t<button data-testid=\"increment-button\" onclick={increment}>Increment</button>\n\n\t{#if showDetails}\n\t\t<div data-testid=\"details\">\n\t\t\t<p>Name is {name}</p>\n\t\t\t<p>Count is {count}</p>\n\t\t\t<p>ShowDetails is {showDetails}</p>\n\t\t</div>\n\t{/if}\n</div>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  },
  {
    "testName": "snippets",
    "provider": "Moonshot",
    "modelId": "kimi-k2.6",
    "numSamples": 10,
    "numCorrect": 10,
    "pass1": 1,
    "pass10": 1,
    "context": {
      "used": false,
      "content": ""
    },
    "samples": [
      {
        "index": 0,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet books = $state([\n\t\t'The Lord of the Rings',\n\t\t'To Kill a Mockingbird',\n\t\t'1984'\n\t]);\n</script>\n\n{#snippet title(bookTitle)}\n\t<span data-testid=\"book-title\">{bookTitle}</span>\n{/snippet}\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">\n\t\t\t{@render title(book)}\n\t\t</li>\n\t{/each}\n</ul>",
        "success": true,
        "errors": [],
        "temperature": 0
      },
      {
        "index": 1,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet books = [\n\t\t'The Lord of the Rings',\n\t\t'To Kill a Mockingbird',\n\t\t'1984'\n\t];\n</script>\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">\n\t\t\t{@render title(book)}\n\t\t</li>\n\t{/each}\n</ul>\n\n{#snippet title(bookTitle)}\n\t<span data-testid=\"book-title\">{bookTitle}</span>\n{/snippet}",
        "success": true,
        "errors": []
      },
      {
        "index": 2,
        "code": "<svelte:options runes={true} />\n\n<script>\n  const books = $state([\n    \"The Lord of the Rings\",\n    \"To Kill a Mockingbird\",\n    \"1984\"\n  ]);\n</script>\n\n{#snippet title(book)}\n  <span data-testid=\"book-title\">{book}</span>\n{/snippet}\n\n<ul>\n  {#each books as book}\n    <li data-testid=\"book-item\">\n      {@render title(book)}\n    </li>\n  {/each}\n</ul>",
        "success": true,
        "errors": []
      },
      {
        "index": 3,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tconst books = [\"The Lord of the Rings\", \"To Kill a Mockingbird\", \"1984\"];\n</script>\n\n{#snippet title(bookTitle)}\n\t<span data-testid=\"book-title\">{bookTitle}</span>\n{/snippet}\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">\n\t\t\t{@render title(book)}\n\t\t</li>\n\t{/each}\n</ul>",
        "success": true,
        "errors": []
      },
      {
        "index": 4,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tconst books = [\"The Lord of the Rings\", \"To Kill a Mockingbird\", \"1984\"];\n</script>\n\n{#snippet title(bookTitle)}\n\t<span data-testid=\"book-title\">{bookTitle}</span>\n{/snippet}\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">{@render title(book)}</li>\n\t{/each}\n</ul>",
        "success": true,
        "errors": []
      },
      {
        "index": 5,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tconst books = [\"The Lord of the Rings\", \"To Kill a Mockingbird\", \"1984\"];\n</script>\n\n{#snippet title(bookTitle)}\n\t<span data-testid=\"book-title\">{bookTitle}</span>\n{/snippet}\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">\n\t\t\t{@render title(book)}\n\t\t</li>\n\t{/each}\n</ul>",
        "success": true,
        "errors": []
      },
      {
        "index": 6,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tconst books = [\"The Lord of the Rings\", \"To Kill a Mockingbird\", \"1984\"];\n</script>\n\n{#snippet title(bookTitle)}\n\t<span data-testid=\"book-title\">{bookTitle}</span>\n{/snippet}\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">\n\t\t\t{@render title(book)}\n\t\t</li>\n\t{/each}\n</ul>",
        "success": true,
        "errors": []
      },
      {
        "index": 7,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tlet books = [\n\t\t\"The Lord of the Rings\",\n\t\t\"To Kill a Mockingbird\",\n\t\t\"1984\"\n\t];\n</script>\n\n{#snippet title(bookTitle)}\n\t<span data-testid=\"book-title\">{bookTitle}</span>\n{/snippet}\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">\n\t\t\t{@render title(book)}\n\t\t</li>\n\t{/each}\n</ul>",
        "success": true,
        "errors": []
      },
      {
        "index": 8,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tconst books = $state([\n\t\t\"The Lord of the Rings\",\n\t\t\"To Kill a Mockingbird\",\n\t\t\"1984\"\n\t]);\n</script>\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">\n\t\t\t{@render title(book)}\n\t\t</li>\n\t{/each}\n</ul>\n\n{#snippet title(bookTitle)}\n\t<span data-testid=\"book-title\">{bookTitle}</span>\n{/snippet}",
        "success": true,
        "errors": []
      },
      {
        "index": 9,
        "code": "<svelte:options runes={true} />\n\n<script>\n\tconst books = ['The Lord of the Rings', 'To Kill a Mockingbird', '1984'];\n\n\tlet count = $state(0);\n</script>\n\n{#snippet title(t)}\n\t<span data-testid=\"book-title\">{t}</span>\n{/snippet}\n\n<ul>\n\t{#each books as book}\n\t\t<li data-testid=\"book-item\">{@render title(book)}</li>\n\t{/each}\n</ul>\n\n<div>\n\t<p>Count: {count}</p>\n\t<button onclick={() => count++}>Increment</button>\n</div>",
        "success": true,
        "errors": []
      }
    ],
    "timestamp": "2026-04-21T01:12:06.795Z"
  }
]