veryfront 0.0.83 → 0.0.86

package/README.md

@@ -1,73 +1,34 @@
-# Veryfront
+# Veryfront Code
 
-[![npm version](https://img.shields.io/npm/v/veryfront.svg)](https://www.npmjs.com/package/veryfront)
-[![CI/CD](https://github.com/veryfront/veryfront-renderer/actions/workflows/ci.yml/badge.svg)](https://github.com/veryfront/veryfront-renderer/actions/workflows/ci.yml)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-
-The all-in-one React framework for building AI-powered applications and agents.
-
-## Features
-
-- **Zero config** — Auto-discovery from file structure
-- **Multi-runtime** — Deno, Node.js, Bun, Cloudflare Workers
-- **Full-stack React** — SSR, SSG, ISR, streaming
-- **MCP built-in** — Model Context Protocol server
-- **Production-ready** — Rate limiting, caching, observability
-
-## Quick Start
+The simplest way to build AI-powered apps.
 
 ```bash
 npx veryfront
 ```
 
-## Commands
-
-| Command                      | What it does                       | When to use                                    |
-| ---------------------------- | ---------------------------------- | ---------------------------------------------- |
-| `npx veryfront`              | Starts TUI dashboard on port 8080  | Explore projects and develop interactively     |
-| `npx veryfront init`         | Create a new project               | Start a new Veryfront app from scratch         |
-| `npx veryfront dev`          | Starts dev server on port 3000     | Develop a specific project with HMR            |
-| `npx veryfront build`        | Production build                   | Prepare app for deployment                     |
-| `npx veryfront deploy`       | Deploy to Veryfront Cloud          | Ship app to production                         |
-| `npx veryfront --port 3001`  | TUI on custom port                 | Port 8080 is busy                              |
-| `npx veryfront --headless`   | Server without TUI                 | Running in CI or want logs only                |
-| `npx veryfront doctor`       | Check system health                | Something isn't working, need diagnostics      |
-| `npx veryfront --help`       | Show all commands                  | See what's available                           |
-
-## Project Structure
-
 ```
-my-app/
-├── app/                     # App Router (pages & APIs)
-│   ├── chat/page.tsx
-│   └── api/chat/route.ts
-├── agents/                  # AI agents
-├── tools/                   # MCP tools
-├── workflows/               # Durable workflows
-├── prompts/                 # Prompt templates
-└── resources/               # MCP resources
+╭──────────────────────────────────────────────────────────╮
+│                                                          │
+│  ○ ○ ○ ○ ○ ○ ○                                           │
+│  ○ ● ● ● ○ ○ ○   Veryfront Code is now running           │
+│  ○ ● ● ● ○ ○ ○                                           │
+│  ○ ● ● ○ ● ● ○   Url http://veryfront.me:8080            │
+│  ○ ○ ○ ● ● ● ○   Mcp http://veryfront.me:9999/mcp        │
+│  ○ ○ ○ ● ● ● ○                                           │
+│  ○ ○ ○ ○ ○ ○ ○                                           │
+│                                                          │
+╰──────────────────────────────────────────────────────────╯
 ```
 
-All directories are auto-discovered.
-
-## Documentation
-
-- [Getting Started](https://veryfront.com/docs/framework)
-- [Agents](https://veryfront.com/docs/framework/agents)
-- [Tools](https://veryfront.com/docs/framework/tools)
-- [Workflows](https://veryfront.com/docs/framework/workflows)
-- [MCP Server](https://veryfront.com/docs/framework/mcp)
-
-## Community
-
-- [Discord](https://discord.gg/veryfront)
-- [X](https://x.com/veryfrontdev)
-- [GitHub Discussions](https://github.com/veryfront/veryfront/discussions)
+One command. Zero config. Just build.
 
-## Contributing
+[Docs](https://veryfront.com/docs/framework) · [Discord](https://discord.gg/veryfront) · [X](https://x.com/veryfrontdev) · MIT
 
-See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
+## Releasing
 
-## License
+Create a new release with `gh release create vX.X.X`. The publish workflow runs automatically and takes ~4-5 minutes:
 
-MIT
+1. Builds native binaries for 5 platforms (macOS arm64/x64, Linux x64/arm64, Windows x64)
+2. Publishes to npm with provenance
+3. Creates GitHub releases in both repos
+4. Updates Homebrew formula

package/esm/deno.js

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

package/esm/src/cli/app/components/list-select.js

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

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

@@ -35,7 +35,7 @@ export interface App {
  */
 export declare function createApp(config: AppConfig): App;
 /**
- * Show startup animation
+ * Show startup animation with boxed view and shimmer effect
  */
 export declare function showStartup(steps: string[]): Promise<void>;
 export type { AppState } from "./state.js";

package/esm/src/cli/app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/cli/app/index.ts"],"names":[],"mappings":"AA2BA,OAAO,EAEL,KAAK,QAAQ,EAcb,KAAK,YAAY,EAOlB,MAAM,YAAY,CAAC;AASpB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,GAAG;IAClB,oBAAoB;IACpB,KAAK,IAAI,IAAI,CAAC;IACd,wCAAwC;IACxC,IAAI,IAAI,IAAI,CAAC;IACb,mBAAmB;IACnB,MAAM,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,wBAAwB;IACxB,QAAQ,IAAI,QAAQ,CAAC;IACrB,8BAA8B;IAC9B,MAAM,IAAI,IAAI,CAAC;IACf,uBAAuB;IACvB,cAAc,IAAI,IAAI,CAAC;IACvB,mBAAmB;IACnB,QAAQ,IAAI,IAAI,CAAC;IACjB,mBAAmB;IACnB,WAAW,IAAI,IAAI,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvE,qDAAqD;IACrD,gBAAgB,IAAI,MAAM,IAAI,CAAC;CAChC;AAuMD;;GAEG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,SAAS,GAAG,GAAG,CAymChD;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAuChE;AAED,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/cli/app/index.ts"],"names":[],"mappings":"AAkCA,OAAO,EAEL,KAAK,QAAQ,EAcb,KAAK,YAAY,EAQlB,MAAM,YAAY,CAAC;AASpB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,GAAG;IAClB,oBAAoB;IACpB,KAAK,IAAI,IAAI,CAAC;IACd,wCAAwC;IACxC,IAAI,IAAI,IAAI,CAAC;IACb,mBAAmB;IACnB,MAAM,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,wBAAwB;IACxB,QAAQ,IAAI,QAAQ,CAAC;IACrB,8BAA8B;IAC9B,MAAM,IAAI,IAAI,CAAC;IACf,uBAAuB;IACvB,cAAc,IAAI,IAAI,CAAC;IACvB,mBAAmB;IACnB,QAAQ,IAAI,IAAI,CAAC;IACjB,mBAAmB;IACnB,WAAW,IAAI,IAAI,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvE,qDAAqD;IACrD,gBAAgB,IAAI,MAAM,IAAI,CAAC;CAChC;AAuMD;;GAEG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,SAAS,GAAG,GAAG,CA4mChD;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CA2BhE;AAED,YAAY,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC"}

package/esm/src/cli/app/index.js

@@ -11,12 +11,14 @@ 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 { addLog, createInitialState, endInput, getActiveSelection, goBack, navigateTo, scrollLogs, setActiveList, setExamples, setProjects, setTemplates, startInput, toggleLogsExpanded, updateActiveList, updateInputValue, updateMCP, updateRemote, updateServer, } from "./state.js";
+import { addLog, createInitialState, endInput, getActiveSelection, goBack, navigateTo, scrollLogs, setActiveList, setExamples, setProjects, setTemplates, startInput, toggleHelp, toggleLogsExpanded, updateActiveList, updateInputValue, updateMCP, updateRemote, updateServer, } from "./state.js";
 import { handleInputKey, renderInput, renderLogs } from "./components/inline-input.js";
 import { login, logout, validateToken } from "../auth/login.js";
 import { readToken } from "../auth/token-store.js";
@@ -430,10 +432,12 @@ export function createApp(config) {
                 content = renderDashboard(state);
         }
         const parts = [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")}` : ""}`);
             parts.push(renderLogs(state.logs, {
                 maxLines: state.logsExpanded ? 15 : 3,
@@ -443,13 +447,13 @@ export function createApp(config) {
         }
         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) {
         state = updater(state);
@@ -792,7 +796,7 @@ export function createApp(config) {
             return;
         }
         if (key === "?") {
-            update(navigateTo("help"));
+            update(toggleHelp());
             return;
         }
         if (key === "m" && state.mcp.enabled) {
@@ -1212,40 +1216,29 @@ export function createApp(config) {
     };
 }
 /**
- * Show startup animation
+ * Show startup animation with boxed view and shimmer effect
  */
 export async function showStartup(steps) {
     const write = (text) => writeStdout(text);
     write(screen.altOn + cursor.hide);
+    let startupState = createStartupState(steps);
+    // Show each step with spinning avatar animation
     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");
-        write(cursor.moveTo(1, 1) + screen.clearDown + content);
-        await new Promise((r) => dntShim.setTimeout(r, 200));
+        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 * from "./state.js";
 export * from "./actions.js";

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

@@ -84,6 +84,8 @@ export interface AppState {
     authProviderIndex: number;
     /** New project option index (0=template, 1=example, 2=scratch) */
     newProjectIndex: number;
+    /** Show expanded help */
+    showHelp: boolean;
 }
 export declare function createInitialState(): AppState;
 export type StateUpdater = (state: AppState) => AppState;
@@ -117,6 +119,7 @@ export declare function endInput(): StateUpdater;
 export declare function addLog(level: LogEntry["level"], message: string, meta?: LogMeta): StateUpdater;
 export declare function clearLogs(): StateUpdater;
 export declare function toggleLogsExpanded(): StateUpdater;
+export declare function toggleHelp(): StateUpdater;
 export declare function scrollLogs(direction: "up" | "down"): StateUpdater;
 export declare function getActiveSelection(state: AppState): ListItem<ProjectInfo> | undefined;
 //# sourceMappingURL=state.d.ts.map

package/esm/src/cli/app/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/src/cli/app/state.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/src/cli/app/state.ts"],"names":[],"mappings":"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"}

package/esm/src/cli/app/state.js

@@ -49,6 +49,7 @@ export function createInitialState() {
         logScroll: 0,
         authProviderIndex: 0,
         newProjectIndex: 0,
+        showHelp: false,
     };
 }
 export function setProjects(projects) {
@@ -192,6 +193,9 @@ export function toggleLogsExpanded() {
         logScroll: 0,
     });
 }
+export function toggleHelp() {
+    return (state) => ({ ...state, showHelp: !state.showHelp });
+}
 export function scrollLogs(direction) {
     return (state) => {
         if (!state.logsExpanded)

package/esm/src/cli/app/views/dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../../../src/src/cli/app/views/dashboard.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CA4EvD;AAsFD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAY5D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAazC"}
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../../../src/src/cli/app/views/dashboard.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CA4EvD;AAmFD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAY5D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAEzC"}

package/esm/src/cli/app/views/dashboard.js

@@ -4,7 +4,7 @@
  * Main view showing server status, projects, and quick actions.
  */
 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";
@@ -21,7 +21,7 @@ export function renderDashboard(state) {
     const hasRemoteProjects = state.remote.user && state.remote.projects.length > 0;
     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,
             visibleCount: 5,
@@ -36,9 +36,9 @@ export function renderDashboard(state) {
         const start = state.remote.scrollOffset;
         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) => {
             const actualIndex = start + i;
@@ -54,7 +54,7 @@ export function renderDashboard(state) {
             lines.push(`${cursor} ${num} ${label}`);
         });
         if (end < state.remote.projects.length) {
-            lines.push(`  ${dim("↓ more below")}`);
+            lines.push(`   ${dim("↓")}  ${dim("more below")}`);
         }
         lines.push("");
     }
@@ -72,24 +72,24 @@ export function renderDashboard(state) {
     return lines.join("\n");
 }
 /**
- * Render the banner with agent face and server info
+ * Render the banner with agent face and server info inside a box
  */
 function renderBanner(state) {
-    const serverDot = state.server.running ? success("●") : error("●");
-    const mcpDot = state.mcp.enabled ? success("●") : dim("○");
+    const termWidth = Math.min(getTerminalWidth() - 4, 80);
     const textLines = [];
-    textLines.push(`${serverDot} ${dim("Server running")}`);
-    textLines.push(`  ${brand(state.server.url)}`);
-    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")}`);
-        }
+    textLines.push("");
+    textLines.push(`${brand("Veryfront Code")} ${dim("is now running")}`);
+    textLines.push("");
+    // 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 = [];
@@ -99,50 +99,49 @@ function renderBanner(state) {
             parts.push(muted(`${warnings} warnings`));
         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, count, isActive = true) {
+function renderSection(title, _count, isActive = true) {
     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) {
-    const parts = [];
-    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"));
-    }
-    parts.push(dim("↑↓ nav"));
-    if (hasProjects || hasExamples || hasRemoteProjects) {
-        parts.push(dim("o open"), dim("s studio"), dim("i ide"));
+    // 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}`;
     }
+    // Expanded help
+    const lines = [];
+    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"));
-    return `  ${parts.join("  ")}`;
+    lines.push(`  ${dim("? hide  q quit")}`);
+    return lines.join("\n");
 }
 /**
  * Render a boxed dashboard (alternative style)
@@ -152,7 +151,7 @@ export function renderDashboardBoxed(state) {
     const content = renderDashboard(state);
     return box(content, {
         style: "rounded",
-        title: "Veryfront",
+        title: "Veryfront Code",
         titleColor: "\x1b[38;2;252;143;93m",
         width: termWidth,
         paddingX: 1,
@@ -163,16 +162,5 @@ export function renderDashboardBoxed(state) {
  * Render empty state when no projects found
  */
 export function renderEmptyState() {
-    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/esm/src/cli/app/views/startup.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Startup View
+ *
+ * Shows loading progress with consistent box sizing.
+ * Displays avatar, title, and step checklist.
+ */
+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 declare function renderStartup(state: StartupState): string;
+/**
+ * Create initial startup state with steps
+ */
+export declare function createStartupState(stepLabels: string[]): StartupState;
+/**
+ * Increment animation frame for shimmer effect
+ */
+export declare function incrementFrame(state: StartupState): StartupState;
+/**
+ * Set a step to active
+ */
+export declare function setStepActive(state: StartupState, index: number): StartupState;
+/**
+ * Mark all steps done and set ready
+ */
+export declare function setStartupReady(state: StartupState, serverUrl: string, mcpUrl?: string): StartupState;
+//# sourceMappingURL=startup.d.ts.map

package/esm/src/cli/app/views/startup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"startup.d.ts","sourceRoot":"","sources":["../../../../../src/src/cli/app/views/startup.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;CACvC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAqDzD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,YAAY,CAMrE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAEhE;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,GAAG,YAAY,CAO9E;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,MAAM,GACd,YAAY,CAOd"}

package/esm/src/cli/app/views/startup.js

@@ -0,0 +1,103 @@
+/**
+ * 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) => `\x1b[38;2;180;100;65m${text}\x1b[0m`;
+import { getTerminalWidth } from "../../ui/layout.js";
+import { getAgentFaceWithText, getSpinningAgentFace } from "../../ui/dot-matrix.js";
+/**
+ * Render the startup view inside a consistent-sized box
+ */
+export function renderStartup(state) {
+    const termWidth = Math.min(getTerminalWidth() - 4, 80);
+    const textLines = [];
+    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) {
+    return {
+        steps: stepLabels.map((label) => ({ label, status: "pending" })),
+        ready: false,
+        frame: 0,
+    };
+}
+/**
+ * Increment animation frame for shimmer effect
+ */
+export function incrementFrame(state) {
+    return { ...state, frame: state.frame + 1 };
+}
+/**
+ * Set a step to active
+ */
+export function setStepActive(state, index) {
+    const steps = state.steps.map((step, i) => ({
+        ...step,
+        status: i < index ? "done" : i === index ? "active" : "pending",
+    }));
+    return { ...state, steps };
+}
+/**
+ * Mark all steps done and set ready
+ */
+export function setStartupReady(state, serverUrl, mcpUrl) {
+    const steps = state.steps.map((step) => ({
+        ...step,
+        status: "done",
+    }));
+    return { ...state, steps, serverUrl, mcpUrl, ready: true };
+}