veryfront 0.0.83 → 0.0.86

package/esm/src/cli/commands/dev.js

@@ -157,8 +157,8 @@ export function devCommand(options) {
             const serverUrl = `http://veryfront.me:${finalPort}`;
             console.log();
             console.log(banner({
-                title: "Veryfront",
-                subtitle: "is now running",
+                title: "Veryfront Code",
+                subtitle: "is running",
                 info: {
                     url: serverUrl,
                     ...(projectSlug ? { project: projectSlug } : {}),

package/esm/src/cli/commands/new.js

@@ -102,7 +102,7 @@ export async function newCommand(name, options = {}, env = getRuntimeEnv()) {
         exitProcess(1);
         return;
     }
-    const tui = createTui({ title: "Veryfront", showLogs: true });
+    const tui = createTui({ title: "Veryfront Code", showLogs: true });
     const restore = interceptConsole(tui);
     const localUrl = `http://${name}.veryfront.me:${port}`;
     const prodUrl = `https://${slug}.veryfront.com`;

package/esm/src/cli/ui/colors.d.ts

@@ -20,4 +20,12 @@ export declare const successBold: (text: string) => string;
 export declare const errorBold: (text: string) => string;
 export { RESET as reset };
 export declare function animatedMatrix(frame: number): string;
+/**
+ * Apply shimmer effect to text - creates a wave of brightness moving across
+ * @param text The text to shimmer
+ * @param frame Current animation frame (increments over time)
+ * @param waveWidth Width of the bright wave (default: 3 characters)
+ * @returns Text with shimmer effect applied
+ */
+export declare function shimmer(text: string, frame: number, waveWidth?: number): string;
 //# sourceMappingURL=colors.d.ts.map

package/esm/src/cli/ui/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/src/cli/ui/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D,wBAAgB,aAAa,IAAI,UAAU,CA+B1C;AAED,wBAAgB,cAAc,IAAI,OAAO,CAExC;AASD,wBAAgB,eAAe,IAAI,IAAI,CAEtC;AAgED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGvD;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGzD;AAMD,eAAO,MAAM,KAAK,SAJsC,MAAM,WAIxB,CAAC;AACvC,eAAO,MAAM,OAAO,SAJsC,MAAM,WAItB,CAAC;AAE3C,eAAO,MAAM,OAAO,SAPoC,MAAM,WAOvB,CAAC;AACxC,eAAO,MAAM,KAAK,SARsC,MAAM,WAQzB,CAAC;AACtC,eAAO,MAAM,OAAO,SAToC,MAAM,WASvB,CAAC;AACxC,eAAO,MAAM,KAAK,SAVsC,MAAM,WAUvB,CAAC;AAExC,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,WAA+B,CAAC;AACjE,eAAO,MAAM,GAAG,GAAI,MAAM,MAAM,WAA+B,CAAC;AAChE,eAAO,MAAM,MAAM,GAAI,MAAM,MAAM,WAA+B,CAAC;AACnE,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,WAA+B,CAAC;AAEtE,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,WAAsB,CAAC;AAC7D,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,WAAwB,CAAC;AACjE,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,WAAsB,CAAC;AAE7D,OAAO,EAAE,KAAK,IAAI,KAAK,EAAE,CAAC;AAS1B,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGpD"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/src/cli/ui/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D,wBAAgB,aAAa,IAAI,UAAU,CA+B1C;AAED,wBAAgB,cAAc,IAAI,OAAO,CAExC;AASD,wBAAgB,eAAe,IAAI,IAAI,CAEtC;AAgED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGvD;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGzD;AAMD,eAAO,MAAM,KAAK,SAJsC,MAAM,WAIxB,CAAC;AACvC,eAAO,MAAM,OAAO,SAJsC,MAAM,WAItB,CAAC;AAE3C,eAAO,MAAM,OAAO,SAPoC,MAAM,WAOvB,CAAC;AACxC,eAAO,MAAM,KAAK,SARsC,MAAM,WAQzB,CAAC;AACtC,eAAO,MAAM,OAAO,SAToC,MAAM,WASvB,CAAC;AACxC,eAAO,MAAM,KAAK,SAVsC,MAAM,WAUvB,CAAC;AAExC,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,WAA+B,CAAC;AACjE,eAAO,MAAM,GAAG,GAAI,MAAM,MAAM,WAA+B,CAAC;AAChE,eAAO,MAAM,MAAM,GAAI,MAAM,MAAM,WAA+B,CAAC;AACnE,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,WAA+B,CAAC;AAEtE,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,WAAsB,CAAC;AAC7D,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,WAAwB,CAAC;AACjE,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,WAAsB,CAAC;AAE7D,OAAO,EAAE,KAAK,IAAI,KAAK,EAAE,CAAC;AAS1B,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGpD;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,SAAI,GAAG,MAAM,CA4B1E"}

package/esm/src/cli/ui/colors.js

@@ -132,3 +132,37 @@ export function animatedMatrix(frame) {
     const state = MATRIX_STATES[frame % MATRIX_STATES.length] ?? ["●", "○", "○"];
     return state.map((dot) => (dot === "●" ? brand(dot) : muted(dot))).join("");
 }
+/**
+ * Apply shimmer effect to text - creates a wave of brightness moving across
+ * @param text The text to shimmer
+ * @param frame Current animation frame (increments over time)
+ * @param waveWidth Width of the bright wave (default: 3 characters)
+ * @returns Text with shimmer effect applied
+ */
+export function shimmer(text, frame, waveWidth = 3) {
+    // Brand orange gradient: bright → normal → dim
+    const bright = (char) => applyColor(char, 255, 180, 140, false); // Brighter orange
+    const normal = (char) => applyColor(char, 252, 143, 93, false); // Brand orange
+    const dimmed = (char) => applyColor(char, 180, 100, 65, false); // Dimmer orange
+    const len = text.length;
+    const wavePos = frame % (len + waveWidth * 2);
+    let result = "";
+    for (let i = 0; i < len; i++) {
+        const char = text[i];
+        const distFromWave = i - (wavePos - waveWidth);
+        if (distFromWave >= 0 && distFromWave < waveWidth) {
+            // In the bright wave
+            const intensity = 1 - Math.abs(distFromWave - waveWidth / 2) / (waveWidth / 2);
+            if (intensity > 0.6) {
+                result += bright(char);
+            }
+            else {
+                result += normal(char);
+            }
+        }
+        else {
+            result += dimmed(char);
+        }
+    }
+    return result;
+}

package/esm/src/cli/ui/dot-matrix.d.ts

@@ -48,6 +48,14 @@ export declare function getAgentFace(options?: DotMatrixOptions): string;
  * Text lines appear to the right of the face, vertically centered
  */
 export declare function getAgentFaceWithText(textLines: string[], options?: DotMatrixOptions): string;
+/**
+ * Get the agent face with spinning blade animation
+ * Orange and purple dots rotate around the logo
+ * @param textLines Text to show next to the face
+ * @param frame Animation frame (0-15 for full rotation)
+ * @param options Dot matrix options
+ */
+export declare function getSpinningAgentFace(textLines: string[], frame: number, options?: DotMatrixOptions): string;
 /**
  * Animated dot matrix display with spinner support
  */

package/esm/src/cli/ui/dot-matrix.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dot-matrix.d.ts","sourceRoot":"","sources":["../../../../src/src/cli/ui/dot-matrix.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,UAAU,EAAE,MAAM,EAAE,EAQhC,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAiB9C,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwDD;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAE,gBAAqB,GAAG,MAAM,CAE3F;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,SAAI,GAAG,MAAM,EAAE,EAAE,CAWnF;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,SAAI,GAAG,MAAM,EAAE,EAAE,EAAE,CAElE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,MAAM,CAEnE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,EAAE,EACnB,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAER;AAED;;GAEG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAuD;IACzE,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAe;gBAExB,OAAO,GAAE,gBAAqB;IAM1C;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;OAEG;IACH,MAAM,IAAI,MAAM;IAIhB;;OAEG;IACH,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM;IAI3C;;OAEG;IACH,SAAS,IAAI,MAAM;IAInB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,aAAa;IAIrB;;;OAGG;IACH,YAAY,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAAE,UAAU,SAAK,GAAG,IAAI;IAerE;;OAEG;IACH,oBAAoB,CAClB,SAAS,EAAE,MAAM,EAAE,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAChC,UAAU,SAAK,GACd,IAAI;IAeP;;;OAGG;IACH,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAAE,UAAU,SAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IA2B5F;;;OAGG;IACH,kBAAkB,CAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EAAE,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAChC,UAAU,SAAK,GACd,OAAO,CAAC,IAAI,CAAC;IA2BhB;;OAEG;IACH,WAAW,IAAI,IAAI;IAMnB;;OAEG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,GAAG,IAAI;CAGtC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,MAAM,CAEjF;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAEtC"}
+{"version":3,"file":"dot-matrix.d.ts","sourceRoot":"","sources":["../../../../src/src/cli/ui/dot-matrix.ts"],"names":[],"mappings":"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"}

package/esm/src/cli/ui/dot-matrix.js

@@ -52,6 +52,13 @@ const COMPACT_OPTIONS = {
     spacing: " ",
 };
 const RESET = "\x1b[0m";
+// Colors for spinning animation - shades of orange
+const SPIN_COLORS = {
+    bright: "\x1b[38;2;255;165;120m", // Bright orange (leading edge, toned down)
+    orange: "\x1b[38;2;252;143;93m", // Brand orange
+    mid: "\x1b[38;2;200;110;70m", // Mid orange (trailing)
+    dim: "\x1b[38;2;140;80;50m", // Dim orange/brown
+};
 function resolveOptions(options) {
     if (options.compact)
         return { ...DEFAULT_OPTIONS, ...COMPACT_OPTIONS, ...options };
@@ -65,8 +72,56 @@ function renderPattern(pattern, opts) {
         return opts.prefix + dots.join(opts.spacing);
     });
 }
-function renderPatternWithText(pattern, textLines, opts) {
-    const faceLines = renderPattern(pattern, opts);
+/**
+ * Render the pattern with a spinning blade effect
+ * The blade sweeps across the lit dots, creating orange → purple gradient
+ */
+function renderSpinningPattern(pattern, frame, opts) {
+    const centerRow = 3;
+    const centerCol = 3;
+    const totalFrames = 16; // Full rotation in 16 frames
+    const bladeAngle = ((frame % totalFrames) / totalFrames) * Math.PI * 2;
+    return pattern.map((row, rowIdx) => {
+        const dots = row.map((dot, colIdx) => {
+            if (dot !== 1) {
+                return `${opts.offColor}${opts.offChar}${RESET}`;
+            }
+            // Calculate angle from center to this dot
+            const dy = rowIdx - centerRow;
+            const dx = colIdx - centerCol;
+            let dotAngle = Math.atan2(dy, dx);
+            if (dotAngle < 0)
+                dotAngle += Math.PI * 2;
+            // Calculate angular distance from the blade
+            let angleDiff = dotAngle - bladeAngle;
+            if (angleDiff < 0)
+                angleDiff += Math.PI * 2;
+            if (angleDiff > Math.PI)
+                angleDiff = Math.PI * 2 - angleDiff;
+            // Color based on angular distance from blade
+            const normalizedDiff = angleDiff / Math.PI; // 0 = at blade, 1 = opposite
+            let color;
+            if (normalizedDiff < 0.15) {
+                color = SPIN_COLORS.bright; // Leading edge - brightest orange
+            }
+            else if (normalizedDiff < 0.35) {
+                color = SPIN_COLORS.orange; // Near blade - brand orange
+            }
+            else if (normalizedDiff < 0.6) {
+                color = SPIN_COLORS.mid; // Trailing - mid orange
+            }
+            else {
+                color = SPIN_COLORS.dim; // Far from blade - dim orange
+            }
+            return `${color}${opts.litChar}${RESET}`;
+        });
+        return opts.prefix + dots.join(opts.spacing);
+    });
+}
+function renderPatternWithText(pattern, textLines, opts, spinFrame) {
+    const faceLines = spinFrame !== undefined
+        ? renderSpinningPattern(pattern, spinFrame, opts)
+        : renderPattern(pattern, opts);
     const faceHeight = faceLines.length;
     const startLine = Math.floor((faceHeight - textLines.length) / 2);
     const result = faceLines.map((line, i) => {
@@ -120,6 +175,16 @@ export function getAgentFace(options = {}) {
 export function getAgentFaceWithText(textLines, options = {}) {
     return renderPatternWithText(AGENT_FACE, textLines, resolveOptions(options));
 }
+/**
+ * Get the agent face with spinning blade animation
+ * Orange and purple dots rotate around the logo
+ * @param textLines Text to show next to the face
+ * @param frame Animation frame (0-15 for full rotation)
+ * @param options Dot matrix options
+ */
+export function getSpinningAgentFace(textLines, frame, options = {}) {
+    return renderPatternWithText(AGENT_FACE, textLines, resolveOptions(options), frame);
+}
 /**
  * Animated dot matrix display with spinner support
  */

package/esm/src/cli/ui/tui.js

@@ -106,7 +106,7 @@ function stopSpinner() {
     spinnerInterval = null;
 }
 export function createTui(cfg = {}) {
-    config = { title: "Veryfront", showLogs: true, ...cfg };
+    config = { title: "Veryfront Code", showLogs: true, ...cfg };
     state = {
         status: "Initializing...",
         statusType: "loading",

package/esm/src/modules/react-loader/ssr-module-loader/loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../../src/src/modules/react-loader/ssr-module-loader/loader.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAsCpC,OAAO,KAAK,EAAoB,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAgC3E;;;;;GAKG;AACH,qBAAa,eAAe;IAId,OAAO,CAAC,OAAO;IAH3B,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,mBAAmB,CAAuB;gBAE9B,OAAO,EAAE,sBAAsB;IAEnD;;OAEG;IACH,UAAU,CACR,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAyFxD,OAAO,CAAC,mBAAmB;IAiC3B,OAAO,CAAC,wBAAwB;IAwBhC,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,yBAAyB;IAuBjC,OAAO,CAAC,kBAAkB;IAK1B;;OAEG;YACW,2BAA2B;IAkGzC,OAAO,CAAC,yBAAyB;YAiBnB,2BAA2B;IA6RzC;;;OAGG;YACW,mBAAmB;IA2CjC,OAAO,CAAC,yBAAyB;IAYjC;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA4B3B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,wBAAwB;IAehC,OAAO,CAAC,2BAA2B;IAiBnC,OAAO,CAAC,2BAA2B;IAWnC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IA4B3B;;OAEG;IACH,OAAO,CAAC,aAAa;YAIP,uBAAuB;IAyCrC;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAUhB;;;OAGG;YACW,gBAAgB;YAgBhB,WAAW;YAeX,YAAY;CAiC3B"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../../src/src/modules/react-loader/ssr-module-loader/loader.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAsCpC,OAAO,KAAK,EAAoB,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAgC3E;;;;;GAKG;AACH,qBAAa,eAAe;IAId,OAAO,CAAC,OAAO;IAH3B,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,mBAAmB,CAAuB;gBAE9B,OAAO,EAAE,sBAAsB;IAEnD;;OAEG;IACH,UAAU,CACR,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAsGxD,OAAO,CAAC,mBAAmB;IAiC3B,OAAO,CAAC,wBAAwB;IAwBhC,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,yBAAyB;IAuBjC,OAAO,CAAC,kBAAkB;IAK1B;;OAEG;YACW,2BAA2B;IAkGzC,OAAO,CAAC,yBAAyB;YAiBnB,2BAA2B;IA6RzC;;;OAGG;YACW,mBAAmB;IA2CjC,OAAO,CAAC,yBAAyB;IAYjC;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA4B3B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,wBAAwB;IAehC,OAAO,CAAC,2BAA2B;IAiBnC,OAAO,CAAC,2BAA2B;IAWnC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IA4B3B;;OAEG;IACH,OAAO,CAAC,aAAa;YAIP,uBAAuB;IAyCrC;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAUhB;;;OAGG;YACW,gBAAgB;YAgBhB,WAAW;YAeX,YAAY;CAiC3B"}

package/esm/src/modules/react-loader/ssr-module-loader/loader.js

@@ -97,18 +97,31 @@ export class SSRModuleLoader {
                     const bundleMatch = errorMsg.match(/veryfront-http-bundle\/http-([a-f0-9]+)\.mjs/);
                     if (bundleMatch) {
                         const hash = bundleMatch[1];
-                        logger.warn("[SSR-MODULE-LOADER] Import failed due to missing HTTP bundle, attempting recovery", {
+                        const cacheDir = getHttpBundleCacheDir();
+                        logger.error("[SSR-MODULE-LOADER] Missing HTTP bundle after ensureHttpBundlesExist", {
                             file: filePath.slice(-40),
                             hash,
+                            tempPath: cacheEntry.tempPath,
+                            contentHash: cacheEntry.contentHash,
+                            cacheDir,
+                            expectedPath: `${cacheDir}/http-${hash}.mjs`,
                         });
                         const { recoverHttpBundleByHash } = await import("../../../transforms/esm/http-cache.js");
-                        const cacheDir = getHttpBundleCacheDir();
                         const recovered = await recoverHttpBundleByHash(hash, cacheDir);
                         if (recovered) {
-                            logger.info("[SSR-MODULE-LOADER] HTTP bundle recovered, retrying import", { hash });
+                            logger.info("[SSR-MODULE-LOADER] HTTP bundle recovered, retrying import", {
+                                hash,
+                                file: filePath.slice(-40),
+                            });
                             mod = await import(`file://${cacheEntry.tempPath}?v=${cacheEntry.contentHash}&retry=1`);
                         }
                         else {
+                            logger.error("[SSR-MODULE-LOADER] HTTP bundle recovery failed", {
+                                hash,
+                                file: filePath.slice(-40),
+                                cacheDir,
+                                hint: "Bundle may have expired from Redis (24h TTL) while transform was still cached",
+                            });
                             throw importError;
                         }
                     }
@@ -313,9 +326,12 @@ export class SSRModuleLoader {
                         const cacheDir = getHttpBundleCacheDir();
                         const failed = await ensureHttpBundlesExist(bundlePaths, cacheDir);
                         if (failed.length > 0) {
-                            logger.warn("[SSR-MODULE-LOADER] In-memory cached module has unrecoverable HTTP bundles, re-transforming", {
+                            logger.warn("[SSR-MODULE-LOADER] Unrecoverable HTTP bundles, re-transforming", {
                                 file: filePath.slice(-40),
                                 failed,
+                                totalBundles: bundlePaths.length,
+                                cacheDir,
+                                source: "memory-cache",
                             });
                             globalModuleCache.delete(contentCacheKey);
                             globalModuleCache.delete(filePathCacheKey);
@@ -354,9 +370,12 @@ export class SSRModuleLoader {
                     const cacheDir = getHttpBundleCacheDir();
                     const failed = await ensureHttpBundlesExist(bundlePaths, cacheDir);
                     if (failed.length > 0) {
-                        logger.warn("[SSR-MODULE-LOADER] Redis cached code has unrecoverable HTTP bundles, re-transforming", {
+                        logger.warn("[SSR-MODULE-LOADER] Unrecoverable HTTP bundles, re-transforming", {
                             file: filePath.slice(-40),
                             failed,
+                            totalBundles: bundlePaths.length,
+                            cacheDir,
+                            source: "redis-cache",
                         });
                         httpBundlesOk = false;
                     }
@@ -454,9 +473,12 @@ export class SSRModuleLoader {
                     const cacheDir = getHttpBundleCacheDir();
                     const failed = await ensureHttpBundlesExist(bundlePaths, cacheDir);
                     if (failed.length > 0) {
-                        logger.warn("[SSR-MODULE-LOADER] Some HTTP bundles could not be recovered", {
+                        logger.warn("[SSR-MODULE-LOADER] Unrecoverable HTTP bundles", {
                             file: filePath.slice(-40),
                             failed,
+                            totalBundles: bundlePaths.length,
+                            cacheDir,
+                            source: "fresh-transform",
                         });
                     }
                 }

package/esm/src/transforms/esm/http-cache.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"http-cache.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/esm/http-cache.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAmBzE,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,eAAe,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAyUF;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,YAAY,GACpB,OAAO,CAAC,MAAM,CAAC,CAOjB;AAED;;;;;;;;GAQG;AACH,wBAAsB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAOvF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CA8D9F;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,sBAAsB,CAC1C,WAAW,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,EAClD,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,MAAM,EAAE,CAAC,CAiInB"}
+{"version":3,"file":"http-cache.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/esm/http-cache.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAgBzE,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,eAAe,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAqVF;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,YAAY,GACpB,OAAO,CAAC,MAAM,CAAC,CAOjB;AAED;;;;;;;;GAQG;AACH,wBAAsB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAOvF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CA8D9F;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,sBAAsB,CAC1C,WAAW,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,EAClD,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,MAAM,EAAE,CAAC,CAiInB"}

package/esm/src/transforms/esm/http-cache.js

@@ -23,10 +23,13 @@ import { CacheBackends, createDistributedCacheAccessor } from "../../cache/backe
 import { HTTP_MODULE_CACHE_MAX_ENTRIES, HTTP_MODULE_DISTRIBUTED_TTL_SEC, } from "../../utils/constants/cache.js";
 /** Lazy-loaded distributed cache backend for cross-pod sharing */
 const getDistributedCache = createDistributedCacheAccessor(() => CacheBackends.httpModule(), "HTTP-CACHE");
-/** TTL for cached modules in distributed cache (uses centralized config) */
-const DISTRIBUTED_CACHE_TTL_SECONDS = HTTP_MODULE_DISTRIBUTED_TTL_SEC;
 const cachedPaths = new LRUCache({ maxEntries: HTTP_MODULE_CACHE_MAX_ENTRIES });
 const processingStack = new Set();
+/** Tracks last TTL refresh per hash. Refresh every 4h to keep 20h+ remaining (24h total). */
+const lastDistributedRefresh = new LRUCache({
+    maxEntries: HTTP_MODULE_CACHE_MAX_ENTRIES,
+});
+const DISTRIBUTED_REFRESH_INTERVAL_MS = 4 * 60 * 60 * 1000;
 function ensureAbsoluteDir(path) {
     return isAbsolute(path) ? path : join(cwd(), path);
 }
@@ -151,23 +154,28 @@ async function cacheHttpModule(url, options) {
     const fs = createFileSystem();
     if (await exists(cachePath)) {
         cachedPaths.set(cacheKey, cachePath);
-        // Synchronously ensure code:{hash} exists in distributed cache for cross-pod recovery
-        // This backfills bundles created before code:{hash} storage was added
-        // Synchronous to guarantee data is stored before other pods need it
+        // Refresh distributed cache TTL so bundles outlive transforms that reference them.
+        // Without this, bundles expire (24h) while SSR transforms (6h) are still valid.
         const distributed = await getDistributedCache();
         if (distributed) {
             const hash = simpleHash(normalizedUrl);
-            try {
-                const hasCode = await distributed.get(`code:${hash}`);
-                if (!hasCode) {
+            const hashStr = String(hash);
+            const now = Date.now();
+            const lastRefresh = lastDistributedRefresh.get(hashStr);
+            const needsRefresh = !lastRefresh || (now - lastRefresh > DISTRIBUTED_REFRESH_INTERVAL_MS);
+            if (needsRefresh) {
+                try {
                     const code = await fs.readTextFile(cachePath);
-                    await distributed.set(`code:${hash}`, code, DISTRIBUTED_CACHE_TTL_SECONDS);
-                    logger.info("[HTTP-CACHE] Backfilled code:{hash} for existing bundle", { hash });
+                    await Promise.all([
+                        distributed.set(`code:${hash}`, code, HTTP_MODULE_DISTRIBUTED_TTL_SEC),
+                        distributed.set(`hash:${hash}`, normalizedUrl, HTTP_MODULE_DISTRIBUTED_TTL_SEC),
+                    ]);
+                    lastDistributedRefresh.set(hashStr, now);
+                    logger.debug("[HTTP-CACHE] Refreshed distributed cache TTL", { hash });
+                }
+                catch (error) {
+                    logger.debug("[HTTP-CACHE] Distributed cache refresh failed", { hash, error });
                 }
-            }
-            catch (error) {
-                // Log but don't fail - backfill is best-effort
-                logger.debug("[HTTP-CACHE] Backfill failed, continuing", { hash, error });
             }
         }
         return cachePath;
@@ -232,9 +240,9 @@ async function cacheHttpModule(url, options) {
         const hash = simpleHash(normalizedUrl);
         try {
             await Promise.all([
-                distributed.set(normalizedUrl, code, DISTRIBUTED_CACHE_TTL_SECONDS),
-                distributed.set(`code:${hash}`, code, DISTRIBUTED_CACHE_TTL_SECONDS),
-                distributed.set(`hash:${hash}`, normalizedUrl, DISTRIBUTED_CACHE_TTL_SECONDS),
+                distributed.set(normalizedUrl, code, HTTP_MODULE_DISTRIBUTED_TTL_SEC),
+                distributed.set(`code:${hash}`, code, HTTP_MODULE_DISTRIBUTED_TTL_SEC),
+                distributed.set(`hash:${hash}`, normalizedUrl, HTTP_MODULE_DISTRIBUTED_TTL_SEC),
             ]);
         }
         catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veryfront",
-  "version": "0.0.83",
+  "version": "0.0.86",
   "description": "Zero-config React meta-framework for building agentic AI applications",
   "keywords": [
     "react",

package/src/deno.js

@@ -1,6 +1,6 @@
 export default {
   "name": "veryfront",
-  "version": "0.0.83",
+  "version": "0.0.86",
   "nodeModulesDir": "auto",
   "exclude": [
     "npm/",

package/src/src/cli/app/components/list-select.ts

@@ -196,8 +196,8 @@ export function renderList<T>(
     }
   }
 
-  if (start > 0) lines.unshift(`  ${dim("↑ more above")}`);
-  if (end < state.items.length) lines.push(`  ${dim("↓ more below")}`);
+  if (start > 0) lines.unshift(`   ${dim("↑")}  ${dim("more above")}`);
+  if (end < state.items.length) lines.push(`   ${dim("↓")}  ${dim("more below")}`);
 
   return lines.join("\n");
 }

package/src/src/cli/app/index.ts

@@ -19,9 +19,16 @@ import { join } from "../../platform/compat/path/index.js";
 import { getRuntimeEnv } from "../../config/runtime-env.js";
 import { getStdinReader, setRawMode } from "../../platform/compat/stdin.js";
 import { cursor, screen, SPINNER_FRAMES } from "../ui/ansi.js";
-import { brand, dim, success } from "../ui/colors.js";
+import { brand, dim } from "../ui/colors.js";
+import { getTerminalWidth } from "../ui/layout.js";
 import { moveDown, moveUp, selectByNumber } from "./components/list-select.js";
 import { renderDashboard, renderEmptyState } from "./views/dashboard.js";
+import {
+  createStartupState,
+  incrementFrame,
+  renderStartup,
+  setStepActive,
+} from "./views/startup.js";
 import { openInBrowser, openInIDE, openInStudio, openMCPSettings } from "./actions.js";
 import { initCommand } from "../commands/init/init-command.js";
 import type { InitTemplate } from "../commands/init/types.js";
@@ -42,6 +49,7 @@ import {
   setTemplates,
   startInput,
   type StateUpdater,
+  toggleHelp,
   toggleLogsExpanded,
   updateActiveList,
   updateInputValue,
@@ -545,10 +553,13 @@ export function createApp(config: AppConfig): App {
 
     const parts: string[] = [content];
 
+    // Divider width matches the box in dashboard
+    const dividerWidth = Math.min(getTerminalWidth() - 4, 80);
+
     if (state.logs.length > 0) {
       const logsHeader = state.logsExpanded ? "▼ Logs" : "▶ Logs";
       parts.push("");
-      parts.push(`  ${dim("─".repeat(60))}`);
+      parts.push(dim("─".repeat(dividerWidth)));
       parts.push(
         `  ${dim(logsHeader)} ${dim(`(${state.logs.length})`)}  ${dim("l")} ${dim("toggle")}  ${
           state.logsExpanded ? `${dim("↑↓")} ${dim("scroll")}` : ""
@@ -563,14 +574,14 @@ export function createApp(config: AppConfig): App {
 
     if (state.input.active) {
       parts.push("");
-      parts.push(`  ${dim("─".repeat(60))}`);
+      parts.push(dim("─".repeat(dividerWidth)));
       parts.push(renderInput(state.input));
     }
 
     if (!isInteractiveMode) return;
 
     write(cursor.moveTo(1, 1) + screen.clearDown);
-    write(parts.join("\n"));
+    write("\n" + parts.join("\n"));
   }
 
   function update(updater: StateUpdater): void {
@@ -933,7 +944,7 @@ export function createApp(config: AppConfig): App {
     }
 
     if (key === "?") {
-      update(navigateTo("help"));
+      update(toggleHelp());
       return;
     }
 
@@ -1422,47 +1433,35 @@ export function createApp(config: AppConfig): App {
 }
 
 /**
- * Show startup animation
+ * Show startup animation with boxed view and shimmer effect
  */
 export async function showStartup(steps: string[]): Promise<void> {
   const write = (text: string): void => writeStdout(text);
 
   write(screen.altOn + cursor.hide);
 
-  for (let i = 0; i < steps.length; i++) {
-    const step = steps[i]!;
-    const completed = steps.slice(0, i).map((s) => `  ${success("✓")} ${dim(s)}`);
-    const current = `  ${brand("●")} ${step}`;
-    const pending = steps.slice(i + 1).map((s) => `  ${dim("○")} ${dim(s)}`);
-
-    const content = [
-      "",
-      `  ${brand("Veryfront")} ${dim("starting...")}`,
-      "",
-      ...completed,
-      current,
-      ...pending,
-      "",
-    ].join("\n");
+  let startupState = createStartupState(steps);
 
-    write(cursor.moveTo(1, 1) + screen.clearDown + content);
-    await new Promise((r) => dntShim.setTimeout(r, 200));
+  // Show each step with spinning avatar animation
+  for (let i = 0; i < steps.length; i++) {
+    startupState = setStepActive(startupState, i);
+
+    // Animate spinning avatar (16 frames at 60ms = ~1s per step for full rotation)
+    const framesPerStep = 16;
+    for (let f = 0; f < framesPerStep; f++) {
+      write(cursor.moveTo(1, 1) + screen.clearDown + "\n" + renderStartup(startupState));
+      startupState = incrementFrame(startupState);
+      await new Promise((r) => dntShim.setTimeout(r, 60));
+    }
   }
 
-  const allComplete = steps.map((s) => `  ${success("✓")} ${dim(s)}`);
-  const finalContent = [
-    "",
-    `  ${brand("Veryfront")} ${success("ready")}`,
-    "",
-    ...allComplete,
-    "",
-  ].join("\n");
-
-  write(cursor.moveTo(1, 1) + screen.clearDown + finalContent);
-  await new Promise((r) => dntShim.setTimeout(r, 300));
+  // Mark all steps done - logo fills up and holds before transitioning
+  startupState = setStepActive(startupState, steps.length);
+  write(cursor.moveTo(1, 1) + screen.clearDown + "\n" + renderStartup(startupState));
+  await new Promise((r) => dntShim.setTimeout(r, 400));
 
   // Don't exit alternate screen - let app.start() continue in it
-  // This prevents a flash when transitioning to the dashboard
+  // Dashboard takes over directly from here
 }
 
 export type { AppState } from "./state.js";

package/src/src/cli/app/state.ts

@@ -103,6 +103,8 @@ export interface AppState {
   authProviderIndex: number;
   /** New project option index (0=template, 1=example, 2=scratch) */
   newProjectIndex: number;
+  /** Show expanded help */
+  showHelp: boolean;
 }
 
 export function createInitialState(): AppState {
@@ -153,6 +155,7 @@ export function createInitialState(): AppState {
     logScroll: 0,
     authProviderIndex: 0,
     newProjectIndex: 0,
+    showHelp: false,
   };
 }
 
@@ -339,6 +342,10 @@ export function toggleLogsExpanded(): StateUpdater {
   });
 }
 
+export function toggleHelp(): StateUpdater {
+  return (state) => ({ ...state, showHelp: !state.showHelp });
+}
+
 export function scrollLogs(direction: "up" | "down"): StateUpdater {
   return (state) => {
     if (!state.logsExpanded) return state;