<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Gherkin Editor -->
    <div>
        <h2 class="text-lg font-semibold mb-3">Feature Definition</h2>
        <textarea id="feature" class="w-full h-96 bg-zinc-900 border border-zinc-700 rounded-3xl p-6 font-mono text-sm" spellcheck="false">

    <!-- Test Runner -->
    <div>
        <div class="flex justify-between mb-3">
            <h2 class="text-lg font-semibold">Test Results</h2>
            <button onclick="runTests()" 
                    class="bg-emerald-600 hover:bg-emerald-500 px-6 py-2 rounded-2xl font-medium">
                ▶️ Run Tests
            </button>
        </div>
        
        <div id="results" class="bg-zinc-900 border border-zinc-700 rounded-3xl p-6 min-h-[500px] overflow-auto text-sm font-mono"></div>
    </div>
</div>

function addTest(description, fn) {
tests.push({ description, fn, status: 'pending', message: '' });
}

async function runTests() {
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '

Running tests...

for (let test of tests) {
    test.status = 'running';
    try {
        await test.fn();
        test.status = 'passed';
        test.message = 'OK';
    } catch (err) {
        test.status = 'failed';
        test.message = err.message || 'Failed';
    }
    renderResults();
}

}

function renderResults() {
const div = document.getElementById('results');
div.innerHTML = tests.map(t => <div class="mb-4 p-4 rounded-2xl border ${t.status === 'passed' ? 'border-emerald-500 bg-emerald-950' : t.status === 'failed' ? 'border-red-500 bg-red-950' : 'border-zinc-700'}"> <div class="flex justify-between"> <span>${t.description}</span> <span class="${t.status === 'passed' ? 'passed' : t.status === 'failed' ? 'failed' : 'text-zinc-500'}"> ${t.status.toUpperCase()} </span> </div> ${t.message ?

// ====================== TESTS ======================
addTest("LocalStorage.setItem and getItem", async () => {
localStorage.setItem("shimTestKey", "Hello from shim test");
const value = localStorage.getItem("shimTestKey");
if (value !== "Hello from shim test") throw new Error(Expected 'Hello from shim test', got '${value}');
});

addTest("LocalStorage persistence (same session)", async () => {
const value = localStorage.getItem("shimTestKey");
if (value !== "Hello from shim test") throw new Error("Value did not persist in same session");
});

addTest("hive_keychain is available", () => {
if (!window.hive_keychain) throw new Error("hive_keychain not found");
});

addTest("hive_keychain.requestBroadcast exists", () => {
if (typeof window.hive_keychain.requestBroadcast !== 'function') {
throw new Error("requestBroadcast is not a function");
}
});

addTest("IndexedDB proxy (expected to be limited)", () => {
if (typeof indexedDB === 'undefined' || typeof indexedDB.open !== 'function') {
console.warn("IndexedDB proxy not fully functional yet");
}
});

// Init
window.addEventListener('load', () => {
renderResults();

window.addEventListener("message", (e) => {
    if (e.data.type === "hive-shim-context") {
        console.log("✅ Running inside hive-shim", e.data);
    }
});

});