veryfront 0.0.84 → 0.0.88

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;

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");
 }
 
 /**
@@ -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/init/config-generator.ts

@@ -18,7 +18,7 @@ export async function createPackageJson(
     dependencies: {
       react: "^19.0.0",
       "react-dom": "^19.0.0",
-      veryfront: "^0.0.63",
+      veryfront: "^0.0.88",
       zod: "^3.24.0",
     },
   };

package/src/src/cli/index/arg-parser.ts

@@ -95,6 +95,7 @@ export function parseCliArgs(args: string[]): ParsedArgs {
       t: "template",
       j: "json",
       w: "with",
+      m: "mode",
     },
     default: { port: DEFAULT_PORT },
   }) as ParsedArgs;

package/src/src/cli/index/command-router.ts

@@ -204,51 +204,68 @@ export async function routeCommand(args: ParsedArgs): Promise<void> {
 
       case "preview":
       case "serve": {
-        showLogo();
-
-        const { runtime } = await import("../../platform/adapters/detect.js");
-        const adapter = await runtime.get();
-        const { startUniversalServer } = await import("../../server/production-server.js");
-
-        const projectDir = cwd();
+        const mode = (args.mode || args.m || "renderer") as "combined" | "proxy" | "renderer";
         const port = args.port ?? DEFAULT_DEV_SERVER_PORT;
         const bindAddress = String(args.hostname || args.host || "0.0.0.0");
-        const debug = Boolean(args.debug);
-        const shutdownController = new AbortController();
-
-        const server = await startUniversalServer({
-          projectDir,
-          port,
-          bindAddress,
-          debug,
-          adapter,
-          signal: shutdownController.signal,
-        });
-        await server.ready;
 
-        let shuttingDown = false;
-        const shutdown = async (signal: "SIGINT" | "SIGTERM"): Promise<void> => {
-          if (shuttingDown) return;
-          shuttingDown = true;
-
-          cliLogger.info(`Received ${signal}, shutting down production server...`);
-          try {
-            shutdownController.abort();
-            await server.stop();
-          } catch (error) {
-            cliLogger.warn("Error while shutting down production server:", error);
-          } finally {
-            exitProcess(0);
-          }
-        };
+        if (mode === "proxy") {
+          // Proxy-only mode: run OAuth token proxy
+          showLogo();
+          cliLogger.info(`Starting proxy server on ${bindAddress}:${port}`);
+
+          // Set environment variables for proxy
+          const { setEnv } = await import("../../platform/compat/process.js");
+          setEnv("PORT", String(port));
+          setEnv("HOST", bindAddress);
+
+          // Import and run proxy main
+          await import("../../../proxy/main.js");
+        } else if (mode === "renderer" || mode === "combined") {
+          // Renderer mode: run SSR production server
+          showLogo();
+
+          const { runtime } = await import("../../platform/adapters/detect.js");
+          const adapter = await runtime.get();
+          const { startUniversalServer } = await import("../../server/production-server.js");
+
+          const projectDir = cwd();
+          const debug = Boolean(args.debug);
+          const shutdownController = new AbortController();
+
+          const server = await startUniversalServer({
+            projectDir,
+            port,
+            bindAddress,
+            debug,
+            adapter,
+            signal: shutdownController.signal,
+          });
+          await server.ready;
+
+          let shuttingDown = false;
+          const shutdown = async (signal: "SIGINT" | "SIGTERM"): Promise<void> => {
+            if (shuttingDown) return;
+            shuttingDown = true;
+
+            cliLogger.info(`Received ${signal}, shutting down production server...`);
+            try {
+              shutdownController.abort();
+              await server.stop();
+            } catch (error) {
+              cliLogger.warn("Error while shutting down production server:", error);
+            } finally {
+              exitProcess(0);
+            }
+          };
 
-        registerTerminationSignals((signal) => {
-          void shutdown(signal);
-        });
+          registerTerminationSignals((signal) => {
+            void shutdown(signal);
+          });
 
-        await new Promise(() => {
-          /* never resolve */
-        });
+          await new Promise(() => {
+            /* never resolve */
+          });
+        }
         break;
       }
 

package/src/src/cli/index/types.ts

@@ -18,6 +18,8 @@ export interface GenerateCommandArgs {
   _: (string | number)[];
 }
 
+export type ServerMode = "combined" | "proxy" | "renderer";
+
 export interface ParsedArgs {
   _: (string | number)[];
   port?: number;
@@ -41,5 +43,8 @@ export interface ParsedArgs {
   j?: boolean;
   with?: string[];
   w?: string[];
+  /** Server mode: combined (default), proxy, or renderer */
+  mode?: ServerMode;
+  m?: ServerMode;
   [key: string]: unknown;
 }

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;
+}