veryfront 0.0.83 → 0.0.86

package/src/src/cli/app/views/dashboard.ts

@@ -5,7 +5,7 @@
  */
 
 import { box } from "../../ui/box.js";
-import { brand, dim, error, muted, success } from "../../ui/colors.js";
+import { brand, dim, error, muted } from "../../ui/colors.js";
 import { getTerminalWidth } from "../../ui/layout.js";
 import { getAgentFaceWithText } from "../../ui/dot-matrix.js";
 import { renderList } from "../components/list-select.js";
@@ -27,7 +27,7 @@ export function renderDashboard(state: AppState): string {
 
   if (hasProjects) {
     const isActive = state.activeList === "projects";
-    lines.push(renderSection("Local Projects", state.projects.items.length, isActive));
+    lines.push(renderSection("Local", state.projects.items.length, isActive));
     lines.push(
       renderList(state.projects, {
         maxWidth: maxListWidth,
@@ -47,10 +47,10 @@ export function renderDashboard(state: AppState): string {
     const end = Math.min(start + visibleCount, state.remote.projects.length);
     const visibleProjects = state.remote.projects.slice(start, end);
 
-    lines.push(renderSection("Remote Projects", state.remote.projects.length, isRemoteActive));
+    lines.push(renderSection("Remote", state.remote.projects.length, isRemoteActive));
 
     if (start > 0) {
-      lines.push(`  ${dim("↑ more above")}`);
+      lines.push(`   ${dim("↑")}  ${dim("more above")}`);
     }
 
     visibleProjects.forEach((p, i) => {
@@ -68,7 +68,7 @@ export function renderDashboard(state: AppState): string {
     });
 
     if (end < state.remote.projects.length) {
-      lines.push(`  ${dim("↓ more below")}`);
+      lines.push(`   ${dim("↓")}  ${dim("more below")}`);
     }
     lines.push("");
   }
@@ -93,27 +93,26 @@ export function renderDashboard(state: AppState): string {
 }
 
 /**
- * Render the banner with agent face and server info
+ * Render the banner with agent face and server info inside a box
  */
 function renderBanner(state: AppState): string {
-  const serverDot = state.server.running ? success("●") : error("●");
-  const mcpDot = state.mcp.enabled ? success("●") : dim("○");
-
+  const termWidth = Math.min(getTerminalWidth() - 4, 80);
   const textLines: string[] = [];
 
-  textLines.push(`${serverDot} ${dim("Server running")}`);
-  textLines.push(`  ${brand(state.server.url)}`);
+  textLines.push("");
+  textLines.push(`${brand("Veryfront Code")} ${dim("is now running")}`);
+  textLines.push("");
 
-  if (state.mcp.enabled) {
-    textLines.push(`${mcpDot} ${dim("MCP")}`);
-    if (state.mcp.transport === "http") {
-      const port = state.mcp.httpPort ?? 9999;
-      textLines.push(`  ${brand(`http://veryfront.me:${port}/mcp`)}`);
-    } else {
-      textLines.push(`  ${dim("stdio")}`);
-    }
+  // Server URL and MCP URL - always reserve both lines to prevent jumps
+  textLines.push(`${dim("Url")} ${brand(state.server.url)}`);
+  if (state.mcp.enabled && state.mcp.transport === "http") {
+    const port = state.mcp.httpPort ?? 9999;
+    textLines.push(`${dim("Mcp")} ${brand(`http://veryfront.me:${port}/mcp`)}`);
+  } else {
+    textLines.push("");
   }
 
+  // Errors/warnings on separate line if any
   const { errors, warnings } = state.server;
   if (errors > 0 || warnings > 0) {
     const parts: string[] = [];
@@ -122,58 +121,56 @@ function renderBanner(state: AppState): string {
     textLines.push(parts.join("  "));
   }
 
-  return getAgentFaceWithText(textLines, {
+  // Pad to 7 text lines (matching avatar height) for consistent title position
+  while (textLines.length < 7) {
+    textLines.push("");
+  }
+
+  const content = getAgentFaceWithText(textLines, {
     litColor: "\x1b[38;2;252;143;93m", // Veryfront brand orange
   });
+
+  return box(content, {
+    style: "rounded",
+    width: termWidth,
+    paddingX: 2,
+    paddingY: 1,
+    borderColor: "\x1b[2m", // Dim to match footer
+  });
 }
 
 /**
  * Render a section header
  */
-function renderSection(title: string, count: number, isActive = true): string {
+function renderSection(title: string, _count: number, isActive = true): string {
   const indicator = isActive ? brand("›") : " ";
   const titleText = isActive ? title : dim(title);
-  return `  ${indicator} ${titleText} ${dim(`(${count})`)}`;
+  return `  ${indicator} ${titleText}`;
 }
 
 /**
  * Render the help bar at the bottom
  */
 function renderHelpBar(state: AppState): string {
-  const parts: string[] = [];
-
-  const hasProjects = state.projects.items.length > 0;
-  const hasExamples = state.examples.items.length > 0;
-  const hasRemoteProjects = state.remote.user && state.remote.projects.length > 0;
-
-  // Count sections for tab switching
-  const sectionCount = [hasProjects, hasExamples, hasRemoteProjects].filter(Boolean).length;
-
-  if (sectionCount > 1) {
-    parts.push(dim("tab switch"));
+  // Minimal by default, ? reveals all
+  if (!state.showHelp) {
+    const userInfo = state.remote.user ? `  ${dim("-")}  ${brand(state.remote.user.email)}` : "";
+    return `  ${dim("↑↓ select  enter open  ? more  q quit")}${userInfo}`;
   }
 
-  parts.push(dim("↑↓ nav"));
-
-  if (hasProjects || hasExamples || hasRemoteProjects) {
-    parts.push(dim("o open"), dim("s studio"), dim("i ide"));
-  }
+  // Expanded help
+  const lines: string[] = [];
+  lines.push(`  ${dim("o")} open  ${dim("s")} studio  ${dim("i")} ide`);
 
   if (!state.remote.user) {
-    parts.push(dim("a login"));
+    lines.push(`  ${dim("n")} new  ${dim("a")} login`);
   } else {
-    // Show context-aware actions based on active list
-    if (state.activeList === "projects") {
-      parts.push(dim("p pull"), dim("u push"));
-    } else if (state.activeList === "remoteProjects") {
-      parts.push(dim("p pull"));
-    }
-    parts.push(dim("n new"), dim("x logout"));
+    lines.push(`  ${dim("n")} new  ${dim("p")} pull  ${dim("u")} push  ${dim("x")} logout`);
   }
 
-  parts.push(dim("? help"), dim("q quit"));
+  lines.push(`  ${dim("? hide  q quit")}`);
 
-  return `  ${parts.join("  ")}`;
+  return lines.join("\n");
 }
 
 /**
@@ -185,7 +182,7 @@ export function renderDashboardBoxed(state: AppState): string {
 
   return box(content, {
     style: "rounded",
-    title: "Veryfront",
+    title: "Veryfront Code",
     titleColor: "\x1b[38;2;252;143;93m",
     width: termWidth,
     paddingX: 1,
@@ -197,16 +194,5 @@ export function renderDashboardBoxed(state: AppState): string {
  * Render empty state when no projects found
  */
 export function renderEmptyState(): string {
-  return [
-    "",
-    `  ${dim("No projects found.")}`,
-    "",
-    `  ${dim("Get started:")}`,
-    `    ${brand("[n]")} Create a new project`,
-    `    ${brand("[t]")} Browse templates`,
-    "",
-    `  ${dim("Or run with a project directory:")}`,
-    `    ${muted("deno task start --project ./my-project")}`,
-    "",
-  ].join("\n");
+  return `\n  ${dim("No projects.")} ${brand("n")} ${dim("to create")}\n`;
 }

package/src/src/cli/app/views/startup.ts

@@ -0,0 +1,132 @@
+/**
+ * Startup View
+ *
+ * Shows loading progress with consistent box sizing.
+ * Displays avatar, title, and step checklist.
+ */
+
+import { box } from "../../ui/box.js";
+import { brand, dim, shimmer } from "../../ui/colors.js";
+
+// Dim orange for completed steps - matches the trailing dots in spinning animation
+const dimOrange = (text: string) => `\x1b[38;2;180;100;65m${text}\x1b[0m`;
+import { getTerminalWidth } from "../../ui/layout.js";
+import { getAgentFaceWithText, getSpinningAgentFace } from "../../ui/dot-matrix.js";
+
+export interface StartupStep {
+  label: string;
+  status: "pending" | "active" | "done";
+}
+
+export interface StartupState {
+  steps: StartupStep[];
+  serverUrl?: string;
+  mcpUrl?: string;
+  ready: boolean;
+  /** Animation frame counter for shimmer effect */
+  frame: number;
+}
+
+/**
+ * Render the startup view inside a consistent-sized box
+ */
+export function renderStartup(state: StartupState): string {
+  const termWidth = Math.min(getTerminalWidth() - 4, 80);
+  const textLines: string[] = [];
+
+  if (state.ready) {
+    // Running state - always reserve space for both URL lines to prevent jumps
+    textLines.push("");
+    textLines.push(`${brand("Veryfront Code")} ${dim("is now running")}`);
+    textLines.push("");
+    textLines.push(state.serverUrl ? `${dim("Url")} ${brand(state.serverUrl)}` : "");
+    textLines.push(state.mcpUrl ? `${dim("Mcp")} ${brand(state.mcpUrl)}` : "");
+  } else {
+    // Loading state - match ready state layout
+    textLines.push("");
+    textLines.push(`${brand("Veryfront Code")} ${dim("starting...")}`);
+    textLines.push("");
+
+    for (const step of state.steps) {
+      if (step.status === "done") {
+        // Completed: dim orange (fades into background, coherent with avatar)
+        textLines.push(`${dimOrange("●")} ${dimOrange(step.label)}`);
+      } else if (step.status === "active") {
+        // Active: bright orange dot with shimmer text
+        textLines.push(`${brand("●")} ${shimmer(step.label, state.frame)}`);
+      } else {
+        // Pending: gray empty circle
+        textLines.push(`${dim("○")} ${dim(step.label)}`);
+      }
+    }
+  }
+
+  // Pad to 7 text lines (matching avatar height) for consistent title position
+  while (textLines.length < 7) {
+    textLines.push("");
+  }
+
+  // Use spinning avatar during loading, static when ready or all steps done
+  const allStepsDone = state.steps.every((s) => s.status === "done");
+  const content = state.ready || allStepsDone
+    ? getAgentFaceWithText(textLines, {
+      litColor: "\x1b[38;2;252;143;93m", // Veryfront brand orange
+    })
+    : getSpinningAgentFace(textLines, state.frame, {
+      litColor: "\x1b[38;2;252;143;93m", // Veryfront brand orange
+    });
+
+  return box(content, {
+    style: "rounded",
+    width: termWidth,
+    paddingX: 2,
+    paddingY: 1,
+    borderColor: "\x1b[2m", // Dim to match footer
+  });
+}
+
+/**
+ * Create initial startup state with steps
+ */
+export function createStartupState(stepLabels: string[]): StartupState {
+  return {
+    steps: stepLabels.map((label) => ({ label, status: "pending" })),
+    ready: false,
+    frame: 0,
+  };
+}
+
+/**
+ * Increment animation frame for shimmer effect
+ */
+export function incrementFrame(state: StartupState): StartupState {
+  return { ...state, frame: state.frame + 1 };
+}
+
+/**
+ * Set a step to active
+ */
+export function setStepActive(state: StartupState, index: number): StartupState {
+  const steps = state.steps.map((step, i) => ({
+    ...step,
+    status: i < index ? "done" : i === index ? "active" : "pending",
+  })) as StartupStep[];
+
+  return { ...state, steps };
+}
+
+/**
+ * Mark all steps done and set ready
+ */
+export function setStartupReady(
+  state: StartupState,
+  serverUrl: string,
+  mcpUrl?: string,
+): StartupState {
+  const steps = state.steps.map((step) => ({
+    ...step,
+    status: "done" as const,
+  }));
+
+  return { ...state, steps, serverUrl, mcpUrl, ready: true };
+}

package/src/src/cli/commands/dev.ts

@@ -195,8 +195,8 @@ export function devCommand(options: DevOptions): Promise<DevCommandResult> {
         console.log();
         console.log(
           banner({
-            title: "Veryfront",
-            subtitle: "is now running",
+            title: "Veryfront Code",
+            subtitle: "is running",
             info: {
               url: serverUrl,
               ...(projectSlug ? { project: projectSlug } : {}),

package/src/src/cli/commands/new.ts

@@ -154,7 +154,7 @@ export async function newCommand(
     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}`;

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

@@ -157,3 +157,40 @@ export function animatedMatrix(frame: number): string {
   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: string, frame: number, waveWidth = 3): string {
+  // Brand orange gradient: bright → normal → dim
+  const bright = (char: string) => applyColor(char, 255, 180, 140, false); // Brighter orange
+  const normal = (char: string) => applyColor(char, 252, 143, 93, false); // Brand orange
+  const dimmed = (char: string) => 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/src/src/cli/ui/dot-matrix.ts

@@ -76,6 +76,14 @@ const COMPACT_OPTIONS: Partial<DotMatrixOptions> = {
 
 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: DotMatrixOptions): Required<DotMatrixOptions> {
   if (options.compact) return { ...DEFAULT_OPTIONS, ...COMPACT_OPTIONS, ...options };
   return { ...DEFAULT_OPTIONS, ...options };
@@ -92,12 +100,65 @@ function renderPattern(pattern: number[][], opts: Required<DotMatrixOptions>): s
   });
 }
 
+/**
+ * Render the pattern with a spinning blade effect
+ * The blade sweeps across the lit dots, creating orange → purple gradient
+ */
+function renderSpinningPattern(
+  pattern: number[][],
+  frame: number,
+  opts: Required<DotMatrixOptions>,
+): string[] {
+  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: string;
+      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: number[][],
   textLines: string[],
   opts: Required<DotMatrixOptions>,
+  spinFrame?: number,
 ): string {
-  const faceLines = renderPattern(pattern, opts);
+  const faceLines = spinFrame !== undefined
+    ? renderSpinningPattern(pattern, spinFrame, opts)
+    : renderPattern(pattern, opts);
 
   const faceHeight = faceLines.length;
   const startLine = Math.floor((faceHeight - textLines.length) / 2);
@@ -164,6 +225,21 @@ export function getAgentFaceWithText(
   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: string[],
+  frame: number,
+  options: DotMatrixOptions = {},
+): string {
+  return renderPatternWithText(AGENT_FACE, textLines, resolveOptions(options), frame);
+}
+
 /**
  * Animated dot matrix display with spinner support
  */

package/src/src/cli/ui/tui.ts

@@ -149,7 +149,7 @@ export function createTui(cfg: TuiConfig = {}): {
   cleanup: () => void;
   render: () => void;
 } {
-  config = { title: "Veryfront", showLogs: true, ...cfg };
+  config = { title: "Veryfront Code", showLogs: true, ...cfg };
   state = {
     status: "Initializing...",
     statusType: "loading",

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

@@ -143,24 +143,37 @@ 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",
-                {
-                  file: filePath.slice(-40),
-                  hash,
-                },
-              );
+              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`
                 ) as Record<string, unknown>;
               } 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;
               }
             } else {
@@ -444,13 +457,13 @@ 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",
-                {
-                  file: filePath.slice(-40),
-                  failed,
-                },
-              );
+              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);
               // Fall through to Redis or fresh transform
@@ -487,13 +500,13 @@ 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",
-              {
-                file: filePath.slice(-40),
-                failed,
-              },
-            );
+            logger.warn("[SSR-MODULE-LOADER] Unrecoverable HTTP bundles, re-transforming", {
+              file: filePath.slice(-40),
+              failed,
+              totalBundles: bundlePaths.length,
+              cacheDir,
+              source: "redis-cache",
+            });
             httpBundlesOk = false;
           }
         }
@@ -642,13 +655,13 @@ 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",
-              {
-                file: filePath.slice(-40),
-                failed,
-              },
-            );
+            logger.warn("[SSR-MODULE-LOADER] Unrecoverable HTTP bundles", {
+              file: filePath.slice(-40),
+              failed,
+              totalBundles: bundlePaths.length,
+              cacheDir,
+              source: "fresh-transform",
+            });
           }
         }