@tekyzinc/gsd-t 2.73.12 → 2.73.14

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to GSD-T are documented here. Updated with each release.
 
+## [2.73.14] - 2026-04-08
+
+### Fixed (review UI — component preview rendering)
+- **Preview HTML now proxied through Vite** for module resolution. Bare module specifiers (`'vue'`, `'react'`) are transformed by Vite into resolved paths. Previously served static HTML which caused `Failed to resolve module specifier "vue"` error.
+- **Test fixture props extracted from design contracts** — reads `## Test Fixture` JSON block, strips metadata keys, passes as component props. Components now render with sample data.
+- **Playwright-verified** — ChartDonut renders 5-segment donut with center value, sublabel, and percentage labels from contract fixture data.
+
 ## [2.73.12] - 2026-04-08
 
 ### Added (review UI — isolated component preview + tier tabs)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekyzinc/gsd-t",
-  "version": "2.73.12",
+  "version": "2.73.14",
   "description": "GSD-T: Contract-Driven Development for Claude Code — 56 slash commands with headless CI/CD mode, graph-powered code analysis, real-time agent dashboard, execution intelligence, task telemetry, doc-ripple enforcement, backlog management, impact analysis, test sync, milestone archival, and PRD generation",
   "author": "Tekyz, Inc.",
   "license": "MIT",

package/scripts/gsd-t-design-review-server.js

@@ -51,8 +51,32 @@ function findGlobalStyles() {
 const FRAMEWORK = detectFramework();
 const GLOBAL_STYLES = findGlobalStyles();
 
+function extractFixtureFromContract(componentPath) {
+  // Map source path → contract path: src/components/elements/ChartDonut.vue → .gsd-t/contracts/design/elements/chart-donut.contract.md
+  const match = componentPath.match(/src\/components\/(\w+)\/(\w+)\.vue$/);
+  if (!match) return null;
+  const [, tier, name] = match;
+  // PascalCase → kebab-case
+  const kebab = name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  const contractPath = path.join(PROJECT_DIR, ".gsd-t", "contracts", "design", tier, `${kebab}.contract.md`);
+  try {
+    const content = fs.readFileSync(contractPath, "utf8");
+    const fixtureMatch = content.match(/## Test Fixture[\s\S]*?```json\s*([\s\S]*?)```/);
+    if (!fixtureMatch) return null;
+    const fixture = JSON.parse(fixtureMatch[1]);
+    // Remove metadata keys (__ prefixed)
+    const props = {};
+    for (const [k, v] of Object.entries(fixture)) {
+      if (!k.startsWith("__")) props[k] = v;
+    }
+    return props;
+  } catch { return null; }
+}
+
 function generatePreviewHtml(componentPath) {
   const linkTags = GLOBAL_STYLES.map(s => `  <link rel="stylesheet" href="/${s}">`).join("\n");
+  const fixture = extractFixtureFromContract(componentPath);
+  const propsJson = fixture ? JSON.stringify(fixture) : "{}";
 
   let mountScript;
   if (FRAMEWORK === "vue") {
@@ -60,7 +84,8 @@ function generatePreviewHtml(componentPath) {
   <script type="module">
     import { createApp } from 'vue'
     import Component from '/${componentPath}'
-    const app = createApp(Component)
+    const props = ${propsJson}
+    const app = createApp(Component, props)
     app.mount('#app')
   </script>`;
   } else if (FRAMEWORK === "react") {
@@ -69,7 +94,8 @@ function generatePreviewHtml(componentPath) {
     import React from 'react'
     import { createRoot } from 'react-dom/client'
     import Component from '/${componentPath}'
-    createRoot(document.getElementById('app')).render(React.createElement(Component))
+    const props = ${propsJson}
+    createRoot(document.getElementById('app')).render(React.createElement(Component, props))
   </script>`;
   } else {
     mountScript = `<script type="module">import '/${componentPath}'</script>`;
@@ -81,7 +107,6 @@ function generatePreviewHtml(componentPath) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Preview: ${path.basename(componentPath)}</title>
-  <script type="module" src="/@vite/client"></script>
 ${linkTags}
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -335,7 +360,7 @@ const server = http.createServer((req, res) => {
     return;
   }
 
-  // Component preview — mounts a single component in isolation via Vite
+  // Component preview — writes temp HTML to project, proxies through Vite for module resolution
   if (pathname === "/review/preview") {
     const component = parsed.query.component;
     if (!component) {
@@ -343,24 +368,44 @@ const server = http.createServer((req, res) => {
       res.end("Missing ?component= parameter");
       return;
     }
-    // Proxy this HTML through Vite so module imports resolve correctly
+    // Write preview HTML to project dir so Vite transforms bare module specifiers (e.g., 'vue' → /node_modules/.vite/deps/vue.js)
+    const previewFile = path.join(PROJECT_DIR, "__gsd-preview.html");
     const html = generatePreviewHtml(component);
-    // Send to Vite's HTML transform endpoint via proxy
+    try { fs.writeFileSync(previewFile, html); } catch { /* ignore */ }
+    // Proxy through Vite so it transforms the HTML
     const proxyOpts = {
       hostname: targetUrl.hostname,
       port: targetUrl.port,
-      path: "/__gsd_preview",
+      path: "/__gsd-preview.html",
       method: "GET",
       headers: { ...req.headers, host: `${targetUrl.hostname}:${targetUrl.port}` },
     };
-    // Vite won't know this path — serve directly but let browser resolve modules from Vite
-    const buf = Buffer.from(html, "utf8");
-    res.writeHead(200, {
-      "Content-Type": "text/html",
-      "Content-Length": buf.length,
-      "Cache-Control": "no-cache",
+    const proxyReq = http.request(proxyOpts, (proxyRes) => {
+      const chunks = [];
+      proxyRes.on("data", (chunk) => chunks.push(chunk));
+      proxyRes.on("end", () => {
+        let transformed = Buffer.concat(chunks).toString("utf8");
+        // Inject review overlay if not already present
+        if (!transformed.includes("review/inject.js")) {
+          transformed = transformed.replace("</body>", '<script src="/review/inject.js"></script>\n</body>');
+        }
+        const buf = Buffer.from(transformed, "utf8");
+        res.writeHead(proxyRes.statusCode, {
+          ...proxyRes.headers,
+          "content-length": buf.length,
+          "cache-control": "no-cache",
+        });
+        res.end(buf);
+        // Clean up temp file
+        try { fs.unlinkSync(previewFile); } catch { /* ignore */ }
+      });
+    });
+    proxyReq.on("error", () => {
+      res.writeHead(502, { "Content-Type": "text/html" });
+      res.end("<h1>Dev server unreachable</h1>");
+      try { fs.unlinkSync(previewFile); } catch { /* ignore */ }
     });
-    res.end(buf);
+    proxyReq.end();
     return;
   }