TC
/
arozos-mirror
зеркало из https://github.com/tobychui/arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
							<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta charset="UTF-8">
        <meta name="theme-color" content="#0078d4">
        <script src="../script/jquery.min.js"></script>
        <script src="../script/ao_module.js"></script>
        <title>AGI Dev Mode Test</title>
        <style>
            *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

            body {
                font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
                font-size: 14px;
                background: #f3f3f3;
                color: #201f1e;
                min-height: 100vh;
            }

            /* ── Nav bar ───────────────────────────────────────────── */
            .nav-bar { position: sticky; top: 0; z-index: 100; height: 48px; background: rgba(243,243,243,0.9); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; padding: 0 20px; gap: 4px; }
            .nav-brand { font-size: 13px; font-weight: 600; color: #201f1e; margin-right: 12px; }
            .nav-tab { display: inline-flex; align-items: center; height: 48px; padding: 0 12px; font-size: 13px; color: #605e5c; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.1s, border-color 0.1s; white-space: nowrap; }
            .nav-tab:hover { color: #201f1e; }
            .nav-tab.active { color: #0078d4; border-bottom-color: #0078d4; font-weight: 600; }

            /* ── Content ───────────────────────────────────────────── */
            .content { max-width: 880px; margin: 24px auto; padding: 0 20px; }

            .page-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
            .page-subtitle { font-size: 13px; color: #797775; margin-bottom: 20px; line-height: 1.5; }
            .page-subtitle code { font-family: 'Cascadia Code', 'Consolas', monospace; background: #ebebeb; padding: 1px 5px; border-radius: 3px; font-size: 12px; }

            /* ── Toggle row ────────────────────────────────────────── */
            .toggle-row {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px 16px;
                background: #fff;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                margin-bottom: 14px;
            }

            .toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
            .toggle-switch input { opacity: 0; width: 0; height: 0; }
            .toggle-track {
                position: absolute; inset: 0;
                background: #c0c0c0;
                border-radius: 11px;
                cursor: pointer;
                transition: background 0.2s;
            }
            .toggle-track::after {
                content: '';
                position: absolute;
                left: 3px; top: 3px;
                width: 16px; height: 16px;
                background: #fff;
                border-radius: 50%;
                transition: transform 0.2s;
            }
            .toggle-switch input:checked + .toggle-track { background: #0078d4; }
            .toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }

            .toggle-label { font-size: 13px; font-weight: 500; }
            .toggle-hint { font-size: 12px; color: #797775; margin-left: auto; }

            /* ── Toolbar ───────────────────────────────────────────── */
            .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
            .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 4px; font-family: inherit; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: background 0.1s; line-height: 1; }
            .btn-primary { background: #0078d4; color: #fff; border-color: #0078d4; }
            .btn-primary:hover { background: #106ebe; }
            .btn-secondary { background: #fff; color: #201f1e; border-color: #d1d1d1; }
            .btn-secondary:hover { background: #f5f5f5; }

            /* ── Test list card ────────────────────────────────────── */
            .test-list {
                background: #fff;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            }

            .test-list-header {
                padding: 10px 16px;
                font-size: 11px;
                font-weight: 600;
                color: #797775;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                border-bottom: 1px solid #f0f0f0;
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .test-list-header .col-name   { flex: 1; }
            .test-list-header .col-status { width: 82px; text-align: center; }
            .test-list-header .col-action { width: 52px; }

            .test-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 10px 16px;
                border-bottom: 1px solid #f5f5f5;
                transition: background 0.1s;
            }
            .test-item:hover { background: #fafafa; }

            .test-idx { font-size: 11px; color: #bbb; width: 22px; text-align: right; flex-shrink: 0; }

            .test-info { flex: 1; min-width: 0; }
            .test-name { font-size: 13px; font-weight: 500; }
            .test-desc { font-size: 11px; color: #797775; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .test-script { font-size: 11px; color: #bbb; font-family: 'Cascadia Code', 'Consolas', monospace; margin-top: 1px; }

            /* Status badges — same tokens as index.html */
            .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; width: 82px; justify-content: center; flex-shrink: 0; }
            .status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
            .s-pending { background: #f3f3f3; color: #797775; }
            .s-pending .status-dot { background: #c0c0c0; }
            .s-running { background: #eff6fc; color: #0078d4; }
            .s-running .status-dot { background: #0078d4; animation: pulse 1s ease-in-out infinite; }
            .s-pass    { background: #dff6dd; color: #107c10; }
            .s-pass    .status-dot { background: #107c10; }
            .s-fail    { background: #fde7e9; color: #c50f1f; }
            .s-fail    .status-dot { background: #c50f1f; }
            @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

            .col-action { width: 52px; flex-shrink: 0; text-align: right; }
            .btn-run { padding: 4px 10px; font-size: 12px; border-radius: 3px; background: transparent; border: 1px solid #d1d1d1; color: #444; cursor: pointer; font-family: inherit; transition: background 0.1s; }
            .btn-run:hover { background: #f0f0f0; }
            .btn-run:disabled { opacity: 0.45; cursor: default; }

            /* ── Result area ───────────────────────────────────────── */
            .result-area {
                display: none;
                padding: 10px 16px 12px 50px;
                background: #fafafa;
                border-top: 1px solid #f0f0f0;
                border-left: 3px solid transparent;
            }
            .result-area.r-pass { border-left-color: #107c10; }
            .result-area.r-fail { border-left-color: #c50f1f; }
            .result-area.r-ok   { border-left-color: #107c10; }

            .result-label { font-size: 11px; font-weight: 600; color: #797775; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }

            .result-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'Cascadia Code', 'Consolas', monospace; margin-bottom: 8px; }
            .result-table td { padding: 2px 0; vertical-align: top; }
            .result-table td:first-child { color: #797775; font-weight: 600; width: 80px; padding-right: 12px; white-space: nowrap; }

            .stack-block {
                background: #f0f0f0;
                border-left: 3px solid #c0c0c0;
                padding: 7px 10px;
                font-family: 'Cascadia Code', 'Consolas', monospace;
                font-size: 11px;
                white-space: pre-wrap;
                word-break: break-all;
                line-height: 1.55;
                border-radius: 0 3px 3px 0;
                color: #323130;
            }

            .raw-block {
                background: #f0f0f0;
                border-left: 3px solid #e57373;
                padding: 7px 10px;
                font-family: 'Cascadia Code', 'Consolas', monospace;
                font-size: 11px;
                white-space: pre-wrap;
                word-break: break-all;
                max-height: 180px;
                overflow-y: auto;
                line-height: 1.55;
                border-radius: 0 3px 3px 0;
            }

            .resp-block {
                font-family: 'Cascadia Code', 'Consolas', monospace;
                font-size: 12px;
                color: #323130;
                word-break: break-all;
            }
        </style>
    </head>
    <body>

        <nav class="nav-bar">
            <span class="nav-brand">Unit Tester</span>
            <a class="nav-tab" href="index.html">AGI Scripts</a>
            <a class="nav-tab" href="backend.html">ao_backend</a>
            <a class="nav-tab" href="wstest.html">WebSocket</a>
            <a class="nav-tab active" href="devmode.html">Dev Mode</a>
        </nav>

        <div class="content">
            <div class="page-title">AGI Dev Mode Debug Test</div>
            <p class="page-subtitle">
                Tests the <code>AGI_DEV</code> global flag with <code>ao_module_agirun</code>.
                When enabled, the backend returns a JSON payload with the full Otto stack trace
                instead of a generic HTTP&nbsp;500.
            </p>

            <!-- Toggle -->
            <div class="toggle-row">
                <label class="toggle-switch">
                    <input type="checkbox" id="devmodeCheckbox" checked onchange="onToggle(this)">
                    <span class="toggle-track"></span>
                </label>
                <span class="toggle-label">AGI Dev Mode</span>
                <span class="toggle-hint" id="toggleHint">ON &mdash; errors return detailed JSON</span>
            </div>

            <!-- Toolbar -->
            <div class="toolbar">
                <button class="btn btn-primary" onclick="runAllTests()">&#9654;&nbsp; Run All</button>
                <button class="btn btn-secondary" onclick="clearAll()">Clear</button>
            </div>

            <!-- Test list -->
            <div class="test-list">
                <div class="test-list-header">
                    <span style="width:22px;flex-shrink:0"></span>
                    <span class="col-name">Test</span>
                    <span class="col-status">Status</span>
                    <span class="col-action"></span>
                </div>
                <div id="testContainer"></div>
            </div>
        </div>

        <script>
            var AGI_DEV = true;

            const TESTS = [
                {
                    id: "runtime_error",
                    name: "Runtime Reference Error",
                    script: "UnitTest/devmode/runtime_error.js",
                    desc: "Calls an undefined variable — triggers ReferenceError in Otto VM",
                    expectError: true
                },
                {
                    id: "throw_error",
                    name: "Explicit throw new Error()",
                    script: "UnitTest/devmode/throw_error.js",
                    desc: "Throws through a nested call chain — exercises multi-frame stack trace",
                    expectError: true
                },
                {
                    id: "working_script",
                    name: "Working Script",
                    script: "UnitTest/devmode/working_script.js",
                    desc: "Completes successfully — verifies dev mode does not affect normal execution",
                    expectError: false
                }
            ];

            /* ── Build list ──────────────────────────────────────── */
            (function build() {
                let html = TESTS.map(function(t, i) {
                    return `<div class="test-item" id="item_${t.id}">
                        <span class="test-idx">${i + 1}</span>
                        <div class="test-info">
                            <div class="test-name">${escHtml(t.name)}</div>
                            <div class="test-desc">${escHtml(t.desc)}</div>
                            <div class="test-script">${escHtml(t.script)}</div>
                        </div>
                        <span class="status-badge s-pending" id="badge_${t.id}">
                            <span class="status-dot"></span>Pending
                        </span>
                        <div class="col-action">
                            <button class="btn-run" id="runbtn_${t.id}" onclick="runTest('${t.id}')">Run</button>
                        </div>
                    </div>
                    <div class="result-area" id="result_${t.id}"></div>`;
                }).join("");
                document.getElementById("testContainer").innerHTML = html;
            })();

            /* ── Toggle ──────────────────────────────────────────── */
            function onToggle(cb) {
                AGI_DEV = cb.checked;
                document.getElementById("toggleHint").textContent = AGI_DEV
                    ? "ON — errors return detailed JSON"
                    : "OFF — errors return generic HTML 500";
            }

            /* ── Run ─────────────────────────────────────────────── */
            function runAllTests() {
                TESTS.forEach(function(t) { runTest(t.id); });
            }

            function clearAll() {
                TESTS.forEach(function(t) {
                    setStatus(t.id, "pending");
                    let r = document.getElementById("result_" + t.id);
                    r.style.display = "none"; r.innerHTML = ""; r.className = "result-area";
                });
            }

            function runTest(id) {
                let test = TESTS.find(function(t) { return t.id === id; });
                let btn = document.getElementById("runbtn_" + id);
                setStatus(id, "running");
                if (btn) btn.disabled = true;

                ao_module_agirun(test.script, {}, function(data) {
                    setStatus(id, "pass");
                    let body = (typeof data === "string") ? data : JSON.stringify(data);
                    showResult(id, "r-pass", renderSuccess(body));
                    if (btn) btn.disabled = false;
                }, function(xhr) {
                    setStatus(id, "fail");
                    let html = AGI_DEV ? renderDevError(xhr) : renderNormalError(xhr);
                    showResult(id, "r-fail", html);
                    if (btn) btn.disabled = false;
                }, 10000);
            }

            /* ── Renderers ───────────────────────────────────────── */
            function renderSuccess(body) {
                return `<div class="result-label">Response (HTTP 200)</div>
                    <div class="resp-block">${escHtml(body)}</div>`;
            }

            function renderDevError(xhr) {
                let e = {};
                try { e = JSON.parse(xhr.responseText); } catch(_) {}
                let msg    = escHtml(e.message    || "(no message)");
                let stack  = escHtml(e.stacktrace || "(no stack trace)");
                let script = escHtml(e.script     || "(unknown)");
                let user   = escHtml(e.user       || "(unknown)");
                let same   = (e.message === e.stacktrace);
                return `<div class="result-label">Dev Mode Error (HTTP ${xhr.status || "?"})</div>
                    <table class="result-table">
                        <tr><td>Message</td><td>${msg}</td></tr>
                        <tr><td>Script</td><td>${script}</td></tr>
                        <tr><td>User</td><td>${user}</td></tr>
                    </table>
                    <div class="result-label" style="margin-top:8px">Stack Trace</div>
                    <div class="stack-block">${same ? msg : stack}</div>`;
            }

            function renderNormalError(xhr) {
                let raw = escHtml(xhr.responseText || "(empty response body)");
                return `<div class="result-label">Normal Mode Error (HTTP ${xhr.status || "?"}) &mdash; no debug info</div>
                    <div class="raw-block">${raw}</div>`;
            }

            /* ── Helpers ─────────────────────────────────────────── */
            function setStatus(id, state) {
                let badge = document.getElementById("badge_" + id);
                if (!badge) return;
                let labels = { pending:"Pending", running:"Running", pass:"Passed", fail:"Failed" };
                badge.className = "status-badge s-" + state;
                badge.innerHTML = '<span class="status-dot"></span>' + labels[state];
            }

            function showResult(id, cls, html) {
                let div = document.getElementById("result_" + id);
                if (!div) return;
                div.className = "result-area " + cls;
                div.innerHTML = html;
                div.style.display = "block";
            }

            function escHtml(s) {
                return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
            }
        </script>
    </body>
</html>