tjs-lang 0.2.8 → 0.3.0

package/docs/index.js

@@ -18702,6 +18702,41 @@ function runAllTests(tests, mocks, sigTestInfos, transpiledCode, resolvedImports
             if (!__deepEqual(actual, expected)) {
               throw new Error('Expected ' + __format(expected) + ' but got ' + __format(actual))
             }
+          },
+          toContain(item) {
+            if (!Array.isArray(actual) || !actual.some(function(v) { return __deepEqual(v, item) })) {
+              throw new Error('Expected ' + __format(actual) + ' to contain ' + __format(item))
+            }
+          },
+          toBeTruthy() {
+            if (!actual) {
+              throw new Error('Expected ' + __format(actual) + ' to be truthy')
+            }
+          },
+          toBeFalsy() {
+            if (actual) {
+              throw new Error('Expected ' + __format(actual) + ' to be falsy')
+            }
+          },
+          toBeNull() {
+            if (actual !== null) {
+              throw new Error('Expected null but got ' + __format(actual))
+            }
+          },
+          toBeUndefined() {
+            if (actual !== undefined) {
+              throw new Error('Expected undefined but got ' + __format(actual))
+            }
+          },
+          toBeGreaterThan(n) {
+            if (!(actual > n)) {
+              throw new Error('Expected ' + __format(actual) + ' to be greater than ' + n)
+            }
+          },
+          toBeLessThan(n) {
+            if (!(actual < n)) {
+              throw new Error('Expected ' + __format(actual) + ' to be less than ' + n)
+            }
           }
         }
       }
@@ -236035,7 +236070,7 @@ var examples = [
     description: "Fetch weather data (no API key needed)",
     group: "api",
     code: `function getWeather({ lat = 37.7749, lon = -122.4194 }) {
-  let url = \`https://api.open-meteo.com/v1/forecast?latitude=\${lat}&longitude=\${lon}&current_weather=true\`
+  let url = 'https://api.open-meteo.com/v1/forecast?latitude=' + lat + '&longitude=' + lon + '&current_weather=true'
   let response = httpFetch({ url, cache: 1800 })
   let weather = response.current_weather
   return { weather }
@@ -236046,7 +236081,7 @@ var examples = [
     description: "Search Apple iTunes catalog",
     group: "api",
     code: `function searchMusic({ query = 'Beatles', limit = 5 }) {
-  let url = \`https://itunes.apple.com/search?term=\${query}&limit=\${limit}&media=music\`
+  let url = 'https://itunes.apple.com/search?term=' + query + '&limit=' + limit + '&media=music'
   let response = httpFetch({ url, cache: 3600 })
   let tracks = response.results.map(x => ({
     artist: x.artistName,
@@ -236061,7 +236096,7 @@ var examples = [
     description: "Search GitHub repositories",
     group: "api",
     code: `function searchRepos({ query = 'tosijs', perPage = 5 }) {
-  let url = \`https://api.github.com/search/repositories?q=\${query}&per_page=\${perPage}&sort=stars\`
+  let url = 'https://api.github.com/search/repositories?q=' + query + '&per_page=' + perPage + '&sort=stars'
   let response = httpFetch({ url, cache: 300 })
   let repos = response.items.map(x => ({
     name: x.full_name,
@@ -236090,12 +236125,10 @@ var examples = [
     code: `function summarize({ source = 'coffee-origins' }) {
   // Fetch text from our sample documents
   // Options: 'coffee-origins', 'ai-history', 'renewable-energy'
-  let url = \`/texts/\${source}.txt\`
+  let url = '/texts/' + source + '.txt'
   let text = httpFetch({ url })
 
-  let prompt = \`Summarize the following text in 2-3 sentences:
-
-\${text}\`
+  let prompt = 'Summarize the following text in 2-3 sentences:\\n\\n' + text
   let summary = llmPredict({ prompt })
   return { source, summary }
 }`
@@ -236115,7 +236148,7 @@ var examples = [
     hobbies: ['']
   })
 
-  let prompt = \`Extract person info from this text: \${text}\`
+  let prompt = 'Extract person info from this text: ' + text
   let response = llmPredict({ prompt, options: { responseFormat: schema } })
   let person = JSON.parse(response)
   return { person }
@@ -236129,12 +236162,12 @@ var examples = [
     code: `function findCovers({ song = 'Yesterday', artist = 'Beatles' }) {
   // Search iTunes for the song
   let query = song + ' ' + artist
-  let url = \`https://itunes.apple.com/search?term=\${query}&limit=25&media=music\`
+  let url = 'https://itunes.apple.com/search?term=' + query + '&limit=25&media=music'
   let response = httpFetch({ url, cache: 3600 })
 
   // Format results for LLM analysis
   let results = response.results || []
-  let tracks = results.map(x => \`"\${x.trackName}" by \${x.artistName} (\${x.collectionName})\`)
+  let tracks = results.map(x => '"' + x.trackName + '" by ' + x.artistName + ' (' + x.collectionName + ')')
   let trackList = tracks.join('\\n')
 
   // Schema.response from example - much cleaner!
@@ -236142,11 +236175,7 @@ var examples = [
     covers: [{ track: '', artist: '', album: '' }]
   })
 
-  let prompt = \`Search results for "\${song}" by \${artist}:
-
-\${trackList}
-
-List cover versions (tracks NOT by \${artist}).\`
+  let prompt = 'Search results for "' + song + '" by ' + artist + ':\\n\\n' + trackList + '\\n\\nList cover versions (tracks NOT by ' + artist + ').'
 
   let llmResponse = llmPredict({ prompt, options: { responseFormat: schema } })
   let parsed = JSON.parse(llmResponse)
@@ -236160,19 +236189,15 @@ List cover versions (tracks NOT by \${artist}).\`
     requiresApi: true,
     code: `function mathAssistant({ question = 'What is 23 * 47 + 156?' }) {
   // First, ask LLM to extract the calculation
-  let extractPrompt = \`Extract the math expression from this question. Return ONLY the expression, nothing else.
-Question: \${question}\`
+  let extractPrompt = 'Extract the math expression from this question. Return ONLY the expression, nothing else.\\nQuestion: ' + question
   let expression = llmPredict({ prompt: extractPrompt })
 
   // Evaluate the expression (simple eval simulation)
-  let calcPrompt = \`Calculate: \${expression}
-Return ONLY the numeric result.\`
+  let calcPrompt = 'Calculate: ' + expression + '\\nReturn ONLY the numeric result.'
   let calcResult = llmPredict({ prompt: calcPrompt })
 
   // Format the answer
-  let answerPrompt = \`The user asked: "\${question}"
-The calculated result is: \${calcResult}
-Write a brief, friendly response with the answer.\`
+  let answerPrompt = 'The user asked: "' + question + '"\\nThe calculated result is: ' + calcResult + '\\nWrite a brief, friendly response with the answer.'
   let answer = llmPredict({ prompt: answerPrompt })
 
   return { question, expression: expression.trim(), result: calcResult.trim(), answer }
@@ -236185,26 +236210,15 @@ Write a brief, friendly response with the answer.\`
     requiresApi: true,
     code: `function collaborativeWriting({ topic = 'the future of renewable energy' }) {
   // Agent 1: Research Agent - generates key points
-  let researchPrompt = \`You are a research agent. Generate 3 key facts or points about: \${topic}
-Format as a numbered list. Be concise.\`
+  let researchPrompt = 'You are a research agent. Generate 3 key facts or points about: ' + topic + '\\nFormat as a numbered list. Be concise.'
   let research = llmPredict({ prompt: researchPrompt })
 
   // Agent 2: Writer Agent - creates content from research
-  let writerPrompt = \`You are a writer agent. Using these research points:
-
-\${research}
-
-Write a short, engaging paragraph (2-3 sentences) about \${topic}.
-Make it informative and accessible.\`
+  let writerPrompt = 'You are a writer agent. Using these research points:\\n\\n' + research + '\\n\\nWrite a short, engaging paragraph (2-3 sentences) about ' + topic + '.\\nMake it informative and accessible.'
   let article = llmPredict({ prompt: writerPrompt })
 
   // Agent 3: Editor Agent - reviews and improves
-  let editorPrompt = \`You are an editor agent. Review this draft:
-
-"\${article}"
-
-Suggest one specific improvement. Then provide the improved version.
-Format: "Suggestion: [your suggestion]\\n\\nImproved: [improved text]"\`
+  let editorPrompt = 'You are an editor agent. Review this draft:\\n\\n"' + article + '"\\n\\nSuggest one specific improvement. Then provide the improved version.\\nFormat: "Suggestion: [your suggestion]\\n\\nImproved: [improved text]"'
   let edited = llmPredict({ prompt: editorPrompt })
 
   return {
@@ -236290,36 +236304,16 @@ Format: "Suggestion: [your suggestion]\\n\\nImproved: [improved text]"\`
     requiresApi: true,
     code: `function solveWithCode({ problem = 'Calculate the 10th Fibonacci number' }) {
   // System prompt with AsyncJS rules and example
-  let systemContext = \`You write AsyncJS code. AsyncJS is a JavaScript subset.
-
-RULES:
-- NO: async, await, new, class, this, var, for loops
-- Use let for variables, while for loops
-- Return an object: return { result }
-
-EXAMPLE (factorial):
-function solve() {
-  let result = 1
-  let i = 5
-  while (i > 1) {
-    result = result * i
-    i = i - 1
-  }
-  return { result }
-}
-
-Return ONLY the function code, nothing else.\`
+  let systemContext = 'You write AsyncJS code. AsyncJS is a JavaScript subset.\\n\\nRULES:\\n- NO: async, await, new, class, this, var, for loops\\n- Use let for variables, while for loops\\n- Return an object: return { result }\\n\\nEXAMPLE (factorial):\\nfunction solve() {\\n  let result = 1\\n  let i = 5\\n  while (i > 1) {\\n    result = result * i\\n    i = i - 1\\n  }\\n  return { result }\\n}\\n\\nReturn ONLY the function code, nothing else.'
 
-  let prompt = \`\${systemContext}
-
-Write a function called "solve" that: \${problem}\`
+  let prompt = systemContext + '\\n\\nWrite a function called "solve" that: ' + problem
 
   let response = llmPredict({ prompt })
 
   // Clean up code - remove markdown fences, fix escapes, extract function
   let code = response
-  code = code.replace(/\`\`\`(?:javascript|js|asyncjs)?\\n?/g, '')
-  code = code.replace(/\\n?\`\`\`/g, '')
+  code = code.replace(/\\\`\\\`\\\`(?:javascript|js|asyncjs)?\\n?/g, '')
+  code = code.replace(/\\n?\\\`\\\`\\\`/g, '')
   code = code.replace(/\\\\n/g, '\\n')
   code = code.replace(/\\\\t/g, '\\t')
   code = code.replace(/\\\\"/g, '"')
@@ -236357,43 +236351,22 @@ Write a function called "solve" that: \${problem}\`
     requiresApi: true,
     code: `function generateCode({ task = 'Calculate the factorial of n' }) {
   // System prompt with AsyncJS rules and complete example
-  let systemContext = \`You write AsyncJS code. AsyncJS is a subset of JavaScript.
-
-RULES:
-- Types by example: fn(n: 5) means required number param with example value 5
-- NO: async, await, new, class, this, var, for, generator functions (function*)
-- Use let for variables, while for loops
-- Return an object: return { result }
-
-EXAMPLE - calculating sum of 1 to n:
-function sumTo(n: 10) {
-  let sum = 0
-  let i = 1
-  while (i <= n) {
-    sum = sum + i
-    i = i + 1
-  }
-  return { result: sum }
-}\`
+  let systemContext = 'You write AsyncJS code. AsyncJS is a subset of JavaScript.\\n\\nRULES:\\n- Types by example: fn(n: 5) means required number param with example value 5\\n- NO: async, await, new, class, this, var, for, generator functions (function*)\\n- Use let for variables, while for loops\\n- Return an object: return { result }\\n\\nEXAMPLE - calculating sum of 1 to n:\\nfunction sumTo(n: 10) {\\n  let sum = 0\\n  let i = 1\\n  while (i <= n) {\\n    sum = sum + i\\n    i = i + 1\\n  }\\n  return { result: sum }\\n}'
 
   let schema = Schema.response('generated_code', {
     code: '',
     description: ''
   })
 
-  let prompt = \`\${systemContext}
-
-Write an AsyncJS function for: \${task}
-
-Return ONLY valid AsyncJS code in the code field. Must start with "function" and use while loops (not for loops).\`
+  let prompt = systemContext + '\\n\\nWrite an AsyncJS function for: ' + task + '\\n\\nReturn ONLY valid AsyncJS code in the code field. Must start with "function" and use while loops (not for loops).'
 
   let response = llmPredict({ prompt, options: { responseFormat: schema } })
   let result = JSON.parse(response)
 
   // Clean up any markdown fences and fix escaped newlines
   let code = result.code
-  code = code.replace(/\`\`\`(?:javascript|js)?\\n?/g, '')
-  code = code.replace(/\\n?\`\`\`/g, '')
+  code = code.replace(/\\\`\\\`\\\`(?:javascript|js)?\\n?/g, '')
+  code = code.replace(/\\n?\\\`\\\`\\\`/g, '')
   code = code.replace(/\\\\n/g, '\\n')
   code = code.replace(/\\\\t/g, '\\t')
   code = code.trim()
@@ -243813,6 +243786,489 @@ async function resolveImports(source) {
   return { importMap: { imports }, errors, localModules };
 }
 
+// demo/src/playground-shared.ts
+var TJS_RUNTIME_STUB = `
+    globalThis.__tjs = {
+      version: '0.0.0',
+      pushStack: () => {},
+      popStack: () => {},
+      getStack: () => [],
+      typeError: (path, expected, value) => {
+        const actual = value === null ? 'null' : typeof value;
+        const err = new Error(\\\`Expected \\\${expected} for '\\\${path}', got \\\${actual}\\\`);
+        err.name = 'MonadicError';
+        err.path = path;
+        err.expected = expected;
+        err.actual = actual;
+        return err;
+      },
+      createRuntime: function() { return this; },
+      Is: (a, b) => {
+        if (a === b) return true;
+        if (a === null || b === null) return a === b;
+        if (typeof a !== typeof b) return false;
+        if (typeof a !== 'object') return false;
+        if (Array.isArray(a) && Array.isArray(b)) {
+          if (a.length !== b.length) return false;
+          return a.every((v, i) => globalThis.__tjs.Is(v, b[i]));
+        }
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length) return false;
+        return keysA.every(k => globalThis.__tjs.Is(a[k], b[k]));
+      },
+      IsNot: (a, b) => !globalThis.__tjs.Is(a, b),
+    };`;
+var CONSOLE_CAPTURE_SCRIPT = `
+    const _log = console.log;
+    console.log = (...args) => {
+      _log(...args);
+      parent.postMessage({ type: 'console', message: args.map(a => {
+        if (typeof a !== 'object' || a === null) return String(a);
+        try {
+          return JSON.stringify(a, null, 2);
+        } catch {
+          return String(a);
+        }
+      }).join(' ') }, '*');
+    };`;
+function buildIframeDoc(options2) {
+  const {
+    cssContent,
+    htmlContent,
+    importMapScript,
+    jsCode,
+    importStatements = [],
+    parentBindings = false,
+    autoCallTjsFunction = false
+  } = options2;
+  const parentBindingsScript = parentBindings ? `
+    if (parent.run) window.run = parent.run.bind(parent);
+    if (parent.runAgent) window.runAgent = parent.runAgent.bind(parent);
+    if (parent.getIdToken) window.getIdToken = parent.getIdToken.bind(parent);` : "";
+  const useSeparateScripts = importStatements.length > 0;
+  const executionCode = autoCallTjsFunction ? `
+      const __execStart = performance.now();
+      ${jsCode}
+
+      // Try to call the function if it exists and show result
+      const funcName = Object.keys(window).find(k => {
+        try { return typeof window[k] === 'function' && window[k].__tjs; }
+        catch { return false; }
+      });
+      if (funcName) {
+        const __callStart = performance.now();
+        const result = window[funcName]();
+        const __execTime = performance.now() - __callStart;
+        parent.postMessage({ type: 'timing', execTime: __execTime }, '*');
+        if (result !== undefined) {
+          if (result instanceof Node) {
+            document.body.append(result);
+            parent.postMessage({ type: 'hasPreviewContent' }, '*');
+          } else {
+            console.log('Result:', result);
+          }
+        }
+      } else {
+        const __execTime = performance.now() - __execStart;
+        parent.postMessage({ type: 'timing', execTime: __execTime }, '*');
+      }` : `
+      const __execStart = performance.now();
+      ${jsCode}
+      const __execTime = performance.now() - __execStart;
+      parent.postMessage({ type: 'timing', execTime: __execTime }, '*');`;
+  if (useSeparateScripts) {
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <style>${cssContent}</style>
+  ${importMapScript}
+</head>
+<body>
+  ${htmlContent}
+  <script>${parentBindingsScript}
+${TJS_RUNTIME_STUB}
+  </script>
+  <script type="module">
+    ${importStatements.join(`
+    `)}
+${CONSOLE_CAPTURE_SCRIPT}
+
+    const __childrenBefore = document.body.children.length;
+    try {${executionCode}
+      if (document.body.children.length > __childrenBefore) {
+        parent.postMessage({ type: 'hasPreviewContent' }, '*');
+      }
+    } catch (e) {
+      parent.postMessage({ type: 'error', message: e.message }, '*');
+    }
+  </script>
+</body>
+</html>`;
+  }
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <style>${cssContent}</style>
+  ${importMapScript}
+</head>
+<body>
+  ${htmlContent}
+  <script type="module">${parentBindingsScript}
+${TJS_RUNTIME_STUB}
+${CONSOLE_CAPTURE_SCRIPT}
+
+    const __childrenBefore = document.body.children.length;
+    try {${executionCode}
+      if (document.body.children.length > __childrenBefore) {
+        parent.postMessage({ type: 'hasPreviewContent' }, '*');
+      }
+    } catch (e) {
+      parent.postMessage({ type: 'error', message: e.message }, '*');
+    }
+  </script>
+</body>
+</html>`;
+}
+function createIframeMessageHandler(callbacks) {
+  return (event) => {
+    if (event.data?.type === "console") {
+      callbacks.onConsole(event.data.message);
+    } else if (event.data?.type === "timing") {
+      callbacks.onTiming(event.data.execTime);
+    } else if (event.data?.type === "hasPreviewContent") {
+      callbacks.onPreviewContent();
+    } else if (event.data?.type === "error") {
+      callbacks.onError(event.data.message);
+    }
+  };
+}
+function renderConsoleMessages(messages, consoleEl, goToLine) {
+  const linePattern = /(?:at line |line |Line )(\d+)(?:[:,]?\s*(?:column |col )?(\d+))?|:(\d+):(\d+)/g;
+  const html2 = messages.map((msg) => {
+    const escaped = msg.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return escaped.replace(linePattern, (match, l1, c12, l22, c22) => {
+      const line = l1 || l22;
+      const col = c12 || c22 || "1";
+      return `<span class="clickable-line" data-line="${line}" data-col="${col}">${match}</span>`;
+    });
+  }).join(`
+`);
+  consoleEl.innerHTML = html2;
+  consoleEl.scrollTop = consoleEl.scrollHeight;
+  consoleEl.querySelectorAll(".clickable-line").forEach((el2) => {
+    el2.addEventListener("click", (e) => {
+      const target = e.currentTarget;
+      const line = parseInt(target.dataset.line || "0", 10);
+      const col = parseInt(target.dataset.col || "1", 10);
+      if (line > 0) {
+        goToLine(line, col);
+      }
+    });
+  });
+}
+function renderTestResults(tests, outputEl, editor, goToLine) {
+  if (!tests || tests.length === 0) {
+    outputEl.textContent = "No tests defined";
+    editor.clearMarkers();
+    return { passed: 0, failed: 0 };
+  }
+  const passed = tests.filter((t2) => t2.passed).length;
+  const failed = tests.filter((t2) => !t2.passed).length;
+  const failedTests = tests.filter((t2) => !t2.passed && t2.line);
+  if (failedTests.length > 0) {
+    editor.setMarkers(failedTests.map((t2) => ({
+      line: t2.line,
+      message: t2.error || t2.description,
+      severity: "error"
+    })));
+  } else {
+    editor.clearMarkers();
+  }
+  let html2 = `<div class="test-summary">`;
+  html2 += `<strong>${passed} passed</strong>`;
+  if (failed > 0) {
+    html2 += `, <strong class="test-failed">${failed} failed</strong>`;
+  }
+  html2 += `</div><ul class="test-list">`;
+  for (const test of tests) {
+    const icon = test.passed ? "✓" : "✗";
+    const cls = test.passed ? "test-pass" : "test-fail";
+    const sigBadge = test.isSignatureTest ? ' <span class="sig-badge">signature</span>' : "";
+    const dataLine = test.line ? ` data-line="${test.line}"` : "";
+    html2 += `<li class="${cls}"${dataLine}>${icon} ${test.description}${sigBadge}`;
+    if (!test.passed && test.error) {
+      html2 += `<div class="test-error${test.line ? " clickable-error" : ""}"${dataLine}>${test.error}</div>`;
+    }
+    html2 += `</li>`;
+  }
+  html2 += `</ul>`;
+  outputEl.innerHTML = html2;
+  outputEl.querySelectorAll(".clickable-error").forEach((el2) => {
+    el2.addEventListener("click", (e) => {
+      const line = parseInt(e.currentTarget.dataset.line || "0", 10);
+      if (line > 0) {
+        goToLine(line);
+      }
+    });
+  });
+  return { passed, failed };
+}
+function formatExecTime(ms2) {
+  return ms2 < 1 ? `${(ms2 * 1000).toFixed(0)}μs` : `${ms2.toFixed(2)}ms`;
+}
+var sharedPlaygroundStyles = {
+  ":host": {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    flex: "1 1 auto",
+    background: "var(--background, #fff)",
+    color: "var(--text-color, #1f2937)",
+    fontFamily: "system-ui, sans-serif"
+  },
+  ":host .run-btn": {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "6px 12px",
+    background: "var(--brand-color, #3d4a6b)",
+    color: "var(--brand-text-color, white)",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontWeight: "500",
+    fontSize: "14px"
+  },
+  ":host .run-btn:hover:not(:disabled)": {
+    filter: "brightness(1.1)"
+  },
+  ":host .run-btn:disabled": {
+    opacity: "0.6",
+    cursor: "not-allowed"
+  },
+  ":host .toolbar-separator": {
+    width: "1px",
+    height: "20px",
+    background: "var(--code-border, #d1d5db)"
+  },
+  ":host .build-flags": {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px"
+  },
+  ":host .flag-label": {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    fontSize: "13px",
+    color: "var(--text-color, #6b7280)",
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  ":host .flag-label:hover": {
+    color: "var(--text-color, #374151)"
+  },
+  ':host .flag-label input[type="checkbox"]': {
+    margin: "0",
+    cursor: "pointer",
+    accentColor: "var(--brand-color, #3d4a6b)"
+  },
+  ":host .revert-btn": {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "6px 12px",
+    background: "var(--code-background, #e5e7eb)",
+    color: "var(--text-color, #374151)",
+    border: "1px solid var(--code-border, #d1d5db)",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontWeight: "500",
+    fontSize: "14px",
+    transition: "opacity 0.2s"
+  },
+  ":host .revert-btn:hover:not(:disabled)": {
+    background: "#fef3c7",
+    borderColor: "#f59e0b",
+    color: "#92400e"
+  },
+  ":host .revert-btn:disabled": {
+    cursor: "default"
+  },
+  ":host .elastic": {
+    flex: "1"
+  },
+  ":host .status-bar": {
+    fontSize: "13px",
+    color: "var(--text-color, #6b7280)",
+    opacity: "0.7"
+  },
+  ":host .status-bar.error": {
+    color: "#dc2626",
+    opacity: "1"
+  },
+  ":host tosi-tabs > [name]": {
+    background: "var(--background, #fff)",
+    color: "var(--text-color, #1f2937)"
+  },
+  ":host .editor-wrapper": {
+    flex: "1 1 auto",
+    height: "100%",
+    minHeight: "300px",
+    position: "relative",
+    overflow: "hidden"
+  },
+  ":host .editor-wrapper code-mirror": {
+    display: "block",
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0"
+  },
+  ":host .preview-frame": {
+    width: "100%",
+    height: "100%",
+    border: "none",
+    background: "var(--background, #fff)"
+  },
+  ":host .docs-output": {
+    display: "block",
+    padding: "12px 16px",
+    fontSize: "14px",
+    fontFamily: "system-ui, sans-serif",
+    color: "var(--text-color, inherit)",
+    background: "var(--background, #fff)",
+    height: "100%",
+    overflow: "auto"
+  },
+  ":host .docs-output h2": {
+    fontSize: "1.25em",
+    marginTop: "0",
+    marginBottom: "0.5em",
+    color: "var(--text-color, #1f2937)"
+  },
+  ":host .docs-output pre": {
+    background: "var(--code-background, #f3f4f6)",
+    padding: "8px 12px",
+    borderRadius: "6px",
+    overflow: "auto",
+    fontSize: "13px"
+  },
+  ":host .docs-output code": {
+    fontFamily: "ui-monospace, monospace",
+    fontSize: "0.9em"
+  },
+  ":host .docs-output p": {
+    margin: "0.75em 0",
+    lineHeight: "1.5"
+  },
+  ":host .docs-output h3": {
+    fontSize: "1em",
+    marginTop: "1em",
+    marginBottom: "0.5em"
+  },
+  ":host .docs-output ul": {
+    paddingLeft: "1.5em",
+    margin: "0.5em 0"
+  },
+  ":host .docs-output li": {
+    marginBottom: "0.25em"
+  },
+  ":host .docs-output hr": {
+    border: "none",
+    borderTop: "1px solid var(--code-border, #e5e7eb)",
+    margin: "1.5em 0"
+  },
+  ":host .tests-output": {
+    padding: "12px",
+    fontSize: "14px",
+    fontFamily: "system-ui, sans-serif",
+    color: "var(--text-color, inherit)",
+    background: "var(--background, #fff)",
+    height: "100%",
+    overflow: "auto"
+  },
+  ":host .test-summary": {
+    marginBottom: "12px",
+    paddingBottom: "8px",
+    borderBottom: "1px solid var(--code-border, #e5e7eb)"
+  },
+  ":host .test-failed": {
+    color: "#dc2626"
+  },
+  ":host .test-list": {
+    listStyle: "none",
+    padding: "0",
+    margin: "0"
+  },
+  ":host .test-list li": {
+    padding: "4px 0"
+  },
+  ":host .test-pass": {
+    color: "#16a34a"
+  },
+  ":host .test-fail": {
+    color: "#dc2626"
+  },
+  ":host .test-error": {
+    marginLeft: "20px",
+    marginTop: "4px",
+    padding: "8px",
+    background: "rgba(220, 38, 38, 0.1)",
+    borderRadius: "4px",
+    fontSize: "13px",
+    fontFamily: "var(--font-mono, monospace)"
+  },
+  ":host .clickable-error": {
+    cursor: "pointer",
+    textDecoration: "underline",
+    textDecorationStyle: "dotted"
+  },
+  ":host .clickable-error:hover": {
+    background: "rgba(220, 38, 38, 0.2)"
+  },
+  ":host .sig-badge": {
+    fontSize: "11px",
+    padding: "2px 6px",
+    marginLeft: "8px",
+    background: "rgba(99, 102, 241, 0.1)",
+    color: "#6366f1",
+    borderRadius: "4px"
+  },
+  ":host .console-header": {
+    padding: "4px 12px",
+    background: "var(--code-background, #f3f4f6)",
+    fontSize: "12px",
+    fontWeight: "500",
+    color: "var(--text-color, #6b7280)",
+    opacity: "0.7",
+    borderBottom: "1px solid var(--code-border, #e5e7eb)"
+  },
+  ":host .console-output": {
+    flex: "1",
+    margin: "0",
+    padding: "8px 12px",
+    background: "var(--code-background, #f3f4f6)",
+    color: "var(--text-color, #1f2937)",
+    fontSize: "12px",
+    fontFamily: "ui-monospace, monospace",
+    overflow: "auto",
+    whiteSpace: "pre-wrap"
+  },
+  ":host .clickable-line": {
+    cursor: "pointer",
+    color: "#2563eb",
+    textDecoration: "underline",
+    textDecorationStyle: "dotted"
+  },
+  ":host .clickable-line:hover": {
+    color: "#1d4ed8",
+    background: "rgba(37, 99, 235, 0.1)"
+  }
+};
+
 // demo/src/tjs-playground.ts
 init_module_store();
 
@@ -244088,28 +244544,7 @@ class TJSPlayground extends g {
     iframe.src = "about:blank";
   };
   renderConsole() {
-    const linePattern = /(?:at line |line |Line )(\d+)(?:[:,]?\s*(?:column |col )?(\d+))?|:(\d+):(\d+)/g;
-    const html2 = this.consoleMessages.map((msg) => {
-      const escaped = msg.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      return escaped.replace(linePattern, (match, l1, c12, l22, c22) => {
-        const line = l1 || l22;
-        const col = c12 || c22 || "1";
-        return `<span class="clickable-line" data-line="${line}" data-col="${col}">${match}</span>`;
-      });
-    }).join(`
-`);
-    this.parts.console.innerHTML = html2;
-    this.parts.console.scrollTop = this.parts.console.scrollHeight;
-    this.parts.console.querySelectorAll(".clickable-line").forEach((el2) => {
-      el2.addEventListener("click", (e) => {
-        const target = e.currentTarget;
-        const line = parseInt(target.dataset.line || "0", 10);
-        const col = parseInt(target.dataset.col || "1", 10);
-        if (line > 0) {
-          this.goToSourceLine(line, col);
-        }
-      });
-    });
+    renderConsoleMessages(this.consoleMessages, this.parts.console, (line, col) => this.goToSourceLine(line, col));
   }
   toggleTests = () => {
     this.buildFlags.tests = this.parts.testsToggle.checked;
@@ -244156,7 +244591,7 @@ class TJSPlayground extends g {
       this.updateDocs(result);
       const tests = result.testResults || [];
       const failed = tests.filter((t2) => !t2.passed).length;
-      const timeStr = this.lastTranspileTime < 1 ? `${(this.lastTranspileTime * 1000).toFixed(0)}μs` : `${this.lastTranspileTime.toFixed(2)}ms`;
+      const timeStr = formatExecTime(this.lastTranspileTime);
       if (failed > 0) {
         this.parts.statusBar.textContent = `Transpiled in ${timeStr} with ${failed} test failure${failed > 1 ? "s" : ""}`;
         this.parts.statusBar.classList.add("error");
@@ -244203,53 +244638,8 @@ class TJSPlayground extends g {
   };
   updateTestResults(result) {
     const tests = result.testResults;
-    if (!tests || tests.length === 0) {
-      this.parts.testsOutput.textContent = "No tests defined";
-      this.updateTestsTabLabel(0, 0);
-      this.parts.tjsEditor.clearMarkers();
-      return;
-    }
-    const passed = tests.filter((t2) => t2.passed).length;
-    const failed = tests.filter((t2) => !t2.passed).length;
+    const { passed, failed } = renderTestResults(tests, this.parts.testsOutput, this.parts.tjsEditor, (line) => this.goToSourceLine(line));
     this.updateTestsTabLabel(passed, failed);
-    const failedTests = tests.filter((t2) => !t2.passed && t2.line);
-    if (failedTests.length > 0) {
-      this.parts.tjsEditor.setMarkers(failedTests.map((t2) => ({
-        line: t2.line,
-        message: t2.error || t2.description,
-        severity: "error"
-      })));
-    } else {
-      this.parts.tjsEditor.clearMarkers();
-    }
-    let html2 = `<div class="test-summary">`;
-    html2 += `<strong>${passed} passed</strong>`;
-    if (failed > 0) {
-      html2 += `, <strong class="test-failed">${failed} failed</strong>`;
-    }
-    html2 += `</div><ul class="test-list">`;
-    for (const test of tests) {
-      const icon = test.passed ? "✓" : "✗";
-      const cls = test.passed ? "test-pass" : "test-fail";
-      const sigBadge = test.isSignatureTest ? ' <span class="sig-badge">signature</span>' : "";
-      const clickable = !test.passed && test.line ? ' class="clickable-error"' : "";
-      const dataLine = test.line ? ` data-line="${test.line}"` : "";
-      html2 += `<li class="${cls}"${dataLine}>${icon} ${test.description}${sigBadge}`;
-      if (!test.passed && test.error) {
-        html2 += `<div${clickable}${dataLine} class="test-error${test.line ? " clickable-error" : ""}">${test.error}</div>`;
-      }
-      html2 += `</li>`;
-    }
-    html2 += `</ul>`;
-    this.parts.testsOutput.innerHTML = html2;
-    this.parts.testsOutput.querySelectorAll(".clickable-error").forEach((el2) => {
-      el2.addEventListener("click", (e) => {
-        const line = parseInt(e.currentTarget.dataset.line || "0", 10);
-        if (line > 0) {
-          this.goToSourceLine(line);
-        }
-      });
-    });
   }
   updateTestsTabLabel(passed, failed) {
     const tabs = this.parts.outputTabs;
@@ -244498,6 +244888,7 @@ class TJSPlayground extends g {
       this.parts.runBtn.disabled = false;
       return;
     }
+    this.parts.outputTabs.value = 0;
     this.parts.statusBar.textContent = "Running...";
     try {
       const wasmCompiled = this.lastTranspileResult.wasmCompiled;
@@ -244538,131 +244929,29 @@ class TJSPlayground extends g {
         importStatements.push(match);
         return "";
       });
-      const iframeDoc = `<!DOCTYPE html>
-<html>
-<head>
-  <style>${cssContent}</style>
-  ${importMapScript}
-</head>
-<body>
-  ${htmlContent}
-  <!-- TJS Runtime stub must be set up BEFORE imports execute -->
-  <script>
-    // Expose parent's run/runAgent/getIdToken in iframe for playground convenience
-    if (parent.run) window.run = parent.run.bind(parent);
-    if (parent.runAgent) window.runAgent = parent.runAgent.bind(parent);
-    if (parent.getIdToken) window.getIdToken = parent.getIdToken.bind(parent);
-
-    // TJS runtime stub - must stay in sync with src/lang/runtime.ts
-    // TODO: Eliminate this once transpiler emits self-contained code
-    // See: src/lang/emitters/js.ts for the plan to inline runtime functions
-    globalThis.__tjs = {
-      version: '0.0.0',
-      pushStack: () => {},
-      popStack: () => {},
-      getStack: () => [],
-      typeError: (path, expected, value) => {
-        const actual = value === null ? 'null' : typeof value;
-        const err = new Error(\`Expected \${expected} for '\${path}', got \${actual}\`);
-        err.name = 'MonadicError';
-        err.path = path;
-        err.expected = expected;
-        err.actual = actual;
-        return err;
-      },
-      createRuntime: function() { return this; },
-      Is: (a, b) => {
-        if (a === b) return true;
-        if (a === null || b === null) return a === b;
-        if (typeof a !== typeof b) return false;
-        if (typeof a !== 'object') return false;
-        if (Array.isArray(a) && Array.isArray(b)) {
-          if (a.length !== b.length) return false;
-          return a.every((v, i) => globalThis.__tjs.Is(v, b[i]));
-        }
-        const keysA = Object.keys(a);
-        const keysB = Object.keys(b);
-        if (keysA.length !== keysB.length) return false;
-        return keysA.every(k => globalThis.__tjs.Is(a[k], b[k]));
-      },
-      IsNot: (a, b) => !globalThis.__tjs.Is(a, b),
-    };
-  </script>
-  <script type="module">
-    // Import statements must be at the top of the module
-    ${importStatements.join(`
-    `)}
-
-    // Capture console.log
-    const _log = console.log;
-    console.log = (...args) => {
-      _log(...args);
-      parent.postMessage({ type: 'console', message: args.map(a => {
-        if (typeof a !== 'object' || a === null) return String(a);
-        try {
-          return JSON.stringify(a, null, 2);
-        } catch {
-          return String(a);
-        }
-      }).join(' ') }, '*');
-    };
-
-    try {
-      // WASM blocks are pre-compiled and embedded in the transpiled code
-      // They auto-instantiate via the async IIFE at the top of the code
-
-      const __execStart = performance.now();
-      ${codeWithoutImports}
-
-      // Try to call the function if it exists and show result
-      const funcName = Object.keys(window).find(k => {
-        try { return typeof window[k] === 'function' && window[k].__tjs; }
-        catch { return false; }
+      const iframeDoc = buildIframeDoc({
+        cssContent,
+        htmlContent,
+        importMapScript,
+        jsCode: codeWithoutImports,
+        importStatements,
+        parentBindings: true,
+        autoCallTjsFunction: true
       });
-      if (funcName) {
-        const __callStart = performance.now();
-        const result = window[funcName]();
-        const __execTime = performance.now() - __callStart;
-        parent.postMessage({ type: 'timing', execTime: __execTime }, '*');
-        if (result !== undefined) {
-          // If result is a DOM node, append it; otherwise log it
-          if (result instanceof Node) {
-            document.body.append(result);
-            parent.postMessage({ type: 'hasPreviewContent' }, '*');
-          } else {
-            console.log('Result:', result);
-          }
-        }
-      } else {
-        // No TJS function found, report total parse/exec time
-        const __execTime = performance.now() - __execStart;
-        parent.postMessage({ type: 'timing', execTime: __execTime }, '*');
-      }
-      // Check if body has content after execution
-      if (document.body.children.length > 0) {
-        parent.postMessage({ type: 'hasPreviewContent' }, '*');
-      }
-    } catch (e) {
-      parent.postMessage({ type: 'error', message: e.message }, '*');
-    }
-  </script>
-</body>
-</html>`;
-      const messageHandler = (event) => {
-        if (event.data?.type === "console") {
-          this.log(event.data.message);
-        } else if (event.data?.type === "timing") {
-          const execTime = event.data.execTime;
-          const execStr = execTime < 1 ? `${(execTime * 1000).toFixed(0)}μs` : `${execTime.toFixed(2)}ms`;
-          this.parts.consoleHeader.textContent = `Console — executed in ${execStr}`;
-        } else if (event.data?.type === "hasPreviewContent") {
+      const messageHandler = createIframeMessageHandler({
+        onConsole: (message) => this.log(message),
+        onTiming: (execTime) => {
+          this.parts.consoleHeader.textContent = `Console — executed in ${formatExecTime(execTime)}`;
+        },
+        onPreviewContent: () => {
           this.parts.outputTabs.value = 1;
-        } else if (event.data?.type === "error") {
-          this.log(`Error: ${event.data.message}`);
+        },
+        onError: (message) => {
+          this.log(`Error: ${message}`);
           this.parts.statusBar.textContent = "Runtime error";
           this.parts.statusBar.classList.add("error");
         }
-      };
+      });
       window.addEventListener("message", messageHandler);
       const iframe = this.parts.previewFrame;
       const blob = new Blob([iframeDoc], { type: "text/html" });
@@ -244729,15 +245018,7 @@ class TJSPlayground extends g {
 var tjsPlayground = TJSPlayground.elementCreator({
   tag: "tjs-playground",
   styleSpec: {
-    ":host": {
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      flex: "1 1 auto",
-      background: "var(--background, #fff)",
-      color: "var(--text-color, #1f2937)",
-      fontFamily: "system-ui, sans-serif"
-    },
+    ...sharedPlaygroundStyles,
     ":host .tjs-toolbar": {
       display: "flex",
       alignItems: "center",
@@ -244746,53 +245027,6 @@ var tjsPlayground = TJSPlayground.elementCreator({
       background: "var(--code-background, #f3f4f6)",
       borderBottom: "1px solid var(--code-border, #e5e7eb)"
     },
-    ":host .run-btn": {
-      display: "flex",
-      alignItems: "center",
-      gap: "4px",
-      padding: "6px 12px",
-      background: "var(--brand-color, #3d4a6b)",
-      color: "var(--brand-text-color, white)",
-      border: "none",
-      borderRadius: "6px",
-      cursor: "pointer",
-      fontWeight: "500",
-      fontSize: "14px"
-    },
-    ":host .run-btn:hover:not(:disabled)": {
-      filter: "brightness(1.1)"
-    },
-    ":host .run-btn:disabled": {
-      opacity: "0.6",
-      cursor: "not-allowed"
-    },
-    ":host .toolbar-separator": {
-      width: "1px",
-      height: "20px",
-      background: "var(--code-border, #d1d5db)"
-    },
-    ":host .build-flags": {
-      display: "flex",
-      alignItems: "center",
-      gap: "12px"
-    },
-    ":host .flag-label": {
-      display: "flex",
-      alignItems: "center",
-      gap: "4px",
-      fontSize: "13px",
-      color: "var(--text-color, #6b7280)",
-      cursor: "pointer",
-      userSelect: "none"
-    },
-    ":host .flag-label:hover": {
-      color: "var(--text-color, #374151)"
-    },
-    ':host .flag-label input[type="checkbox"]': {
-      margin: "0",
-      cursor: "pointer",
-      accentColor: "var(--brand-color, #3d4a6b)"
-    },
     ":host .module-name-input": {
       padding: "6px 10px",
       border: "1px solid var(--code-border, #d1d5db)",
@@ -244830,40 +245064,6 @@ var tjsPlayground = TJSPlayground.elementCreator({
       color: "var(--brand-text-color, white)",
       borderColor: "var(--brand-color, #3d4a6b)"
     },
-    ":host .revert-btn": {
-      display: "flex",
-      alignItems: "center",
-      gap: "4px",
-      padding: "6px 12px",
-      background: "var(--code-background, #e5e7eb)",
-      color: "var(--text-color, #374151)",
-      border: "1px solid var(--code-border, #d1d5db)",
-      borderRadius: "6px",
-      cursor: "pointer",
-      fontWeight: "500",
-      fontSize: "14px",
-      transition: "opacity 0.2s"
-    },
-    ":host .revert-btn:hover:not(:disabled)": {
-      background: "#fef3c7",
-      borderColor: "#f59e0b",
-      color: "#92400e"
-    },
-    ":host .revert-btn:disabled": {
-      cursor: "default"
-    },
-    ":host .elastic": {
-      flex: "1"
-    },
-    ":host .status-bar": {
-      fontSize: "13px",
-      color: "var(--text-color, #6b7280)",
-      opacity: "0.7"
-    },
-    ":host .status-bar.error": {
-      color: "#dc2626",
-      opacity: "1"
-    },
     ":host .tjs-main": {
       display: "flex",
       flex: "1 1 auto",
@@ -244879,25 +245079,6 @@ var tjsPlayground = TJSPlayground.elementCreator({
       background: "var(--background, #fff)",
       overflow: "hidden"
     },
-    ":host tosi-tabs > [name]": {
-      background: "var(--background, #fff)",
-      color: "var(--text-color, #1f2937)"
-    },
-    ":host .editor-wrapper": {
-      flex: "1 1 auto",
-      height: "100%",
-      minHeight: "300px",
-      position: "relative",
-      overflow: "hidden"
-    },
-    ":host .editor-wrapper code-mirror": {
-      display: "block",
-      position: "absolute",
-      top: "0",
-      left: "0",
-      right: "0",
-      bottom: "0"
-    },
     ":host .js-output": {
       margin: "0",
       padding: "12px",
@@ -244909,151 +245090,11 @@ var tjsPlayground = TJSPlayground.elementCreator({
       height: "100%",
       whiteSpace: "pre-wrap"
     },
-    ":host .preview-frame": {
-      width: "100%",
-      height: "100%",
-      border: "none",
-      background: "var(--background, #fff)"
-    },
-    ":host .docs-output": {
-      display: "block",
-      padding: "12px 16px",
-      fontSize: "14px",
-      fontFamily: "system-ui, sans-serif",
-      color: "var(--text-color, inherit)",
-      background: "var(--background, #fff)",
-      height: "100%",
-      overflow: "auto"
-    },
-    ":host .docs-output h2": {
-      fontSize: "1.25em",
-      marginTop: "0",
-      marginBottom: "0.5em",
-      color: "var(--text-color, #1f2937)"
-    },
-    ":host .docs-output pre": {
-      background: "var(--code-background, #f3f4f6)",
-      padding: "8px 12px",
-      borderRadius: "6px",
-      overflow: "auto",
-      fontSize: "13px"
-    },
-    ":host .docs-output code": {
-      fontFamily: "ui-monospace, monospace",
-      fontSize: "0.9em"
-    },
-    ":host .docs-output p": {
-      margin: "0.75em 0",
-      lineHeight: "1.5"
-    },
-    ":host .docs-output h3": {
-      fontSize: "1em",
-      marginTop: "1em",
-      marginBottom: "0.5em"
-    },
-    ":host .docs-output ul": {
-      paddingLeft: "1.5em",
-      margin: "0.5em 0"
-    },
-    ":host .docs-output li": {
-      marginBottom: "0.25em"
-    },
-    ":host .docs-output hr": {
-      border: "none",
-      borderTop: "1px solid var(--code-border, #e5e7eb)",
-      margin: "1.5em 0"
-    },
-    ":host .tests-output": {
-      padding: "12px",
-      fontSize: "14px",
-      fontFamily: "system-ui, sans-serif",
-      color: "var(--text-color, inherit)",
-      background: "var(--background, #fff)",
-      height: "100%",
-      overflow: "auto"
-    },
-    ":host .test-summary": {
-      marginBottom: "12px",
-      paddingBottom: "8px",
-      borderBottom: "1px solid var(--code-border, #e5e7eb)"
-    },
-    ":host .test-failed": {
-      color: "#dc2626"
-    },
-    ":host .test-list": {
-      listStyle: "none",
-      padding: 0,
-      margin: 0
-    },
-    ":host .test-list li": {
-      padding: "4px 0"
-    },
-    ":host .test-pass": {
-      color: "#16a34a"
-    },
-    ":host .test-fail": {
-      color: "#dc2626"
-    },
-    ":host .test-error": {
-      marginLeft: "20px",
-      marginTop: "4px",
-      padding: "8px",
-      background: "rgba(220, 38, 38, 0.1)",
-      borderRadius: "4px",
-      fontSize: "13px",
-      fontFamily: "var(--font-mono, monospace)"
-    },
-    ":host .clickable-error": {
-      cursor: "pointer",
-      textDecoration: "underline",
-      textDecorationStyle: "dotted"
-    },
-    ":host .clickable-error:hover": {
-      background: "rgba(220, 38, 38, 0.2)"
-    },
-    ":host .sig-badge": {
-      fontSize: "11px",
-      padding: "2px 6px",
-      marginLeft: "8px",
-      background: "rgba(99, 102, 241, 0.1)",
-      color: "#6366f1",
-      borderRadius: "4px"
-    },
     ":host .tjs-console": {
       height: "120px",
       borderTop: "1px solid var(--code-border, #e5e7eb)",
       display: "flex",
       flexDirection: "column"
-    },
-    ":host .console-header": {
-      padding: "4px 12px",
-      background: "var(--code-background, #f3f4f6)",
-      fontSize: "12px",
-      fontWeight: "500",
-      color: "var(--text-color, #6b7280)",
-      opacity: "0.7",
-      borderBottom: "1px solid var(--code-border, #e5e7eb)"
-    },
-    ":host .console-output": {
-      flex: "1",
-      margin: "0",
-      padding: "8px 12px",
-      background: "var(--code-background, #f3f4f6)",
-      color: "var(--text-color, #1f2937)",
-      fontSize: "12px",
-      fontFamily: "ui-monospace, monospace",
-      overflow: "auto",
-      whiteSpace: "pre-wrap"
-    },
-    ":host .clickable-line": {
-      cursor: "pointer",
-      color: "#2563eb",
-      textDecoration: "underline",
-      textDecorationStyle: "dotted"
-    },
-    ":host .clickable-line:hover": {
-      color: "#1d4ed8",
-      background: "rgba(37, 99, 235, 0.1)"
     }
   }
 });
@@ -245174,28 +245215,7 @@ class TSPlayground extends g {
     this.parts.consoleHeader.textContent = "Console";
   };
   renderConsole() {
-    const linePattern = /(?:at line |line |Line )(\d+)(?:[:,]?\s*(?:column |col )?(\d+))?|:(\d+):(\d+)/g;
-    const html2 = this.consoleMessages.map((msg) => {
-      const escaped = msg.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      return escaped.replace(linePattern, (match, l1, c12, l22, c22) => {
-        const line = l1 || l22;
-        const col = c12 || c22 || "1";
-        return `<span class="clickable-line" data-line="${line}" data-col="${col}">${match}</span>`;
-      });
-    }).join(`
-`);
-    this.parts.console.innerHTML = html2;
-    this.parts.console.scrollTop = this.parts.console.scrollHeight;
-    this.parts.console.querySelectorAll(".clickable-line").forEach((el2) => {
-      el2.addEventListener("click", (e) => {
-        const target = e.currentTarget;
-        const line = parseInt(target.dataset.line || "0", 10);
-        const col = parseInt(target.dataset.col || "1", 10);
-        if (line > 0) {
-          this.goToSourceLine(line, col);
-        }
-      });
-    });
+    renderConsoleMessages(this.consoleMessages, this.parts.console, (line, col) => this.goToSourceLine(line, col));
   }
   goToSourceLine(line, column = 1) {
     this.parts.inputTabs.value = 0;
@@ -245251,8 +245271,7 @@ class TSPlayground extends g {
         this.parts.jsOutput.textContent = jsResult.code;
         this.updateTestResults(jsResult.testResults || []);
         this.updateDocs(jsResult);
-        const formatTime2 = (t2) => t2 < 1 ? `${(t2 * 1000).toFixed(0)}μs` : `${t2.toFixed(2)}ms`;
-        this.parts.statusBar.textContent = `TS→TJS ${formatTime2(this.lastTsToTjsTime)} + TJS→JS ${formatTime2(this.lastTjsToJsTime)} = ${formatTime2(this.lastTranspileTime)}`;
+        this.parts.statusBar.textContent = `TS→TJS ${formatExecTime(this.lastTsToTjsTime)} + TJS→JS ${formatExecTime(this.lastTjsToJsTime)} = ${formatExecTime(this.lastTranspileTime)}`;
         this.parts.statusBar.classList.remove("error");
       } catch (jsError) {
         this.parts.jsOutput.textContent = `// TJS -> JS Error:
@@ -245291,50 +245310,7 @@ class TSPlayground extends g {
 `);
   }
   updateTestResults(tests) {
-    if (!tests || tests.length === 0) {
-      this.parts.testsOutput.textContent = "No tests defined";
-      this.parts.tsEditor.clearMarkers();
-      return;
-    }
-    const passed = tests.filter((t2) => t2.passed).length;
-    const failed = tests.filter((t2) => !t2.passed).length;
-    const failedTests = tests.filter((t2) => !t2.passed && t2.line);
-    if (failedTests.length > 0) {
-      this.parts.tsEditor.setMarkers(failedTests.map((t2) => ({
-        line: t2.line,
-        message: t2.error || t2.description,
-        severity: "error"
-      })));
-    } else {
-      this.parts.tsEditor.clearMarkers();
-    }
-    let html2 = `<div class="test-summary">`;
-    html2 += `<strong>${passed} passed</strong>`;
-    if (failed > 0) {
-      html2 += `, <strong class="test-failed">${failed} failed</strong>`;
-    }
-    html2 += `</div><ul class="test-list">`;
-    for (const test of tests) {
-      const icon = test.passed ? "✓" : "✗";
-      const cls = test.passed ? "test-pass" : "test-fail";
-      const sigBadge = test.isSignatureTest ? ' <span class="sig-badge">signature</span>' : "";
-      const dataLine = test.line ? ` data-line="${test.line}"` : "";
-      html2 += `<li class="${cls}"${dataLine}>${icon} ${test.description}${sigBadge}`;
-      if (!test.passed && test.error) {
-        html2 += `<div class="test-error${test.line ? " clickable-error" : ""}"${dataLine}>${test.error}</div>`;
-      }
-      html2 += `</li>`;
-    }
-    html2 += `</ul>`;
-    this.parts.testsOutput.innerHTML = html2;
-    this.parts.testsOutput.querySelectorAll(".clickable-error").forEach((el2) => {
-      el2.addEventListener("click", (e) => {
-        const line = parseInt(e.currentTarget.dataset.line || "0", 10);
-        if (line > 0) {
-          this.goToSourceLine(line);
-        }
-      });
-    });
+    renderTestResults(tests, this.parts.testsOutput, this.parts.tsEditor, (line) => this.goToSourceLine(line));
   }
   updateDocs(result) {
     const source = this.parts.tsEditor.value;
@@ -245363,6 +245339,7 @@ class TSPlayground extends g {
       this.log("Cannot run - transpilation failed");
       return;
     }
+    this.parts.outputTabs.value = 1;
     this.parts.statusBar.textContent = "Running...";
     try {
       const htmlContent = this.parts.htmlEditor.value;
@@ -245382,81 +245359,26 @@ class TSPlayground extends g {
           importMapScript = `<script type="importmap">${JSON.stringify(importMap)}</script>`;
         }
       }
-      const iframeDoc = `<!DOCTYPE html>
-<html>
-<head>
-  <style>${cssContent}</style>
-  ${importMapScript}
-</head>
-<body>
-  ${htmlContent}
-  <script type="module">
-    // TJS Runtime stub for iframe execution
-    globalThis.__tjs = {
-      version: '0.0.0',
-      pushStack: () => {},
-      popStack: () => {},
-      getStack: () => [],
-      typeError: (path, expected, value) => {
-        const actual = value === null ? 'null' : typeof value;
-        const err = new Error(\`Expected \${expected} for '\${path}', got \${actual}\`);
-        err.name = 'MonadicError';
-        err.path = path;
-        err.expected = expected;
-        err.actual = actual;
-        return err;
-      },
-      createRuntime: function() { return this; },
-      Is: (a, b) => {
-        if (a === b) return true;
-        if (a === null || b === null) return a === b;
-        if (typeof a !== typeof b) return false;
-        if (typeof a !== 'object') return false;
-        if (Array.isArray(a) && Array.isArray(b)) {
-          if (a.length !== b.length) return false;
-          return a.every((v, i) => globalThis.__tjs.Is(v, b[i]));
-        }
-        const keysA = Object.keys(a);
-        const keysB = Object.keys(b);
-        if (keysA.length !== keysB.length) return false;
-        return keysA.every(k => globalThis.__tjs.Is(a[k], b[k]));
-      },
-      IsNot: (a, b) => !globalThis.__tjs.Is(a, b),
-    };
-
-    // Capture console.log
-    const _log = console.log;
-    console.log = (...args) => {
-      _log(...args);
-      parent.postMessage({ type: 'console', message: args.map(a =>
-        typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)
-      ).join(' ') }, '*');
-    };
-
-    try {
-      const __execStart = performance.now();
-      ${jsCode}
-      const __execTime = performance.now() - __execStart;
-      parent.postMessage({ type: 'timing', execTime: __execTime }, '*');
-    } catch (e) {
-      parent.postMessage({ type: 'error', message: e.message }, '*');
-    }
-  </script>
-</body>
-</html>`;
-      const messageHandler = (event) => {
-        if (event.data?.type === "console") {
-          this.log(event.data.message);
-        } else if (event.data?.type === "timing") {
-          const execTime = event.data.execTime;
-          const execStr = execTime < 1 ? `${(execTime * 1000).toFixed(0)}μs` : `${execTime.toFixed(2)}ms`;
-          this.parts.consoleHeader.textContent = `Console — executed in ${execStr}`;
-        } else if (event.data?.type === "error") {
-          this.log(`Error: ${event.data.message}`);
+      const iframeDoc = buildIframeDoc({
+        cssContent,
+        htmlContent,
+        importMapScript,
+        jsCode
+      });
+      const messageHandler = createIframeMessageHandler({
+        onConsole: (message) => this.log(message),
+        onTiming: (execTime) => {
+          this.parts.consoleHeader.textContent = `Console — executed in ${formatExecTime(execTime)}`;
+        },
+        onPreviewContent: () => {
+          this.parts.outputTabs.value = 2;
+        },
+        onError: (message) => {
+          this.log(`Error: ${message}`);
           this.parts.statusBar.textContent = "Runtime error";
           this.parts.statusBar.classList.add("error");
         }
-      };
+      });
       window.addEventListener("message", messageHandler);
       this.parts.previewFrame.srcdoc = iframeDoc;
       setTimeout(() => {
@@ -245497,15 +245419,7 @@ class TSPlayground extends g {
 var tsPlayground = TSPlayground.elementCreator({
   tag: "ts-playground",
   styleSpec: {
-    ":host": {
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      flex: "1 1 auto",
-      background: "var(--background, #fff)",
-      color: "var(--text-color, #1f2937)",
-      fontFamily: "system-ui, sans-serif"
-    },
+    ...sharedPlaygroundStyles,
     ":host .ts-toolbar": {
       display: "flex",
       alignItems: "center",
@@ -245514,83 +245428,11 @@ var tsPlayground = TSPlayground.elementCreator({
       background: "var(--code-background, #f3f4f6)",
       borderBottom: "1px solid var(--code-border, #e5e7eb)"
     },
-    ":host .run-btn": {
-      display: "flex",
-      alignItems: "center",
-      gap: "4px",
-      padding: "6px 12px",
-      background: "var(--brand-color, #3178c6)",
-      color: "var(--brand-text-color, white)",
-      border: "none",
-      borderRadius: "6px",
-      cursor: "pointer",
-      fontWeight: "500",
-      fontSize: "14px"
-    },
-    ":host .run-btn:hover": {
-      filter: "brightness(1.1)"
-    },
-    ":host .toolbar-separator": {
-      width: "1px",
-      height: "20px",
-      background: "var(--code-border, #d1d5db)"
-    },
-    ":host .build-flags": {
-      display: "flex",
-      alignItems: "center",
-      gap: "12px"
-    },
-    ":host .flag-label": {
-      display: "flex",
-      alignItems: "center",
-      gap: "4px",
-      fontSize: "13px",
-      color: "var(--text-color, #6b7280)",
-      cursor: "pointer",
-      userSelect: "none"
-    },
-    ":host .flag-label:hover": {
-      color: "var(--text-color, #374151)"
-    },
     ':host .flag-label input[type="checkbox"]': {
       margin: "0",
       cursor: "pointer",
       accentColor: "var(--brand-color, #3178c6)"
     },
-    ":host .revert-btn": {
-      display: "flex",
-      alignItems: "center",
-      gap: "4px",
-      padding: "6px 12px",
-      background: "var(--code-background, #e5e7eb)",
-      color: "var(--text-color, #374151)",
-      border: "1px solid var(--code-border, #d1d5db)",
-      borderRadius: "6px",
-      cursor: "pointer",
-      fontWeight: "500",
-      fontSize: "14px",
-      transition: "opacity 0.2s"
-    },
-    ":host .revert-btn:hover:not(:disabled)": {
-      background: "#fef3c7",
-      borderColor: "#f59e0b",
-      color: "#92400e"
-    },
-    ":host .revert-btn:disabled": {
-      cursor: "default"
-    },
-    ":host .elastic": {
-      flex: "1"
-    },
-    ":host .status-bar": {
-      fontSize: "13px",
-      color: "var(--text-color, #6b7280)",
-      opacity: "0.7"
-    },
-    ":host .status-bar.error": {
-      color: "#dc2626",
-      opacity: "1"
-    },
     ":host .ts-main": {
       display: "flex",
       flex: "1 1 auto",
@@ -245613,25 +245455,6 @@ var tsPlayground = TSPlayground.elementCreator({
       minHeight: "0",
       height: "100%"
     },
-    ":host tosi-tabs > [name]": {
-      background: "var(--background, #fff)",
-      color: "var(--text-color, #1f2937)"
-    },
-    ":host .editor-wrapper": {
-      flex: "1 1 auto",
-      height: "100%",
-      minHeight: "300px",
-      position: "relative",
-      overflow: "hidden"
-    },
-    ":host .editor-wrapper code-mirror": {
-      display: "block",
-      position: "absolute",
-      top: "0",
-      left: "0",
-      right: "0",
-      bottom: "0"
-    },
     ":host .output-toolbar": {
       display: "flex",
       gap: "8px",
@@ -245669,112 +245492,11 @@ var tsPlayground = TSPlayground.elementCreator({
       height: "100%",
       background: "var(--background, #fff)"
     },
-    ":host .preview-frame": {
-      width: "100%",
-      height: "100%",
-      border: "none"
-    },
-    ":host .docs-output": {
-      display: "block",
-      padding: "12px 16px",
-      fontSize: "14px",
-      fontFamily: "system-ui, sans-serif",
-      color: "var(--text-color, inherit)",
-      background: "var(--background, #fff)",
-      height: "100%",
-      overflow: "auto"
-    },
-    ":host .tests-output": {
-      padding: "12px",
-      fontSize: "14px",
-      fontFamily: "system-ui, sans-serif",
-      color: "var(--text-color, inherit)",
-      background: "var(--background, #fff)",
-      height: "100%",
-      overflow: "auto"
-    },
-    ":host .test-summary": {
-      marginBottom: "12px",
-      paddingBottom: "8px",
-      borderBottom: "1px solid var(--code-border, #e5e7eb)"
-    },
-    ":host .test-failed": {
-      color: "#dc2626"
-    },
-    ":host .test-list": {
-      listStyle: "none",
-      padding: 0,
-      margin: 0
-    },
-    ":host .test-list li": {
-      padding: "4px 0"
-    },
-    ":host .test-pass": {
-      color: "#16a34a"
-    },
-    ":host .test-fail": {
-      color: "#dc2626"
-    },
-    ":host .test-error": {
-      marginLeft: "20px",
-      marginTop: "4px",
-      padding: "8px",
-      background: "rgba(220, 38, 38, 0.1)",
-      borderRadius: "4px",
-      fontSize: "13px",
-      fontFamily: "var(--font-mono, monospace)"
-    },
-    ":host .clickable-error": {
-      cursor: "pointer",
-      textDecoration: "underline",
-      textDecorationStyle: "dotted"
-    },
-    ":host .clickable-error:hover": {
-      background: "rgba(220, 38, 38, 0.2)"
-    },
-    ":host .sig-badge": {
-      fontSize: "11px",
-      padding: "2px 6px",
-      marginLeft: "8px",
-      background: "rgba(99, 102, 241, 0.1)",
-      color: "#6366f1",
-      borderRadius: "4px"
-    },
     ":host .ts-console": {
       height: "120px",
       borderTop: "1px solid var(--code-border, #e5e7eb)",
       display: "flex",
       flexDirection: "column"
-    },
-    ":host .console-header": {
-      padding: "4px 12px",
-      background: "var(--code-background, #f3f4f6)",
-      fontSize: "12px",
-      fontWeight: "500",
-      color: "var(--text-color, #6b7280)",
-      opacity: "0.7",
-      borderBottom: "1px solid var(--code-border, #e5e7eb)"
-    },
-    ":host .console-output": {
-      flex: "1",
-      margin: "0",
-      padding: "8px 12px",
-      background: "var(--code-background, #f3f4f6)",
-      color: "var(--text-color, #1f2937)",
-      fontSize: "12px",
-      fontFamily: "ui-monospace, monospace",
-      overflow: "auto",
-      whiteSpace: "pre-wrap"
-    },
-    ":host .clickable-line": {
-      cursor: "pointer",
-      color: "#2563eb",
-      textDecoration: "underline",
-      textDecorationStyle: "dotted"
-    },
-    ":host .clickable-line:hover": {
-      color: "#1d4ed8",
-      background: "rgba(37, 99, 235, 0.1)"
     }
   }
 });
@@ -246135,25 +245857,26 @@ main()
     description: "Classes are supported with metadata",
     group: "advanced",
     code: `// Classes with typed methods
+// Note: return types omitted on methods — TJS infers them
 
 class Calculator {
   private value: number = 0
 
-  add(n: number): Calculator {
+  add(n: number) {
     this.value += n
     return this
   }
 
-  multiply(n: number): Calculator {
+  multiply(n: number) {
     this.value *= n
     return this
   }
 
-  getResult(): number {
+  getResult() {
     return this.value
   }
 
-  reset(): void {
+  reset() {
     this.value = 0
   }
 }
@@ -266724,11 +266447,10 @@ main()`,
 const todos = new Map()
 let nextId = 1
 
-// Types
-type Todo = { id: number, title: string, completed: boolean, createdAt: string }
-type CreateInput = { title: 'Buy milk' }
-type UpdateInput = { id: 1, title: 'Buy milk', completed: false }
-type FilterInput = { completed: true } | { completed: false } | {}
+// Types are inferred from function signatures below
+// Todo: { id: 0, title: '', completed: false, createdAt: '' }
+// CreateInput: { title: 'Buy milk' }
+// UpdateInput: { id: 1, title: 'Buy milk', completed: false }
 
 // POST /todos - Create
 export function createTodo(input: { title: 'New todo' })
@@ -267059,7 +266781,9 @@ function createEvent(input: {
     title: input.title,
     start: format(start, 'yyyy-MM-dd'),
     end: format(end, 'yyyy-MM-dd'),
-    formatted: \`\\\${input.title}: \\\${format(start, 'MMM d')} - \\\${format(end, 'MMM d, yyyy')}\\`,
+    formatted: \`\${input.title}: \${format(start, 'MMM d')} - \${format(end, 'MMM d, yyyy')}\`
+  }
+}`,
     language: "tjs",
     description: "Uses date-fns for date formatting via ESM import"
   },
@@ -267081,7 +266805,34 @@ You can import from modules saved in the playground!
 2. Import it by name from another file
 
 ## Try it:
-1. First, create and save a module named "mymath":`,
+1. First, create and save a module named "mymath":
+
+    export function add(a: 0, b: 0) -> 0 {
+      return a + b
+    }
+
+    export function multiply(a: 0, b: 0) -> 0 {
+      return a * b
+    }
+
+2. Then run this code (it imports from your saved module)
+*/
+
+// This imports from a module you saved in the playground
+// Change 'mymath' to match whatever name you used when saving
+import { add, multiply } from 'mymath'
+
+function calculate(x: 0, y: 0) -> 0 {
+  // (x + y) * 2
+  return multiply(add(x, y), 2)
+}
+
+test 'calculate combines add and multiply' {
+  expect(calculate(3, 4)).toBe(14) // (3 + 4) * 2 = 14
+}
+
+console.log('calculate(3, 4) =', calculate(3, 4))
+console.log('calculate(10, 5) =', calculate(10, 5))`,
     language: "tjs",
     description: "Import from modules you save in the playground"
   },
@@ -267313,22 +267064,31 @@ document.body.append(
     requiresApi: true,
     code: `function mathAssistant({ question = 'What is 23 * 47 + 156?' }) {
   // First, ask LLM to extract the calculation
-  let extractPrompt = \\\`Extract the math expression from this question. Return ONLY the expression, nothing else.
-Question: \\\${question}\\\`
+  let extractPrompt =
+    'Extract the math expression from this question. Return ONLY the expression, nothing else.\\nQuestion: ' +
+    question
   let expression = llmPredict({ prompt: extractPrompt })
 
   // Evaluate the expression (simple eval simulation)
-  let calcPrompt = \\\`Calculate: \\\${expression}
-Return ONLY the numeric result.\\\`
+  let calcPrompt =
+    'Calculate: ' + expression + '\\nReturn ONLY the numeric result.'
   let calcResult = llmPredict({ prompt: calcPrompt })
 
   // Format the answer
-  let answerPrompt = \\\`The user asked: "\\\${question}"
-The calculated result is: \\\${calcResult}
-Write a brief, friendly response with the answer.\\\`
+  let answerPrompt =
+    'The user asked: "' +
+    question +
+    '"\\nThe calculated result is: ' +
+    calcResult +
+    '\\nWrite a brief, friendly response with the answer.'
   let answer = llmPredict({ prompt: answerPrompt })
 
-  return { question, expression: expression.trim(), result: calcResult.trim(), answer }
+  return {
+    question,
+    expression: expression.trim(),
+    result: calcResult.trim(),
+    answer,
+  }
 }`,
     language: "javascript",
     description: "LLM uses a calculator tool (requires llm capability)"
@@ -267344,33 +267104,33 @@ Write a brief, friendly response with the answer.\\\`
     requiresApi: true,
     code: `function collaborativeWriting({ topic = 'the future of renewable energy' }) {
   // Agent 1: Research Agent - generates key points
-  let researchPrompt = \\\`You are a research agent. Generate 3 key facts or points about: \\\${topic}
-Format as a numbered list. Be concise.\\\`
+  let researchPrompt =
+    'You are a research agent. Generate 3 key facts or points about: ' +
+    topic +
+    '\\nFormat as a numbered list. Be concise.'
   let research = llmPredict({ prompt: researchPrompt })
 
   // Agent 2: Writer Agent - creates content from research
-  let writerPrompt = \\\`You are a writer agent. Using these research points:
-
-\\\${research}
-
-Write a short, engaging paragraph (2-3 sentences) about \\\${topic}.
-Make it informative and accessible.\\\`
+  let writerPrompt =
+    'You are a writer agent. Using these research points:\\n\\n' +
+    research +
+    '\\n\\nWrite a short, engaging paragraph (2-3 sentences) about ' +
+    topic +
+    '.\\nMake it informative and accessible.'
   let article = llmPredict({ prompt: writerPrompt })
 
   // Agent 3: Editor Agent - reviews and improves
-  let editorPrompt = \\\`You are an editor agent. Review this draft:
-
-"\\\${article}"
-
-Suggest one specific improvement. Then provide the improved version.
-Format: "Suggestion: [your suggestion]\\\\n\\\\nImproved: [improved text]"\\\`
+  let editorPrompt =
+    'You are an editor agent. Review this draft:\\n\\n"' +
+    article +
+    '"\\n\\nSuggest one specific improvement. Then provide the improved version.\\nFormat: "Suggestion: [your suggestion]\\n\\nImproved: [improved text]"'
   let edited = llmPredict({ prompt: editorPrompt })
 
   return {
     topic,
     researchPoints: research,
     firstDraft: article,
-    editedVersion: edited
+    editedVersion: edited,
   }
 }`,
     language: "javascript",
@@ -267454,65 +267214,17 @@ Format: "Suggestion: [your suggestion]\\\\n\\\\nImproved: [improved text]"\\\`
     requiresApi: true,
     code: `function solveWithCode({ problem = 'Calculate the 10th Fibonacci number' }) {
   // System prompt with AsyncJS rules and example
-  let systemContext = \\\`You write AsyncJS code. AsyncJS is a JavaScript subset.
+  let systemContext =
+    'You write AsyncJS code. AsyncJS is a JavaScript subset.\\n\\nRULES:\\n- NO: async, await, new, class, this, var, for loops\\n- Use let for variables, while for loops\\n- Return an object: return { result }\\n\\nEXAMPLE (factorial):\\nfunction solve() {\\n  let result = 1\\n  let i = 5\\n  while (i > 1) {\\n    result = result * i\\n    i = i - 1\\n  }\\n  return { result }\\n}\\n\\nReturn ONLY the function code, nothing else.'
 
-RULES:
-- NO: async, await, new, class, this, var, for loops
-- Use let for variables, while for loops
-- Return an object: return { result }
-
-EXAMPLE (factorial):
-function solve() {
-  let result = 1
-  let i = 5
-  while (i > 1) {
-    result = result * i
-    i = i - 1
-  }
-  return { result }
-}
-
-Return ONLY the function code, nothing else.\\\`
-
-  let prompt = \\\`\\\${systemContext}
-
-Write a function called "solve" that: \\\${problem}\\\`
+  let prompt =
+    systemContext + '\\n\\nWrite a function called "solve" that: ' + problem
 
   let response = llmPredict({ prompt })
 
   // Clean up code - remove markdown fences, fix escapes, extract function
   let code = response
-  code = code.replace(/\\\`\\\`\\\`(?:javascript|js|asyncjs)?\\\\n?/g, '')
-  code = code.replace(/\\\\n?\\\`\\\`\\\`/g, '')
-  code = code.replace(/\\\\\\\\n/g, '\\\\n')
-  code = code.replace(/\\\\\\\\t/g, '\\\\t')
-  code = code.replace(/\\\\\\\\"/g, '"')
-  code = code.trim()
-
-  // Try to extract just the function if there's extra text
-  let funcMatch = code.match(/function\\\\s+solve\\\\s*\\\\([^)]*\\\\)\\\\s*\\\\{[\\\\s\\\\S]*\\\\}/)
-  if (funcMatch) {
-    code = funcMatch[0]
-  }
-
-  // Validate it looks like a function before running
-  if (!code.startsWith('function')) {
-    return {
-      problem,
-      error: 'LLM did not generate valid code',
-      rawResponse: response
-    }
-  }
-
-  // Execute the generated code
-  let output = runCode({ code, args: {} })
-
-  return {
-    problem,
-    generatedCode: code,
-    result: output.result
-  }
-}`,
+  code = code.replace(/`,
     language: "javascript",
     description: "LLM writes and runs code to solve a problem (requires llm capability)"
   },
@@ -267527,53 +267239,26 @@ Write a function called "solve" that: \\\${problem}\\\`
     requiresApi: true,
     code: `function generateCode({ task = 'Calculate the factorial of n' }) {
   // System prompt with AsyncJS rules and complete example
-  let systemContext = \\\`You write AsyncJS code. AsyncJS is a subset of JavaScript.
-
-RULES:
-- Types by example: fn(n: 5) means required number param with example value 5
-- NO: async, await, new, class, this, var, for, generator functions (function*)
-- Use let for variables, while for loops
-- Return an object: return { result }
-
-EXAMPLE - calculating sum of 1 to n:
-function sumTo(n: 10) {
-  let sum = 0
-  let i = 1
-  while (i <= n) {
-    sum = sum + i
-    i = i + 1
-  }
-  return { result: sum }
-}\\\`
+  let systemContext =
+    'You write AsyncJS code. AsyncJS is a subset of JavaScript.\\n\\nRULES:\\n- Types by example: fn(n: 5) means required number param with example value 5\\n- NO: async, await, new, class, this, var, for, generator functions (function*)\\n- Use let for variables, while for loops\\n- Return an object: return { result }\\n\\nEXAMPLE - calculating sum of 1 to n:\\nfunction sumTo(n: 10) {\\n  let sum = 0\\n  let i = 1\\n  while (i <= n) {\\n    sum = sum + i\\n    i = i + 1\\n  }\\n  return { result: sum }\\n}'
 
   let schema = Schema.response('generated_code', {
     code: '',
-    description: ''
+    description: '',
   })
 
-  let prompt = \\\`\\\${systemContext}
-
-Write an AsyncJS function for: \\\${task}
-
-Return ONLY valid AsyncJS code in the code field. Must start with "function" and use while loops (not for loops).\\\`
+  let prompt =
+    systemContext +
+    '\\n\\nWrite an AsyncJS function for: ' +
+    task +
+    '\\n\\nReturn ONLY valid AsyncJS code in the code field. Must start with "function" and use while loops (not for loops).'
 
   let response = llmPredict({ prompt, options: { responseFormat: schema } })
   let result = JSON.parse(response)
 
   // Clean up any markdown fences and fix escaped newlines
   let code = result.code
-  code = code.replace(/\\\`\\\`\\\`(?:javascript|js)?\\\\n?/g, '')
-  code = code.replace(/\\\\n?\\\`\\\`\\\`/g, '')
-  code = code.replace(/\\\\\\\\n/g, '\\\\n')
-  code = code.replace(/\\\\\\\\t/g, '\\\\t')
-  code = code.trim()
-
-  return {
-    task,
-    code,
-    description: result.description
-  }
-}`,
+  code = code.replace(/`,
     language: "javascript",
     description: "LLM writes AsyncJS code from a description (requires llm capability)"
   },
@@ -267586,7 +267271,12 @@ Return ONLY valid AsyncJS code in the code field. Must start with "function" and
     group: "api",
     order: 7,
     code: `function getWeather({ lat = 37.7749, lon = -122.4194 }) {
-  let url = \\\`https://api.open-meteo.com/v1/forecast?latitude=\\\${lat}&longitude=\\\${lon}&current_weather=true\\\`
+  let url =
+    'https://api.open-meteo.com/v1/forecast?latitude=' +
+    lat +
+    '&longitude=' +
+    lon +
+    '&current_weather=true'
   let response = httpFetch({ url, cache: 1800 })
   let weather = response.current_weather
   return { weather }
@@ -267603,12 +267293,17 @@ Return ONLY valid AsyncJS code in the code field. Must start with "function" and
     group: "api",
     order: 8,
     code: `function searchMusic({ query = 'Beatles', limit = 5 }) {
-  let url = \\\`https://itunes.apple.com/search?term=\\\${query}&limit=\\\${limit}&media=music\\\`
+  let url =
+    'https://itunes.apple.com/search?term=' +
+    query +
+    '&limit=' +
+    limit +
+    '&media=music'
   let response = httpFetch({ url, cache: 3600 })
-  let tracks = response.results.map(x => ({
+  let tracks = response.results.map((x) => ({
     artist: x.artistName,
     track: x.trackName,
-    album: x.collectionName
+    album: x.collectionName,
   }))
   return { tracks }
 }`,
@@ -267624,12 +267319,17 @@ Return ONLY valid AsyncJS code in the code field. Must start with "function" and
     group: "api",
     order: 9,
     code: `function searchRepos({ query = 'tosijs', perPage = 5 }) {
-  let url = \\\`https://api.github.com/search/repositories?q=\\\${query}&per_page=\\\${perPage}&sort=stars\\\`
+  let url =
+    'https://api.github.com/search/repositories?q=' +
+    query +
+    '&per_page=' +
+    perPage +
+    '&sort=stars'
   let response = httpFetch({ url, cache: 300 })
-  let repos = response.items.map(x => ({
+  let repos = response.items.map((x) => ({
     name: x.full_name,
     stars: x.stargazers_count,
-    description: x.description
+    description: x.description,
   }))
   return { repos }
 }`,
@@ -269033,24 +268733,33 @@ This minimal dependency approach reduces supply chain risk and bundle size.
     code: `function findCovers({ song = 'Yesterday', artist = 'Beatles' }) {
   // Search iTunes for the song
   let query = song + ' ' + artist
-  let url = \\\`https://itunes.apple.com/search?term=\\\${query}&limit=25&media=music\\\`
+  let url =
+    'https://itunes.apple.com/search?term=' + query + '&limit=25&media=music'
   let response = httpFetch({ url, cache: 3600 })
 
   // Format results for LLM analysis
   let results = response.results || []
-  let tracks = results.map(x => \\\`"\\\${x.trackName}" by \\\${x.artistName} (\\\${x.collectionName})\\\`)
-  let trackList = tracks.join('\\\\n')
+  let tracks = results.map(
+    (x) =>
+      '"' + x.trackName + '" by ' + x.artistName + ' (' + x.collectionName + ')'
+  )
+  let trackList = tracks.join('\\n')
 
   // Schema.response from example - much cleaner!
   let schema = Schema.response('cover_versions', {
-    covers: [{ track: '', artist: '', album: '' }]
+    covers: [{ track: '', artist: '', album: '' }],
   })
 
-  let prompt = \\\`Search results for "\\\${song}" by \\\${artist}:
-
-\\\${trackList}
-
-List cover versions (tracks NOT by \\\${artist}).\\\`
+  let prompt =
+    'Search results for "' +
+    song +
+    '" by ' +
+    artist +
+    ':\\n\\n' +
+    trackList +
+    '\\n\\nList cover versions (tracks NOT by ' +
+    artist +
+    ').'
 
   let llmResponse = llmPredict({ prompt, options: { responseFormat: schema } })
   let parsed = JSON.parse(llmResponse)
@@ -269109,10 +268818,10 @@ List cover versions (tracks NOT by \\\${artist}).\\\`
     code: `function summarize({ source = 'coffee-origins' }) {
   // Fetch text from our sample documents
   // Options: 'coffee-origins', 'ai-history', 'renewable-energy'
-  let url = \\\`/texts/\\\${source}.txt\\\`
+  let url = '/texts/' + source + '.txt'
   let text = httpFetch({ url })
 
-  let prompt = \\\`Summarize the following text in 2-3 sentences:\\n\\n\\\${text}\\\`
+  let prompt = 'Summarize the following text in 2-3 sentences:\\n\\n' + text
   let summary = llmPredict({ prompt })
   return { source, summary }
 }`,
@@ -269128,17 +268837,19 @@ List cover versions (tracks NOT by \\\${artist}).\\\`
     group: "llm",
     order: 12,
     requiresApi: true,
-    code: `function extractInfo({ text = 'John Smith is a 35-year-old software engineer from San Francisco who loves hiking and photography.' }) {
+    code: `function extractInfo({
+  text = 'John Smith is a 35-year-old software engineer from San Francisco who loves hiking and photography.',
+}) {
   // Schema.response builds responseFormat from an example
   let schema = Schema.response('person_info', {
     name: '',
     age: 0,
     occupation: '',
     location: '',
-    hobbies: ['']
+    hobbies: [''],
   })
 
-  let prompt = \\\`Extract person info from this text: \\\${text}\\\`
+  let prompt = 'Extract person info from this text: ' + text
   let response = llmPredict({ prompt, options: { responseFormat: schema } })
   let person = JSON.parse(response)
   return { person }
@@ -271270,7 +270981,7 @@ The transpiler generates code like:
  *   )
  */
 const add = await (async () => {
-  const bytes = Uint8Array.from(atob('AGFzbQEAAAA...'), c => c.charCodeAt(0))
+  const bytes = Uint8Array.from(atob('AGFzbQEAAAA...'), (c) => c.charCodeAt(0))
   const { instance } = await WebAssembly.instantiate(bytes)
   return instance.exports.fn
 })()
@@ -271510,6 +271221,25 @@ Comment inside function`,
     filename: "from-ts.test.ts",
     path: "src/lang/from-ts.test.ts"
   },
+  {
+    title: "icebox",
+    filename: "tasks-f6d70f.md",
+    path: ".haltija/tasks-f6d70f.md",
+    text: `# icebox
+
+# queued
+
+# in_progress
+
+# blocked
+
+# review
+
+# done
+
+# trash
+`
+  },
   {
     text: `# TJS Platform Cloud Functions
 
@@ -275179,4 +274909,4 @@ if (main) {
 }
 console.log(`%c tjs-lang %c v${VERSION} `, "background: #6366f1; color: white; padding: 2px 6px; border-radius: 3px 0 0 3px;", "background: #374151; color: white; padding: 2px 6px; border-radius: 0 3px 3px 0;");
 
-//# debugId=16FB3CD88E3A52B764756E2164756E21
+//# debugId=9B23A9B33C90485E64756E2164756E21