tjs-lang 0.8.0 → 0.8.2

package/demo/examples.test.ts

@@ -448,9 +448,13 @@ describe('Playground Examples', () => {
             args.imageUrl = '/test-shapes.jpg'
           }
 
-          // Use the SAME capabilities as the playground
+          // Use the SAME capabilities as the playground.
+          // Vision inference on a local model can take a while; give it an
+          // explicit budget well above the slow-atom timeout so the test is
+          // deterministic regardless of the run-level default.
           const runResult = await vm.run(result.ast, args, {
             fuel: 100000,
+            timeoutMs: 180000,
             capabilities: {
               fetch: httpFetch,
               llm: llmCapability || mockLLM,
@@ -466,7 +470,7 @@ describe('Playground Examples', () => {
         } finally {
           trackTestEnd()
         }
-      }, 120000)
+      }, 240000) // bun-test timeout above the vm timeoutMs (180s) + overhead
     } else if (needsRetry) {
       // Examples that use runCode need retry due to LLM variability
       it(`${example.name} - runs successfully`, async () => {

package/demo/src/playground-shared.ts

@@ -255,28 +255,36 @@ export function renderConsoleMessages(
 
 /**
  * Render test results HTML with clickable error links and editor gutter markers.
- * Returns pass/fail counts so callers can update tab indicators.
+ * Returns pass/fail/inconclusive counts so callers can update tab indicators.
  */
 export function renderTestResults(
   tests: any[],
   outputEl: HTMLElement,
   editor: CodeMirror,
   goToLine: (line: number) => void
-): { passed: number; failed: number } {
+): { passed: number; failed: number; inconclusive: number } {
   if (!tests || tests.length === 0) {
     outputEl.textContent = 'No tests defined'
     editor.clearMarkers()
-    return { passed: 0, failed: 0 }
+    return { passed: 0, failed: 0, inconclusive: 0 }
   }
 
   const passed = tests.filter((t: any) => t.passed).length
-  const failed = tests.filter((t: any) => !t.passed).length
-
-  // Mark only FAILED tests in the editor. Passing tests appear in the
-  // results panel and don't need an underline — `severity: 'info'` was
-  // rendering as a grey squiggle on every passing test's line, which is
-  // visual noise.
-  const failedWithLines = tests.filter((t: any) => t.line && !t.passed)
+  // Inconclusive = the test couldn't *run* (e.g. it calls an AJS atom that
+  // doesn't exist at build time). It is neither pass nor fail — surface it as
+  // a distinct warning state and keep it out of the failure count, so legal
+  // AJS doesn't read as broken in the playground. See PRINCIPLES.md.
+  const inconclusive = tests.filter(
+    (t: any) => !t.passed && t.inconclusive
+  ).length
+  const failed = tests.filter((t: any) => !t.passed && !t.inconclusive).length
+
+  // Mark only genuine FAILURES in the editor. Passing tests don't need an
+  // underline (it reads as visual noise), and an inconclusive test isn't a
+  // failure — a red squiggle would wrongly imply the code is broken.
+  const failedWithLines = tests.filter(
+    (t: any) => t.line && !t.passed && !t.inconclusive
+  )
   if (failedWithLines.length > 0) {
     editor.setMarkers(
       failedWithLines.map((t: any) => ({
@@ -294,19 +302,29 @@ export function renderTestResults(
   if (failed > 0) {
     html += `, <strong class="test-failed">${failed} failed</strong>`
   }
+  if (inconclusive > 0) {
+    html += `, <strong class="test-inconclusive">${inconclusive} inconclusive</strong>`
+  }
   html += `</div><ul class="test-list">`
 
   for (const test of tests) {
-    const icon = test.passed ? '✓' : '✗'
-    const cls = test.passed ? 'test-pass' : 'test-fail'
+    const state = test.passed
+      ? 'pass'
+      : test.inconclusive
+      ? 'inconclusive'
+      : 'fail'
+    const icon = test.passed ? '✓' : test.inconclusive ? '—' : '✗'
     const sigBadge = test.isSignatureTest
       ? ' <span class="sig-badge">signature</span>'
       : ''
     const dataLine = test.line ? ` data-line="${test.line}"` : ''
     const clickable = test.line ? ' clickable-test' : ''
-    html += `<li class="${cls}${clickable}"${dataLine}>${icon} ${test.description}${sigBadge}`
-    if (!test.passed && test.error) {
-      html += `<div class="test-error">${test.error}</div>`
+    html += `<li class="test-${state}${clickable}"${dataLine}>${icon} ${test.description}${sigBadge}`
+    if (test.error) {
+      // Inconclusive notes are warnings (couldn't run), not failures.
+      const noteCls = test.inconclusive ? 'test-note' : 'test-error'
+      const prefix = test.inconclusive ? 'could not run — ' : ''
+      html += `<div class="${noteCls}">${prefix}${test.error}</div>`
     }
     html += `</li>`
   }
@@ -327,7 +345,7 @@ export function renderTestResults(
     })
   })
 
-  return { passed, failed }
+  return { passed, failed, inconclusive }
 }
 
 // ---------------------------------------------------------------------------
@@ -589,6 +607,20 @@ export const sharedPlaygroundStyles: Record<string, Record<string, string>> = {
     fontFamily: 'var(--font-mono, monospace)',
   },
 
+  ':host .test-inconclusive': {
+    color: '#d97706',
+  },
+
+  ':host .test-note': {
+    marginLeft: '20px',
+    marginTop: '4px',
+    padding: '8px',
+    background: 'rgba(217, 119, 6, 0.1)',
+    borderRadius: '4px',
+    fontSize: '13px',
+    fontFamily: 'var(--font-mono, monospace)',
+  },
+
   ':host .clickable-test': {
     cursor: 'pointer',
   },

package/demo/src/playground-test-results.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect, beforeAll, afterAll } from 'bun:test'
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+
+beforeAll(() => GlobalRegistrator.register())
+afterAll(() => GlobalRegistrator.unregister())
+
+// Imported after DOM globals exist.
+const { renderTestResults } = await import('./playground-shared')
+
+function fakeEditor() {
+  const calls: any[] = []
+  return {
+    setMarkers: (m: any) => calls.push({ setMarkers: m }),
+    clearMarkers: () => calls.push({ clearMarkers: true }),
+    _calls: calls,
+  } as any
+}
+
+describe('renderTestResults — inconclusive affordance', () => {
+  it('separates inconclusive from passed and failed', () => {
+    const out = document.createElement('div')
+    const editor = fakeEditor()
+    const counts = renderTestResults(
+      [
+        { description: 'a', passed: true },
+        { description: 'b', passed: false, error: 'Expected 5 got 6' },
+        {
+          description: 'c signature example',
+          passed: false,
+          inconclusive: true,
+          isSignatureTest: true,
+          error: 'httpFetch is not defined',
+        },
+      ],
+      out,
+      editor,
+      () => {}
+    )
+
+    expect(counts).toEqual({ passed: 1, failed: 1, inconclusive: 1 })
+
+    // Summary shows all three states
+    expect(out.querySelector('.test-summary')?.textContent).toContain(
+      '1 passed'
+    )
+    expect(out.querySelector('.test-summary')?.textContent).toContain(
+      '1 failed'
+    )
+    expect(out.querySelector('.test-summary')?.textContent).toContain(
+      '1 inconclusive'
+    )
+
+    // The inconclusive test renders with its own class + a warning note (not
+    // a red error), with the "could not run" framing.
+    const incLi = out.querySelector('li.test-inconclusive')
+    expect(incLi).not.toBeNull()
+    expect(incLi?.textContent).toContain('—') // not the ✗ failure icon
+    expect(incLi?.querySelector('.test-note')).not.toBeNull()
+    expect(incLi?.querySelector('.test-error')).toBeNull()
+    expect(incLi?.querySelector('.test-note')?.textContent).toContain(
+      'could not run'
+    )
+
+    // The genuine failure keeps the red error box + ✗ icon.
+    const failLi = out.querySelector('li.test-fail')
+    expect(failLi?.textContent).toContain('✗')
+    expect(failLi?.querySelector('.test-error')).not.toBeNull()
+  })
+
+  it('renders REAL transpiler output: atom-calling agent → inconclusive', async () => {
+    // End-to-end: the transpiler emits inconclusive for an un-runnable
+    // signature test; the playground must render it as such (not a failure).
+    const { tjs } = await import('../../src/lang')
+    const { testResults } = tjs(
+      `function main(url: ''): { x: '' } {\n  const x = httpFetch({ url })\n  return { x }\n}`
+    )
+    const out = document.createElement('div')
+    const counts = renderTestResults(
+      testResults as any,
+      out,
+      fakeEditor(),
+      () => {}
+    )
+    expect(counts.failed).toBe(0)
+    expect(counts.inconclusive).toBe(1)
+    expect(out.querySelector('li.test-inconclusive')).not.toBeNull()
+    expect(out.querySelector('li.test-fail')).toBeNull()
+  })
+
+  it('does NOT put an error marker on an inconclusive test line', () => {
+    const out = document.createElement('div')
+    const editor = fakeEditor()
+    renderTestResults(
+      [
+        {
+          description: 'sig',
+          passed: false,
+          inconclusive: true,
+          line: 3,
+          error: 'atom not defined',
+        },
+      ],
+      out,
+      editor,
+      () => {}
+    )
+    // No setMarkers with an error for the inconclusive line; clearMarkers instead.
+    const markerCalls = editor._calls.filter((c: any) => c.setMarkers)
+    expect(markerCalls).toHaveLength(0)
+    expect(editor._calls.some((c: any) => c.clearMarkers)).toBe(true)
+  })
+})

package/demo/src/tjs-playground.ts

@@ -149,7 +149,7 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
   // Split mode
   private _splitMode: null | 'code' | 'output' = null
   private _splitChannel: BroadcastChannel | null = null
-  private _splitSessionId: string = ''
+  private _splitSessionId = ''
 
   // Build flags state
   private buildFlags = {
@@ -860,21 +860,27 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
 
   private updateTestResults(result: any) {
     const tests = result.testResults
-    const { passed, failed } = renderTestResults(
+    const { passed, failed, inconclusive } = renderTestResults(
       tests,
       this.parts.testsOutput,
       this.parts.tjsEditor,
       (line) => this.goToSourceLine(line)
     )
-    this.updateTestsTabLabel(passed, failed)
+    this.updateTestsTabLabel(passed, failed, inconclusive)
   }
 
-  private updateTestsTabLabel(passed: number, failed: number) {
+  private updateTestsTabLabel(
+    passed: number,
+    failed: number,
+    inconclusive = 0
+  ) {
     const tabs = this.parts.outputTabs
     if (!tabs) return
 
     if (failed > 0) {
       tabs.style.setProperty('--test-indicator-color', '#dc2626')
+    } else if (inconclusive > 0) {
+      tabs.style.setProperty('--test-indicator-color', '#d97706')
     } else if (passed > 0) {
       tabs.style.setProperty('--test-indicator-color', '#16a34a')
     } else {
@@ -1394,7 +1400,7 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
   }
 
   // Navigate to a specific line in the source editor
-  goToSourceLine(line: number, column: number = 1) {
+  goToSourceLine(line: number, column = 1) {
     this.parts.inputTabs.value = 0 // Switch to TJS tab (first tab)
     // Wait for tab switch and editor resize before scrolling
     setTimeout(() => {

package/dist/eslint.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("typescript-eslint").FlatConfig.ConfigArray;
+export default _default;