frontend: fix StackBlitz launcher (was opening default Next.js starter)

Bug: the previous form-POST to https://stackblitz.com/run was being
silently rejected and StackBlitz fell back to opening their default
'stackblitz-starters/nextjs' template instead of the user's actual code
(verified in user screenshot — file tree shows next.config.js / postcss
/ tailwind.config.ts which we never generate).

Root cause: the bare /run endpoint has known reliability issues with
SameSite cookie / referrer policy in modern browsers; payloads silently
404 and StackBlitz redirects to a default starter.

Fix:
- Load the official @stackblitz/sdk@1.11.0 UMD bundle from unpkg.
- launchInStackBlitz() now prefers sdk.openProject({...}, {newWindow,
openFile}) which uses a maintained iframe handshake. Form-POST is
kept as a fallback if the SDK script fails to load (offline / strict
CSP).
- chooseEntryFile() picks the most likely landing file (app/page.tsx,
src/App.tsx, index.html, ...) so users land on the right tab.

Bonus UX fix for the secondary complaint (model produced HTML when
user asked for Next.js):
- Extracted detectProjectKind() so the same logic powers both the
builder and a new pill on every code block: 'HTML' / 'Next.js' /
'React' / 'Node.js' / 'Snippet', color-coded.
- Users now SEE that the model output HTML even though they asked
for Next.js — set expectations honestly instead of having the
launcher silently mis-template.

Files:
- frontend/index.html: load sdk.umd.js before app.js
- frontend/app.js: new detectProjectKind / projectKindLabel /
chooseEntryFile, refactored launchInStackBlitz with SDK + fallback,
renderMarkdown shows kind pill in code-block header
- frontend/styles.css: .md-lang wrapper + .md-kind pill with
per-kind colors (purple Next, blue React, green Node, orange HTML)

frontend/app.js

@@ -277,21 +277,44 @@
     return /<!doctype|<html|^\s*import |^\s*export |^\s*function |^\s*const |^\s*class /im.test(code);
   }
 
+  // Detect the kind of project the model produced. Returns one of:
+  //   'next' | 'react' | 'node' | 'html' | 'snippet'
+  // The detection has to be permissive but ordered (Next.js before React
+  // before Node) so a Next.js file with `import 'react'` doesn't mis-route.
+  function detectProjectKind(code, lang) {
+    const l = (lang || '').toLowerCase();
+    const looksLikeNext  = /from ['"]next\/|next\.config|app\/page\.[jt]sx|pages\/index|getServerSideProps|getStaticProps/i.test(code);
+    const looksLikeReact = /from ['"]react['"]|ReactDOM\.|useState\(|useEffect\(|<\w+\s+\w+={/i.test(code);
+    const looksLikeNode  = /^\s*(?:const|import)\s+\w+\s*=?\s*require\(|process\.env|module\.exports/m.test(code);
+    const isHtmlDoc      = /<!doctype|<html/i.test(code);
+
+    if (looksLikeNext) return 'next';
+    if (looksLikeReact || l === 'jsx' || l === 'tsx') return 'react';
+    if (looksLikeNode || l === 'json') return 'node';
+    if (isHtmlDoc || l === 'html' || l === 'markup') return 'html';
+    return 'snippet';
+  }
+
+  // Human-friendly label shown on the code-block header pill so users see
+  // exactly what we detected (and why a launcher might open as HTML when
+  // they asked for Next.js).
+  function projectKindLabel(kind) {
+    return ({ next: 'Next.js', react: 'React', node: 'Node.js', html: 'HTML', snippet: 'Snippet' })[kind] || kind;
+  }
+
   // Decide which StackBlitz template + file layout to use based on what
   // the model produced. We try to be permissive — anything that looks
   // like a React/Next/Node project goes into the WebContainer-backed
   // 'node' template; raw HTML uses the static 'html' template.
   function buildStackBlitzProject(code, lang) {
+    const kind = detectProjectKind(code, lang);
     const l = (lang || '').toLowerCase();
-    const looksLikeNext = /from ['"]next\/|next\.config|app\/page\.[jt]sx|pages\/index/i.test(code);
-    const looksLikeReact = /from ['"]react['"]|ReactDOM\.|useState\(|useEffect\(|<\w+\s+\w+={/i.test(code);
-    const looksLikeNode  = /^\s*(?:const|import)\s+\w+\s*=?\s*require\(|process\.env|module\.exports/m.test(code);
     const isHtmlDoc      = /<!doctype|<html/i.test(code);
 
     const title = 'MINDI generated project';
     const description = 'Generated by MINDI 1.5 Vision-Coder';
 
-    if (looksLikeNext) {
+    if (kind === 'next') {
       // Minimal Next.js 14 app-router project.
       return {
         title, description,
@@ -323,7 +346,7 @@
       };
     }
 
-    if (looksLikeReact || l === 'jsx' || l === 'tsx') {
+    if (kind === 'react') {
       // Vite + React project (faster boot in WebContainer than CRA).
       const ext = (l === 'tsx' || /\:\s*\w+(\[\])?/.test(code)) ? 'tsx' : 'jsx';
       return {
@@ -348,7 +371,7 @@
       };
     }
 
-    if (looksLikeNode || l === 'json') {
+    if (kind === 'node') {
       return {
         title, description,
         template: 'node',
@@ -362,7 +385,7 @@
       };
     }
 
-    if (isHtmlDoc || l === 'html' || l === 'markup') {
+    if (kind === 'html') {
       return {
         title, description,
         template: 'html',
@@ -383,13 +406,49 @@
     };
   }
 
-  // Hand the project off to stackblitz.com via a hidden form POST.
-  // The new tab opens the cloud IDE with all files pre-loaded and the
-  // dev server booting. For 'node' templates this means a real Node.js
-  // runtime in the browser via WebContainers — yes, that includes
-  // 'npm install' for Next.js / React projects.
+  // Pick the file the user most likely wants to land on when StackBlitz opens.
+  function chooseEntryFile(proj) {
+    const files = proj.files || {};
+    const preferred = [
+      'app/page.tsx', 'app/page.jsx',
+      'src/App.tsx', 'src/App.jsx',
+      'pages/index.tsx', 'pages/index.jsx',
+      'index.html', 'index.js',
+    ];
+    for (const p of preferred) if (files[p]) return p;
+    return Object.keys(files)[0] || 'index.html';
+  }
+
+  // Hand the project off to stackblitz.com. We prefer the official SDK
+  // (https://developer.stackblitz.com/platform/api/javascript-sdk) because
+  // the bare /run form-POST endpoint silently rejects some payloads and
+  // falls back to opening their default Next.js starter — exactly what
+  // the user reported. The SDK uses an iframe handshake that's more
+  // reliable across browser SameSite / referrer policies.
+  // Form POST is kept as a fallback if the SDK script fails to load.
   function launchInStackBlitz(code, lang) {
     const proj = buildStackBlitzProject(code, lang);
+    const sdk = window.StackBlitzSDK;
+
+    if (sdk && typeof sdk.openProject === 'function') {
+      try {
+        sdk.openProject(
+          {
+            title: proj.title,
+            description: proj.description,
+            template: proj.template,
+            files: proj.files,
+          },
+          { newWindow: true, openFile: chooseEntryFile(proj) }
+        );
+        return;
+      } catch (err) {
+        console.warn('StackBlitz SDK launch failed, falling back to form POST:', err);
+      }
+    }
+
+    // Fallback: classic form POST. Less reliable but works without the SDK
+    // script (useful if it's blocked by an offline / strict-CSP environment).
     const form = document.createElement('form');
     form.action = 'https://stackblitz.com/run';
     form.method = 'POST';
@@ -407,7 +466,6 @@
     add('project[title]',       proj.title);
     add('project[description]', proj.description);
     add('project[template]',    proj.template);
-    add('project[settings][compile][trigger]', 'auto');
     Object.entries(proj.files).forEach(([path, content]) => {
       add(`project[files][${path}]`, content);
     });
@@ -502,6 +560,10 @@
         const safe = escapeHtml(seg.value);
         const dataCode = escapeAttr(seg.value);
         const runnable = isCloudRunnable(seg.value, lang);
+        const kind = runnable ? detectProjectKind(seg.value, lang) : null;
+        const kindPill = kind
+          ? `<span class="md-kind md-kind--${kind}" title="Project kind detected from the generated code. The launchers below open this exact code, even if it doesn't match what you originally asked for.">${projectKindLabel(kind)}</span>`
+          : '';
         const launchBtns = runnable
           ? (
               `<button class="md-run" data-code="${dataCode}" data-lang="${escapeAttr(lang)}" type="button" title="Run this code on stackblitz.com (real Node.js / WebContainer sandbox, supports Next.js / React / Node)">\u25B6 StackBlitz</button>` +
@@ -511,7 +573,7 @@
         return (
           `<pre class="md-code-block">` +
             `<div class="md-code-head">` +
-              `<span>${escapeHtml(lang)}</span>` +
+              `<span class="md-lang">${escapeHtml(lang)}${kindPill}</span>` +
               `<div class="md-code-actions">` +
                 launchBtns +
                 `<button class="md-copy" data-code="${dataCode}" type="button">Copy</button>` +

frontend/index.html

@@ -344,6 +344,12 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
 
+  <!-- StackBlitz SDK — drives the "Run in StackBlitz" launcher.
+       The form-POST /run endpoint is unreliable (gets silently rejected
+       and falls back to the default Next.js starter); the SDK's hidden
+       iframe handshake is the maintained, robust path. -->
+  <script src="https://unpkg.com/@stackblitz/sdk@1.11.0/bundles/sdk.umd.js"></script>
+
   <script src="sandbox.js"></script>
   <script src="agent.js"></script>
   <script src="app.js"></script>

frontend/styles.css

@@ -686,6 +686,28 @@ body.sidebar-open .scrim { opacity: 1; pointer-events: auto; }
   border-bottom: 1px solid var(--border);
 }
 .md-code-head span:first-child { color: var(--c-code); font-weight: 500; }
+.md-lang {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.md-kind {
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: .04em;
+  text-transform: none;
+  padding: 2px 7px;
+  border-radius: 999px;
+  border: 1px solid currentColor;
+  background: rgba(255, 255, 255, .03);
+  cursor: help;
+}
+.md-kind--next    { color: #f8fafc; }
+.md-kind--react   { color: #60a5fa; }
+.md-kind--node    { color: #34d399; }
+.md-kind--html    { color: #fb923c; }
+.md-kind--snippet { color: var(--text-mute); }
 .md-code-actions {
   display: flex;
   gap: 6px;