veryfront 0.1.26 → 0.1.28

package/src/src/html/styles-builder/project-css-cache.ts

@@ -18,6 +18,7 @@ import {
   resolveStylesheet,
 } from "./tailwind-compiler-utils.js";
 import { cacheCSSAsync, DEFAULT_STYLESHEET } from "./css-hash-cache.js";
+import { TAILWIND_VERSION } from "../../utils/constants/cdn.js";
 
 const projectCssCacheLog = logger.component("project-css-cache");
 const tailwindLog = logger.component("tailwind");
@@ -40,9 +41,17 @@ export interface ProjectCSSRequestContext {
   projectSlug: string;
   stylesheet: string;
   candidatesHash: string;
+  profileHash: string;
+  environment: string;
   cacheKey: string;
 }
 
+export interface ProjectCSSProfile {
+  minify?: boolean;
+  environment?: string;
+  buildMode?: "development" | "production";
+}
+
 // ============================================================================
 // Constants
 // ============================================================================
@@ -116,15 +125,29 @@ export function createProjectCSSRequestContext(
   projectSlug: string,
   stylesheet: string | undefined,
   candidates: Set<string>,
+  profile?: ProjectCSSProfile,
 ): ProjectCSSRequestContext {
   const resolvedStylesheet = resolveStylesheet(stylesheet, DEFAULT_STYLESHEET);
   const stylesheetHash = hashString(resolvedStylesheet);
   const candidatesHash = hashCandidates(candidates);
+  const environment = profile?.environment ?? "preview";
+  const profileHash = hashString(
+    JSON.stringify({
+      cacheSchema: "v2",
+      tailwindVersion: TAILWIND_VERSION,
+      minify: profile?.minify ?? false,
+      buildMode: profile?.buildMode ?? "production",
+      environment,
+    }),
+  );
+
   return {
     projectSlug,
     stylesheet: resolvedStylesheet,
     candidatesHash,
-    cacheKey: `${projectSlug}:${stylesheetHash}`,
+    profileHash,
+    environment,
+    cacheKey: `${projectSlug}:${environment}:${stylesheetHash}:${candidatesHash}:${profileHash}`,
   };
 }
 

package/src/src/html/styles-builder/tailwind-compiler.ts

@@ -43,6 +43,11 @@ export {
 } from "./project-css-cache.js";
 
 const logger = serverLogger.component("tailwind");
+const inFlightProjectCSS = new Map<
+  string,
+  Promise<{ css: string; hash: string; fromCache: boolean }>
+>();
+const inFlightRegeneration = new Map<string, Promise<string | undefined>>();
 
 export interface TailwindResult {
   css: string;
@@ -51,6 +56,8 @@ export interface TailwindResult {
 
 export interface GenerateOptions {
   minify?: boolean;
+  environment?: string;
+  buildMode?: "development" | "production";
 }
 
 export interface CSSErrorInfo {
@@ -69,7 +76,11 @@ export async function getProjectCSS(
   candidates: Set<string>,
   options?: GenerateOptions,
 ): Promise<{ css: string; hash: string; fromCache: boolean }> {
-  const context = createProjectCSSRequestContext(projectSlug, stylesheet, candidates);
+  const context = createProjectCSSRequestContext(projectSlug, stylesheet, candidates, {
+    minify: options?.minify,
+    environment: options?.environment,
+    buildMode: options?.buildMode,
+  });
 
   const localHit = await tryGetProjectCSSFromLocalFallback(context, candidates);
   if (localHit) return localHit;
@@ -81,36 +92,55 @@ export async function getProjectCSS(
   const distributedHit = await tryGetProjectCSSFromDistributedCache(context, candidates);
   if (distributedHit) return distributedHit;
 
-  // Generate fresh CSS
-  const result = await generateTailwindCSS(context.stylesheet, candidates, options);
-
-  if (result.error) {
-    const formatted = formatCSSError(result.error);
-    logger.error("Project CSS generation failed", {
+  const inFlight = inFlightProjectCSS.get(context.cacheKey);
+  if (inFlight) {
+    logger.debug("Project CSS compile single-flight hit", {
       projectSlug: context.projectSlug,
-      error: formatted.message,
-      suggestion: formatted.suggestion,
+      cacheKeySuffix: context.cacheKey.slice(-24),
     });
-    throw new Error(
-      `[tailwind] ${formatted.title}: ${formatted.message} Suggestion: ${formatted.suggestion}`,
-    );
+    return inFlight;
   }
 
-  const hash = hashCSS(result.css);
-  await storeProjectCSS(
-    context,
-    { css: result.css, hash, candidatesHash: context.candidatesHash },
-    candidates,
-  );
+  const generationPromise = (async () => {
+    // Generate fresh CSS
+    const result = await generateTailwindCSS(context.stylesheet, candidates, options);
 
-  logger.debug("Project CSS generated", {
-    projectSlug: context.projectSlug,
-    hash,
-    cssLength: result.css.length,
-    candidateCount: candidates.size,
-  });
+    if (result.error) {
+      const formatted = formatCSSError(result.error);
+      logger.error("Project CSS generation failed", {
+        projectSlug: context.projectSlug,
+        error: formatted.message,
+        suggestion: formatted.suggestion,
+      });
+      throw new Error(
+        `[tailwind] ${formatted.title}: ${formatted.message} Suggestion: ${formatted.suggestion}`,
+      );
+    }
+
+    const hash = hashCSS(result.css);
+    await storeProjectCSS(
+      context,
+      { css: result.css, hash, candidatesHash: context.candidatesHash },
+      candidates,
+    );
+
+    logger.debug("Project CSS generated", {
+      projectSlug: context.projectSlug,
+      hash,
+      cssLength: result.css.length,
+      candidateCount: candidates.size,
+    });
+
+    return { css: result.css, hash, fromCache: false };
+  })();
+
+  inFlightProjectCSS.set(context.cacheKey, generationPromise);
 
-  return { css: result.css, hash, fromCache: false };
+  try {
+    return await generationPromise;
+  } finally {
+    inFlightProjectCSS.delete(context.cacheKey);
+  }
 }
 
 // ============================================================================
@@ -128,7 +158,10 @@ export async function getProjectCSS(
  * @returns The regenerated CSS if inputs are cached and hash matches, undefined otherwise
  */
 export async function regenerateCSSByHash(expectedHash: string): Promise<string | undefined> {
-  return await withSpan(
+  const inFlight = inFlightRegeneration.get(expectedHash);
+  if (inFlight) return await inFlight;
+
+  const regenerationPromise = withSpan(
     SpanNames.HTML_REGENERATE_CSS_BY_HASH,
     async () => {
       const inputs = await resolveRegenerationInputs(expectedHash);
@@ -175,6 +208,14 @@ export async function regenerateCSSByHash(expectedHash: string): Promise<string
     },
     { "css.hash": expectedHash },
   );
+
+  inFlightRegeneration.set(expectedHash, regenerationPromise);
+
+  try {
+    return await regenerationPromise;
+  } finally {
+    inFlightRegeneration.delete(expectedHash);
+  }
 }
 
 // ============================================================================

package/src/src/modules/react-loader/css-import-collector.ts

@@ -0,0 +1,50 @@
+/**
+ * CSS Import Collector - Request-scoped CSS import tracking for SSR
+ *
+ * Collects CSS import paths discovered during module loading using
+ * AsyncLocalStorage for proper isolation between concurrent requests.
+ *
+ * Usage:
+ *   const { result, cssImports } = await runWithCSSCollector(() => loadModules(...));
+ *   // cssImports contains absolute paths to CSS files discovered during loading
+ */
+
+import { AsyncLocalStorage } from "node:async_hooks";
+
+interface CSSCollectorStore {
+  imports: Set<string>;
+}
+
+const cssStorage = new AsyncLocalStorage<CSSCollectorStore>();
+
+/**
+ * Run a function with CSS import collection enabled.
+ * Returns the function result and all collected CSS import paths.
+ */
+export async function runWithCSSCollector<T>(
+  fn: () => T | Promise<T>,
+): Promise<{ result: T; cssImports: string[] }> {
+  const store: CSSCollectorStore = { imports: new Set() };
+  const result = await cssStorage.run(store, fn);
+  return { result, cssImports: [...store.imports] };
+}
+
+/**
+ * Register a CSS import path discovered during module loading.
+ * No-op if called outside of a runWithCSSCollector context.
+ */
+export function registerCSSImport(absolutePath: string): void {
+  const store = cssStorage.getStore();
+  if (!store) return;
+  store.imports.add(absolutePath);
+}
+
+/**
+ * Get all CSS imports collected so far in the current context.
+ * Returns empty array if called outside of a runWithCSSCollector context.
+ */
+export function getCSSImports(): string[] {
+  const store = cssStorage.getStore();
+  if (!store) return [];
+  return [...store.imports];
+}

package/src/src/modules/react-loader/ssr-module-loader/loader.ts

@@ -52,6 +52,7 @@ import { SSRCircuitBreaker } from "./ssr-circuit-breaker.js";
 import { SSRDependencyValidator } from "./ssr-dependency-validator.js";
 import { preflightLocalImports } from "./preflight-imports.js";
 import { resolveVfModuleImports } from "./vf-module-resolver.js";
+import { registerCSSImport } from "../css-import-collector.js";
 
 const logger = rendererLogger.component("ssr-module-loader");
 
@@ -480,6 +481,12 @@ export class SSRModuleLoader {
         this.options.adapter,
       );
 
+      // Register CSS imports for later inclusion in HTML output.
+      // CSS files are not JS modules — skip them in the dependency graph.
+      for (const cssImport of parseResult.cssImports) {
+        registerCSSImport(cssImport.absolutePath);
+      }
+
       if (parseResult.missing.length > 0) {
         this.depValidator.missingDependencies.push(...parseResult.missing);
       }

package/src/src/modules/react-loader/ssr-module-loader/ssr-dependency-validator.ts

@@ -9,6 +9,7 @@
 
 import type { CrossProjectImport, MissingImport } from "../../../transforms/esm/import-parser.js";
 import { parseLocalImports } from "../../../transforms/esm/import-parser.js";
+import { registerCSSImport } from "../css-import-collector.js";
 import { createFileSystem } from "../../../platform/compat/fs.js";
 import { createError, toError } from "../../../errors/veryfront-error.js";
 import { rendererLogger } from "../../../utils/index.js";
@@ -92,6 +93,11 @@ export class SSRDependencyValidator {
       this.adapter,
     );
 
+    // Register CSS imports from cached modules for HTML inclusion
+    for (const cssImport of parseResult.cssImports) {
+      registerCSSImport(cssImport.absolutePath);
+    }
+
     if (parseResult.missing.length > 0) {
       this.missingDependencies.push(...parseResult.missing);
     }

package/src/src/platform/adapters/fs/factory.ts

@@ -19,6 +19,7 @@ import {
 } from "../../../rendering/snippet-renderer.js";
 import { clearRendererCacheForProject } from "../../../rendering/renderer.js";
 import { invalidateProjectCSS } from "../../../html/styles-builder/tailwind-compiler.js";
+import { invalidateProjectCandidateManifests } from "../../../rendering/orchestrator/css-candidate-manifest.js";
 
 export function createFSAdapter(config: FSAdapterConfig): Promise<FSAdapter> {
   const type = config.type ?? "local";
@@ -51,7 +52,10 @@ export function createFSAdapter(config: FSAdapterConfig): Promise<FSAdapter> {
             clearRouterDetectionCacheForProject,
             clearSnippetCacheForProject,
             clearRendererCacheForProject,
-            clearProjectCSSCache: invalidateProjectCSS,
+            clearProjectCSSCache: (projectSlug: string) => {
+              invalidateProjectCSS(projectSlug);
+              invalidateProjectCandidateManifests(projectSlug);
+            },
             ...config.invalidationCallbacks,
           },
         };

package/src/src/platform/adapters/fs/veryfront/websocket-manager.ts

@@ -54,6 +54,7 @@ export class WebSocketManager {
 
   private wsConnectionId: string | null = null;
   private wsConsecutiveFailures = 0;
+  private disposed = false;
   private pokeMetrics = {
     received: 0,
     invalidationsTriggered: 0,
@@ -72,6 +73,8 @@ export class WebSocketManager {
   }
 
   connect(projectId: string): void {
+    if (this.disposed) return;
+
     this.cleanupTimers();
 
     if (this.wsConsecutiveFailures >= WS_RECONNECT_MAX_FAILURES) {
@@ -118,21 +121,28 @@ export class WebSocketManager {
       };
 
       this.ws.onclose = () => {
+        this.wsConnectionId = null;
+        this.cleanupTimers();
+
+        if (this.disposed) return;
+
         this.wsConsecutiveFailures++;
         const delay = this.getReconnectDelay();
         logger.debug("WebSocket closed, reconnecting", {
           delayMs: delay,
-          connectionId: this.wsConnectionId,
           totalPokesReceived: this.pokeMetrics.received,
           consecutiveFailures: this.wsConsecutiveFailures,
         });
-        this.wsConnectionId = null;
-        this.cleanupTimers();
         this.wsReconnectTimer = dntShim.setTimeout(() => this.connect(projectId), delay);
       };
 
-      this.ws.onerror = (error) => {
-        logger.warn("WebSocket error", { error });
+      this.ws.onerror = (event) => {
+        logger.warn("WebSocket error", {
+          type: event.type,
+          url: (event.target as WebSocket)?.url?.replace(/token=[^&]+/, "token=***"),
+          readyState: (event.target as WebSocket)?.readyState,
+          consecutiveFailures: this.wsConsecutiveFailures,
+        });
       };
     } catch (error) {
       this.wsConsecutiveFailures++;
@@ -152,6 +162,7 @@ export class WebSocketManager {
   }
 
   dispose(): void {
+    this.disposed = true;
     this.cleanupTimers();
 
     if (this.invalidationTimer) {
@@ -166,6 +177,11 @@ export class WebSocketManager {
 
     if (!this.ws) return;
 
+    // Detach handlers before closing to prevent onclose from scheduling a reconnect
+    this.ws.onclose = null;
+    this.ws.onerror = null;
+    this.ws.onmessage = null;
+
     try {
       this.ws.close();
     } catch (error) {

package/src/src/platform/compat/process.ts

@@ -361,7 +361,10 @@ export function getOsType(): string {
 /**
  * Register a signal handler (SIGINT, SIGTERM) for graceful shutdown
  */
-export function onSignal(signal: "SIGINT" | "SIGTERM", handler: () => void): void {
+export function onSignal(
+  signal: "SIGINT" | "SIGTERM",
+  handler: () => void,
+): void {
   if (IS_DENO) {
     dntShim.Deno.addSignalListener(signal, handler);
     return;
@@ -397,14 +400,35 @@ export function onGlobalError(
 
   if (!hasNodeProcess) return;
 
+  const handleNodeGlobalError = (
+    error: Error,
+    type: "uncaughtException" | "unhandledRejection",
+  ): void => {
+    let shouldPreventExit = false;
+    try {
+      shouldPreventExit = onError(error, type) === true;
+    } catch (handlerError) {
+      const handlerException = handlerError instanceof Error
+        ? handlerError
+        : new Error(String(handlerError));
+      console.error("Global error handler threw while processing", type, handlerException);
+    }
+
+    if (shouldPreventExit) return;
+
+    // Node/Bun suppress default fatal behavior when a listener is registered.
+    // If the callback did not explicitly handle the error, exit to preserve
+    // expected fatal semantics for uncaught exceptions and unhandled rejections.
+    nodeProcess!.exit(1);
+  };
+
   nodeProcess!.on("uncaughtException", (error: Error) => {
-    onError(error, "uncaughtException");
-    // Note: In Node.js, uncaughtException doesn't exit by default if handler is registered
+    handleNodeGlobalError(error, "uncaughtException");
   });
 
   nodeProcess!.on("unhandledRejection", (reason: unknown) => {
     const error = reason instanceof Error ? reason : new Error(String(reason));
-    onError(error, "unhandledRejection");
+    handleNodeGlobalError(error, "unhandledRejection");
   });
 }
 

package/src/src/proxy/main.ts

@@ -581,19 +581,40 @@ function router(req: dntShim.Request): Promise<dntShim.Response> {
   return forwardToServer(req);
 }
 
+// Create server before signal registration so early SIGTERM/SIGINT can close it safely.
+const server = createHttpServer();
+
 // Graceful shutdown
-async function shutdown(): Promise<void> {
-  proxyLogger.info("Shutting down");
-  rendererRouter?.close();
-  serverResolver.close();
-  await proxyHandler.close();
-  await shutdownOTLP();
-  proxyLogger.info("Closed connections");
-  exit(0);
+let shuttingDown = false;
+async function shutdown(signal: "SIGINT" | "SIGTERM"): Promise<void> {
+  if (shuttingDown) return;
+  shuttingDown = true;
+
+  proxyLogger.info(`Received ${signal}, shutting down`);
+
+  try {
+    await server.close();
+    rendererRouter?.close();
+    serverResolver.close();
+    await proxyHandler.close();
+    await shutdownOTLP();
+    proxyLogger.info("Closed connections");
+  } catch (error) {
+    proxyLogger.error("Error while shutting down proxy", error);
+  } finally {
+    exit(0);
+  }
 }
 
-onSignal("SIGINT", shutdown);
-onSignal("SIGTERM", shutdown);
+const handleSignal = (signal: "SIGINT" | "SIGTERM"): void => {
+  void shutdown(signal).catch((error) => {
+    proxyLogger.error("Unhandled shutdown error", { signal }, error);
+    exit(1);
+  });
+};
+
+onSignal("SIGINT", () => handleSignal("SIGINT"));
+onSignal("SIGTERM", () => handleSignal("SIGTERM"));
 
 // Wait for sticky-session router to resolve initial target list
 await rendererRouter?.ready();
@@ -607,6 +628,5 @@ proxyLogger.debug("Starting proxy server (split mode)", {
   apiBaseUrl: config.apiBaseUrl,
 });
 
-// Create and start the HTTP server
-const server = createHttpServer();
+// Start the HTTP server
 await server.serve(router, { port: PORT, hostname: HOST });

package/src/src/proxy/token-manager.ts

@@ -5,6 +5,15 @@ import { ProxySpanNames, withSpan } from "./tracing.js";
 
 export type TokenScope = "preview" | "production";
 
+interface NegativeCacheEntry {
+  status: number;
+  message: string;
+  cachedAt: number;
+}
+
+const NEGATIVE_CACHE_TTL = 5 * 60 * 1000; // 5 minutes
+const NEGATIVE_CACHE_MAX_SIZE = 1000;
+
 export interface OAuthConfig {
   apiBaseUrl: string;
   apiClientId: string;
@@ -21,6 +30,7 @@ export interface TokenManagerOptions {
 export class TokenManager {
   private cache: TokenCache;
   private pendingRequests = new Map<string, Promise<string>>();
+  private negativeCache = new Map<string, NegativeCacheEntry>();
   private refreshBuffer: number;
 
   constructor(
@@ -42,6 +52,14 @@ export class TokenManager {
     return withSpan(
       ProxySpanNames.PROXY_TOKEN_FETCH,
       async () => {
+        const negEntry = this.negativeCache.get(cacheKey);
+        if (negEntry) {
+          if (Date.now() - negEntry.cachedAt < NEGATIVE_CACHE_TTL) {
+            throw new Error(negEntry.message);
+          }
+          this.negativeCache.delete(cacheKey);
+        }
+
         const cached = await this.cache.get(cacheKey);
         if (cached && this.isTokenValid(cached)) return cached.token;
 
@@ -67,10 +85,13 @@ export class TokenManager {
   }
 
   async invalidateToken(scope: TokenScope, projectSlug?: string): Promise<void> {
-    await this.cache.delete(this.getCacheKey(scope, projectSlug));
+    const cacheKey = this.getCacheKey(scope, projectSlug);
+    this.negativeCache.delete(cacheKey);
+    await this.cache.delete(cacheKey);
   }
 
   async clearCache(): Promise<void> {
+    this.negativeCache.clear();
     await this.cache.clear();
   }
 
@@ -101,13 +122,32 @@ export class TokenManager {
       ? this.config.previewApiClientSecret
       : this.config.apiClientSecret;
 
-    const response = await fetchOAuthToken({
-      apiBaseUrl: this.config.apiBaseUrl,
-      apiClientId,
-      apiClientSecret,
-      projectSlug,
-      customDomain,
-    });
+    let response: TokenResponse;
+    try {
+      response = await fetchOAuthToken({
+        apiBaseUrl: this.config.apiBaseUrl,
+        apiClientId,
+        apiClientSecret,
+        projectSlug,
+        customDomain,
+      });
+    } catch (error) {
+      const status = this.parseStatusFromError(error);
+      if (status === 400 || status === 404) {
+        const projectKey = projectSlug || customDomain;
+        const cacheKey = this.getCacheKey(scope, projectKey);
+        if (this.negativeCache.size >= NEGATIVE_CACHE_MAX_SIZE) {
+          const oldest = this.negativeCache.keys().next().value;
+          if (oldest !== undefined) this.negativeCache.delete(oldest);
+        }
+        this.negativeCache.set(cacheKey, {
+          status,
+          message: error instanceof Error ? error.message : String(error),
+          cachedAt: Date.now(),
+        });
+      }
+      throw error;
+    }
 
     const projectKey = projectSlug || customDomain;
 
@@ -121,6 +161,12 @@ export class TokenManager {
     return response.access_token;
   }
 
+  private parseStatusFromError(error: unknown): number | null {
+    const message = error instanceof Error ? error.message : String(error);
+    const match = message.match(/failed: (\d+)/);
+    return match ? Number(match[1]) : null;
+  }
+
   private calculateExpiresAt(response: TokenResponse): number {
     if (response.expires_in) return Date.now() + response.expires_in * 1000;