testeranto 0.189.0 → 0.198.0

package/src/templates/frontpage.html

@@ -1,54 +1,331 @@
-<div class="hero-section">
-  <div class="container">
-    <div class="row align-items-center">
+<div class="snap-container">
+  <!-- Hero Section -->
+  <section class="snap-section d-flex align-items-center justify-content-center min-vh-100" style="
+      background: linear-gradient(0deg, #000 0%, #222 50%, #000 100%);
+      background-size: 200% 200%;
+      color: #fff;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: vibrantPulse 8s ease infinite;
+    ">
+    <style>
+      .snap-section h2 {
+        font-size: 500% !important;
+      }
 
-      <!-- <div class="col-md-2">
-
-      </div> -->
-      <div class="col-md-10">
-        <h1>Testeranto</h1>
-        <h2>The AI-powered BDD test framework for typescript projects</h2>
+      .snap-section .lead {
+        font-size: 150% !important;
+      }
+    </style>
+    <div class="container text-center">
+      <h1 class="display-3 fw-bold mb-4">Testeranto</h1>
+      <h2 class="lead fs-2 mb-5">
+        The AI-powered BDD test framework for Typescript projects.
+      </h2>
+    </div>
+  </section>
 
+  <!-- Vibe Coding (Left) -->
+  <section class="snap-section min-vh-100 d-flex align-items-center" style="
+      background: linear-gradient(to bottom, #0a0023 0%, #551a57 100%);
+      color: var(--dark-vibrant-text);
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: vibrantPulse 8s ease infinite;
+    ">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-6">
+          <h2 class="display-4 mb-4 text-center">
+            Vibe Coding meets<br />the Real World
+          </h2>
+        </div>
+        <div class="col-md-6">
+          <p class="lead">
+            You've heard the hype - now it's time to get down to business.
+            Harness the raw power of LLMs to write and test your TypeScript at
+            scale. Soon you'll be working in your real-world codebase like a
+            pro.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
 
+  <!-- Self-fixing Tests (Right) -->
+  <section class="snap-section min-vh-100 d-flex align-items-center" style="
+      background: linear-gradient(
+          135deg,
+          rgba(66, 85, 197, 0.9) 0%,
+          rgba(105, 4, 106, 0.9) 100%
+        ),
+        radial-gradient(
+          circle at 30% 30%,
+          rgba(66, 85, 197, 0.2) 0%,
+          transparent 50%
+        ),
+        radial-gradient(
+          circle at 70% 70%,
+          rgba(105, 4, 106, 0.2) 0%,
+          transparent 50%
+        );
+      color: var(--dark-vibrant-text);
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: vibrantPulse 8s ease infinite;
+    ">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-6 order-md-2">
+          <h2 class="display-4 mb-4 text-center">
+            Tests so smart<br />they fix themselves
+          </h2>
+        </div>
+        <div class="col-md-6 order-md-1">
+          <p class="lead">
+            When tests fail, an LLM can automatically resolve the problem with a
+            single click. They handle type errors and static analysis too.
+            Informed by your documentation, they can even implement new
+            features. You might never write code by hand again.
+          </p>
+        </div>
       </div>
-      <!-- <div class="col-md-12">
+    </div>
+  </section>
 
-        <ul class="cta-buttons">
-          <a href="https://github.com/adamwong246/testeranto" class="btn btn-primary">Star on GitHub</a>
-          <li><a href="README.html">README</a></li>
-          <li><a href="docs/index.html">docs</a></li>
-        </ul>
+  <!-- Precision Prompts (Left) -->
+  <section class="snap-section min-vh-100 d-flex align-items-center" style="
+      background: radial-gradient(
+          ellipse at top left,
+          #1900fe 0%,
+          transparent 70%
+        ),
+        radial-gradient(ellipse at bottom right, #00e5ff 0%, transparent 70%),
+        linear-gradient(to bottom, #1900fe 0%, #00e5ff 100%);
+      color: #fff;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: vibrantPulse 8s ease infinite;
+    ">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-6">
+          <h2 class="display-4 mb-4 text-center">
+            Perfectly<br />Precise<br />Prompts
+          </h2>
+        </div>
+        <div class="col-md-6">
+          <p class="lead">
+            Testeranto's optimized prompts maximize the LLM's limited context
+            window by including only the most relevant source files,
+            documentation, and test results. This means you can get better
+            results from smaller models. The context is so well-structured that
+            you can even run OpenRouter models locally and avoid paying those
+            pesky API fees.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
 
-        <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
-        </iframe>
-        
-        <video width="320" height="240" controls>
-          <source src="output/project.mp4" type="video/mp4">
+  <!-- Test Results (Right) -->
+  <section class="snap-section min-vh-100 d-flex align-items-center" style="
+      background: linear-gradient(
+          135deg,
+          rgba(54, 206, 65, 0.9) 0%,
+          rgba(59, 188, 255, 0.9) 100%
+        ),
+        radial-gradient(
+          circle at 20% 30%,
+          rgba(54, 206, 65, 0.2) 0%,
+          transparent 50%
+        ),
+        radial-gradient(
+          circle at 80% 70%,
+          rgba(59, 188, 255, 0.2) 0%,
+          transparent 50%
+        );
+      color: #fff;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: vibrantPulse 8s ease infinite;
+    ">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-6 order-md-2">
+          <h2 class="display-4 mb-4 text-center">
+            Test results,<br />artfully arranged
+          </h2>
+        </div>
+        <div class="col-md-6 order-md-1">
+          <p class="lead">
+            Are you tired of looking at ugly test reports? Testeranto tracks
+            everything in Git and presents test results, static analysis, type
+            errors, screenshots, features, and documentation in a lovely little
+            static site that's easily deployed to GitHub Pages.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
 
-          Your browser does not support the video tag.
-        </video>
-      </div> -->
+  <!-- Multi-runtime (Left) -->
+  <section class="snap-section min-vh-100 d-flex align-items-center" style="
+      background: linear-gradient(
+          135deg,
+          rgba(19, 72, 0, 0.9) 0%,
+          rgba(48, 222, 57, 0.9) 100%
+        ),
+        radial-gradient(
+          circle at 20% 30%,
+          rgba(19, 72, 0, 0.2) 0%,
+          transparent 50%
+        ),
+        radial-gradient(
+          circle at 80% 70%,
+          rgba(48, 222, 57, 0.2) 0%,
+          transparent 50%
+        );
+      color: #fff;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: vibrantPulse 8s ease infinite;
+    ">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-6">
+          <h2 class="display-4 mb-4 text-center">
+            Frontend, backend<br />and everything in between
+          </h2>
+        </div>
+        <div class="col-md-6">
+          <p class="lead">
+            Run your tests in Node.js, Chrome, or both! Testeranto's custom
+            multi-runtime architecture can execute tests in any environment. You
+            no longer need to hoist your React components with Jest - you can
+            render and test them right in the browser. You can even take
+            screenshots with puppeteer!
+          </p>
+        </div>
+      </div>
     </div>
-  </div>
-</div>
+  </section>
 
-<div class="features-section">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-4 feature-card">
-        <h3>✨ Vibe Coding grows up</h3>
-        <p>Harness the power of LLM generated code with the control of a BDD framework.</p>
+  <!-- Typed BDD DSL (Right) -->
+  <section class="snap-section min-vh-100 d-flex align-items-center" style="
+      background: linear-gradient(
+          135deg,
+          rgba(255, 152, 0, 0.9) 0%,
+          rgba(229, 255, 107, 0.9) 100%
+        ),
+        radial-gradient(
+          circle at 20% 30%,
+          rgba(255, 152, 0, 0.2) 0%,
+          transparent 50%
+        ),
+        radial-gradient(
+          circle at 80% 70%,
+          rgba(229, 255, 107, 0.2) 0%,
+          transparent 50%
+        );
+      color: var(--primary-vibrant-text);
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: vibrantPulse 8s ease infinite;
+    ">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-6 order-md-2">
+          <h2 class="display-4 mb-4 text-center">A new type of BDD</h2>
+        </div>
+        <div class="col-md-6 order-md-1">
+          <p class="lead">
+            Behavior-Driven Development specifications are written in a
+            tightly-typed TypeScript DSL. You can edit those specs right in the
+            browser with Github's Web VSCode editor, without ever cloning your
+            project. It's so easy, even a stakeholder can do it.
+          </p>
+        </div>
       </div>
-      <div class="col-md-4 feature-card">
-        <h3>🧠 Precision Context</h3>
-        <p>Testeranto tests conserve the LLM's limited context. This means you can get better results out of cheaper
-          models.</p>
+    </div>
+  </section>
+
+  <!-- Aider (Left) -->
+  <section class="snap-section min-vh-100 d-flex align-items-center" style="
+      background: linear-gradient(
+        135deg,
+        #ff2222 0%,
+        #ffc107 50%,
+        #ff2222 100%
+      );
+      background-size: 200% 200%;
+      color: #fff;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: gradientFlow 15s ease infinite;
+    ">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-6">
+          <h2 class="display-4 mb-4 text-center">
+            Your repo made smarter with Aider.
+          </h2>
+        </div>
+        <div class="col-md-6">
+          <p class="lead">
+            Aider is an AI pair-programming assistant that can read and edit
+            local files. While Testeranto leverages Aider for prompt execution,
+            you can also use it directly to generate tested TypeScript right
+            from the command line.
+          </p>
+        </div>
       </div>
-      <div class="col-md-4 feature-card">
-        <h3>🤖 Tests so nice they fix themselves!</h3>
-        <p>When a test fails, just press the magic robot button. Testeranto will call an LLM service with a precise
-          prompt fix it.</p>
+    </div>
+  </section>
+
+  <!-- Bundle of Joy (Right) -->
+  <section class="snap-section min-vh-100 d-flex align-items-center" style="
+      background: linear-gradient(to bottom, #d10000 0%, #330033 100%);
+      color: #fff;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      animation: vibrantPulse 8s ease infinite;
+    ">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col-md-6 order-md-2">
+          <h2 class="display-4 mb-4 text-center">A bundle of joy</h2>
+        </div>
+        <div class="col-md-6 order-md-1">
+          <p class="lead">
+            Testeranto leverages the blazingly fast TypeScript bundler esbuild
+            to build tests. Its intelligent dependency tracking means editing a
+            file only triggers re-bundling of affected tests. Add your own
+            plugins to enhance esbuild's capabilities and you can bundle just
+            about anything.
+          </p>
+        </div>
       </div>
     </div>
-  </div>
+  </section>
+
+  <!-- Demo Section -->
+  <section class="snap-section d-flex align-items-center justify-content-center min-vh-100" style="
+      background: linear-gradient(0deg, #000 0%, #222 50%, #000 100%);
+      animation: vibrantPulse 8s ease infinite;
+      color: #fff;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    ">
+    <div class="container text-center">
+      <h2 class="display-4 mb-4">A demo is worth a thousand tokens.</h2>
+      <h2 class="mb-5">
+        <a href="/testeranto/projects.html#/projects/core/tests/src%2Fcomponents%2Fpure%2FProjectPageView.test%2Findex.tsx/web"
+          style="">See it for yourself</a>
+      </h2>
+    </div>
+  </section>
+
+  <!-- Beta Program Section -->
+  <!-- <section class="snap-section d-flex align-items-center justify-content-center min-vh-100" style="background: white;
+
+      color: #fff; 
+      text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
+    <div class="container text-center">
+      <h2 class="display-4 mb-4">A demo is worth a thousand tokens.</h2>
+      <p class="lead mb-5">See testeranto in action <a
+          href="/testeranto/projects.html#/projects/core/tests/src%2Fcomponents%2Fpure%2FProjectPageView.test%2Findex.tsx/web"
+          style="color: #fff;">here</a></p>
+    </div>
+  </section> -->
 </div>

package/src/templates/frontpage.md

@@ -0,0 +1,79 @@
+---
+comment: frontpage is a series of full-page sections which snap into place as the use scrolls down. The first and last slides have centered content.  The first is white text on background, the last slide is black text on white background. The rest alternate between left and right aligned, each with a different color.
+slides:
+  - Slide 0: Hero/Jumbotron. White text on black gradient background, but no animation
+  - Slide 1: background gradient is black at top and the bottom is our coolest  color.
+  - Second to last slide: background gradient is our hottest  color at top and white at bottom
+  - Last slide: White text on black gradient background, but no animation
+  - all other slides have a background gradient. These should be sorted (roughly) from dark and cool, to hot and white.
+---
+
+#### Testeranto
+
+##### The AI-powered BDD test framework for Typescript projects.
+
+---
+
+#### Vibe Coding meets
+
+#### the Real World
+
+##### You've heard the hype, but now it's time to get down to business. Harness the raw power of LLMs to write and test TypeScript at scale and soon you will be vibing around your real-world codebase like a pro.
+
+---
+
+#### Tests so smart
+
+#### they fix themselves
+
+##### When a test fails, an LLM can auto-magically resolve it with the click of a button. It will also take care of type errors and static analysis issues, and informed by your own documentation, it can even implement new features. You might never write code again.
+
+---
+
+#### Perfectly
+
+#### Precise
+
+#### Prompts
+
+##### Testeranto's prompts conserve the LLM's limited context, filling it with only the most pertinent source files, documentation and test results. This means you can get better results from cheaper models. Testeranto fills your context so well, you can run a OpenRouter model locally and avoid paying for api credits.
+
+---
+
+#### Test results,
+
+#### artfully arranged
+
+##### Are you tired of looking at ugly test reports? Track everything in git and you can see your test results, static analysis, type errors, screenshots, features, documentation, and more in a lovely little static site that's easily deployed to GitHub Pages.
+
+---
+
+#### Frontend, backend
+
+#### and everything in between
+
+##### You can run your tests in NodeV8, or Chrome, or both! Testeranto's custom multi-runtime allows you to run tests in the environment that's suitable for your code. You no longer need to hoist your React components with jest- you can render and test them right in the browser. You can even take screenshots with puppeteer!
+
+---
+
+#### A new type of BDD
+
+##### Behavior-Driven Development specifications are written in a tightly-typed TypeScript DSL. You can edit those specs right in the browser with Github's Web VSCode editor, without ever cloning your project. It's so easy, even a stakeholder can do it.
+
+---
+
+#### Your repo made smarter with Aider.
+
+##### Aider is a pair-programming chatbot that allows models to read and edit your local files. Testeranto uses Aider to execute it's prompts, but you can use Aider directly. Generate hundreds of lines of tested typescript, for mere pennies and in seconds.
+
+---
+
+#### A bundle of joy
+
+##### Esbuild is a blazingly fast typescript bundler which is used to build testeranto's tests. It manages each test separately, so when you edit a file, only the tests which source that file are re-bundled and re-run. Add you own plugins to enhance esbuild's capabilities and you can bundle just about anything.
+
+---
+
+#### A demo is worth a thousand tokens.
+
+##### See testeranto in action [here](/testeranto/projects.html#/projects/core/tests/src%2Fcomponents%2Fpure%2FProjectPageView.test%2Findex.tsx/web)

package/src/themes.scss

@@ -1,4 +1,29 @@
-// Common theme initialization
+// Frontpage color variables
+:root {
+  --light-vibrant-bg: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 25%, #80deea 50%, #4dd0e1 75%, #00bcd4 100%);
+  --light-vibrant-text: #fff9fb;
+  
+  --dark-vibrant-bg: linear-gradient(135deg, #16213e 0%, #1a1a2e 25%, #0f3460 50%, #533483 75%, #e94560 100%);
+  --dark-vibrant-text: #fff9fb;
+  
+  --primary-vibrant-bg: #ff2d75;
+  --primary-vibrant-text: #fff9fb;
+  
+  --secondary-vibrant-bg: #00e5ff;
+  --secondary-vibrant-text: #fff9fb;
+  
+  --accent-vibrant-bg: #ffeb3b;
+  --accent-vibrant-text: #fff9fb;
+  
+  --light-bg: #fff9fb;
+  --light-text: #fff9fb;
+  
+  --text-panel-bg: rgba(0,0,0,0.3);
+  --text-panel-blur: blur(8px);
+  --text-shadow-heavy: 0 1px 3px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.6);
+  --text-shadow-light: 0 1px 2px rgba(0,0,0,0.5);
+  --panel-border: inset 0 0 0 1px rgba(255,255,255,0.2);
+}
 // :root {
 //   @each $theme, $colors in $themes {
 //     &[data-bs-theme="#{$theme}"] {
@@ -118,6 +143,16 @@ html[data-bs-theme="dark"] body {
   /* Sky Whisper */
 
   --semi-trans-bg: #292f3649;
+  
+  // Enhanced frosted glass contrast
+  --bs-heading-color: rgba(255, 255, 255, 0.95);
+  --bs-modal-color: rgba(255, 255, 255, 0.9);
+  --frosted-bg: rgba(0, 0, 0, 0.25);
+  --frosted-border: rgba(255, 255, 255, 0.15);
+  --frosted-text-shadow: 
+    0 1px 3px rgba(0, 0, 0, 0.5),
+    0 0 10px rgba(255, 255, 255, 0.2);
+  --frosted-inset-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 :root[data-bs-theme="light-grayscale"] {
@@ -626,15 +661,12 @@ body:not([data-bs-theme="daily"]) {
   }
 }
 
-@keyframes gradientBG {
-  0% {
-    background-position: 0% 50%;
+@keyframes vibrantPulse {
+  0%, 100% {
+    filter: brightness(1) saturate(1.2);
   }
   50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
+    filter: brightness(1.1) saturate(1.3);
   }
 }
 #sky {

package/src/utils/api.ts

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ISummary, IBuiltConfig } from "../Types";
-import { getLogFilesForRuntime } from "./logFiles";
+import { 
+  getLogFilesForRuntime,
+  STANDARD_LOGS 
+} from "./logFiles";
 
 export const fetchProjectData = async (projectName: string) => {
   const [summaryRes, configRes] = await Promise.all([
@@ -19,10 +22,7 @@ export const fetchTestData = async (
   filepath: string,
   runTime: string
 ): Promise<{
-  // testData: any | null;
   logs: Record<string, string>;
-  // typeErrors: string;
-  // lintErrors: string;
   error: string | null;
 }> => {
   const basePath = `reports/${projectName}/${filepath
@@ -32,37 +32,47 @@ export const fetchTestData = async (
 
   try {
     const logFiles = getLogFilesForRuntime(runTime);
+    const logs: Record<string, string> = {};
 
-    console.log("mark2", logFiles);
+    // Fetch all log files in parallel
+    const logRequests = logFiles.map(async (file) => {
+      try {
+        const response = await fetch(`${basePath}/${file}`);
+        if (!response.ok) return null;
+        
+        const content = file.endsWith('.json') 
+          ? await response.json()
+          : await response.text();
+        
+        return { file, content };
+      } catch (err) {
+        console.error(`Failed to fetch ${file}:`, err);
+        return null;
+      }
+    });
 
-    const [testRes, ...logRes] = await Promise.all([
-      fetch(`${basePath}/tests.json`),
-      ...logFiles.map((f) => fetch(`${basePath}/${f}`)),
-      fetch(`${basePath}/type_errors.txt`),
-      fetch(`${basePath}/lint_errors.txt`),
-    ]);
+    // Wait for all requests and populate logs
+    const logResults = await Promise.all(logRequests);
+    logResults.forEach(result => {
+      if (result) {
+        logs[result.file] = result.content;
+      }
+    });
 
-    const logs = {
-      "tests.json": await (await fetch(`${basePath}/tests.json`)).json(),
-      "type_errors.txt": await (
-        await fetch(`${basePath}/type_errors.txt`)
-      ).text(),
-      "lint_errors.txt": await (
-        await fetch(`${basePath}/lint_errors.txt`)
-      ).text(),
-      "exit.log": await (await fetch(`${basePath}/exit.log`)).text(),
-    };
-
-    if (runTime === "node") {
-      logs["stdout.log"] = await (await fetch(`${basePath}/stdout.log`)).text();
-      logs["stderr.log"] = await (await fetch(`${basePath}/stderr.log`)).text();
-    }
-
-    if (runTime === "web") {
-      logs["info.log"] = await (await fetch(`${basePath}/info.log`)).text();
-      logs["error.log"] = await (await fetch(`${basePath}/error.log`)).text();
-      logs["debug.log"] = await (await fetch(`${basePath}/debug.log`)).text();
-      logs["warn.log"] = await (await fetch(`${basePath}/warn.log`)).text();
+    // Ensure we fetch all standard logs
+    for (const file of Object.values(STANDARD_LOGS)) {
+      if (!logs[file]) {
+        try {
+          const response = await fetch(`${basePath}/${file}`);
+          if (response.ok) {
+            logs[file] = file.endsWith('.json') 
+              ? await response.json()
+              : await response.text();
+          }
+        } catch (err) {
+          console.error(`Failed to fetch ${file}:`, err);
+        }
+      }
     }
 
     // const logs = await logFiles.reduce(async (acc, file, i) => {
@@ -70,24 +80,17 @@ export const fetchTestData = async (
     //   return acc;
     // }, {});
 
-    if (!testRes.ok) {
+    // Check if we got any logs at all
+    if (Object.keys(logs).length === 0) {
       return {
-        // testData: null,
-        logs,
-        // typeErrors: await logRes[logFiles.length].text(),
-        // lintErrors: await logRes[logFiles.length + 1].text(),
-        error:
-          "Tests did not complete successfully. Please check the build and runtime logs for errors.",
+        logs: {},
+        error: "No test logs found. The test may not have run or the report files are missing."
       };
     }
 
-    console.log("mark1", logs);
     return {
-      // testData: await testRes.json(),
       logs,
-      // typeErrors: await logRes[logFiles.length].text(),
-      // lintErrors: await logRes[logFiles.length + 1].text(),
-      error: null,
+      error: null
     };
   } catch (err) {
     return {