veryfront 0.0.82 → 0.0.84

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

@@ -0,0 +1,385 @@
+import type { ListItem, ListSelectState } from "./components/list-select.js";
+import { createListState } from "./components/list-select.js";
+import { getRuntimeEnv, type RuntimeEnv } from "../../config/runtime-env.js";
+import { cwd } from "../../platform/compat/process.js";
+
+export type AppView =
+  | "dashboard"
+  | "project-detail"
+  | "new-project"
+  | "templates"
+  | "examples"
+  | "auth"
+  | "help";
+
+export interface ProjectInfo {
+  slug: string;
+  path: string;
+  type: "local" | "example" | "template";
+}
+
+export interface ServerStatus {
+  running: boolean;
+  url: string;
+  port: number;
+  errors: number;
+  warnings: number;
+}
+
+export interface MCPStatus {
+  enabled: boolean;
+  transport: "stdio" | "http" | null;
+  connected: boolean;
+  clientName?: string;
+  httpPort?: number;
+}
+
+export interface RemoteState {
+  user: { email: string; name?: string } | null;
+  projects: Array<{ id: string; name: string; slug: string }>;
+  /** Currently focused index in remote projects list */
+  focusedIndex: number;
+  /** Scroll offset for remote projects list */
+  scrollOffset: number;
+}
+
+export interface InputState {
+  active: boolean;
+  prompt: string;
+  value: string;
+  cursorPos: number;
+  onSubmit: ((value: string) => void) | null;
+  onCancel: (() => void) | null;
+}
+
+export interface LogMeta {
+  method?: string;
+  path?: string;
+  status?: number;
+  durationMs?: number;
+  project?: string;
+  env?: string;
+  releaseId?: string;
+}
+
+export interface LogEntry {
+  time: Date;
+  level: "info" | "warn" | "error" | "debug";
+  message: string;
+  meta?: LogMeta;
+}
+
+export interface AppState {
+  view: AppView;
+  previousView: AppView | null;
+
+  server: ServerStatus;
+  mcp: MCPStatus;
+  remote: RemoteState;
+
+  projects: ListSelectState<ProjectInfo>;
+  examples: ListSelectState<ProjectInfo>;
+  templates: ListSelectState<ProjectInfo>;
+
+  activeList: "projects" | "examples" | "templates" | "remoteProjects";
+  selectedProject: ProjectInfo | null;
+
+  wizard: {
+    step: number;
+    startType: "scratch" | "template" | "example" | null;
+    selectedTemplate: string | null;
+    integrations: string[];
+    projectName: string;
+  };
+
+  input: InputState;
+
+  logs: LogEntry[];
+  maxLogs: number;
+  logsExpanded: boolean;
+  logScroll: number;
+
+  /** Auth provider selection index (0=Google, 1=GitHub, 2=Microsoft) */
+  authProviderIndex: number;
+  /** New project option index (0=template, 1=example, 2=scratch) */
+  newProjectIndex: number;
+}
+
+export function createInitialState(): AppState {
+  return {
+    view: "dashboard",
+    previousView: null,
+    server: {
+      running: false,
+      url: "http://veryfront.me:8080",
+      port: 8080,
+      errors: 0,
+      warnings: 0,
+    },
+    mcp: {
+      enabled: false,
+      transport: null,
+      connected: false,
+    },
+    remote: {
+      user: null,
+      projects: [],
+      focusedIndex: 0,
+      scrollOffset: 0,
+    },
+    projects: createListState([]),
+    examples: createListState([]),
+    templates: createListState([]),
+    activeList: "projects",
+    selectedProject: null,
+    wizard: {
+      step: 0,
+      startType: null,
+      selectedTemplate: null,
+      integrations: [],
+      projectName: "",
+    },
+    input: {
+      active: false,
+      prompt: "",
+      value: "",
+      cursorPos: 0,
+      onSubmit: null,
+      onCancel: null,
+    },
+    logs: [],
+    maxLogs: 100,
+    logsExpanded: false,
+    logScroll: 0,
+    authProviderIndex: 0,
+    newProjectIndex: 0,
+  };
+}
+
+export type StateUpdater = (state: AppState) => AppState;
+
+export function setProjects(
+  projects: Array<{ slug: string; path: string }>,
+): StateUpdater {
+  return (state) => ({
+    ...state,
+    projects: createListState(
+      projects.map((p) => ({
+        id: p.slug,
+        label: p.slug,
+        meta: shortenPath(p.path),
+        data: { slug: p.slug, path: p.path, type: "local" },
+      })),
+    ),
+  });
+}
+
+export function setExamples(
+  examples: Array<{ slug: string; path: string; description?: string }>,
+): StateUpdater {
+  return (state) => ({
+    ...state,
+    examples: createListState(
+      examples.map((e) => ({
+        id: e.slug,
+        label: e.slug,
+        description: e.description,
+        data: { slug: e.slug, path: e.path, type: "example" },
+      })),
+    ),
+  });
+}
+
+export function setTemplates(
+  templates: Array<{ id: string; name: string; description: string }>,
+): StateUpdater {
+  return (state) => ({
+    ...state,
+    templates: createListState(
+      templates.map((t) => ({
+        id: t.id,
+        label: t.name,
+        description: t.description,
+        data: { slug: t.id, path: "", type: "template" },
+      })),
+    ),
+  });
+}
+
+export function updateServer(update: Partial<ServerStatus>): StateUpdater {
+  return (state) => ({ ...state, server: { ...state.server, ...update } });
+}
+
+export function updateMCP(update: Partial<MCPStatus>): StateUpdater {
+  return (state) => ({ ...state, mcp: { ...state.mcp, ...update } });
+}
+
+export function updateRemote(update: Partial<RemoteState>): StateUpdater {
+  return (state) => ({ ...state, remote: { ...state.remote, ...update } });
+}
+
+export function navigateTo(view: AppView): StateUpdater {
+  return (state) => ({ ...state, view, previousView: state.view });
+}
+
+export function goBack(): StateUpdater {
+  return (state) => ({
+    ...state,
+    view: state.previousView ?? "dashboard",
+    previousView: null,
+  });
+}
+
+export function setActiveList(
+  list: "projects" | "examples" | "templates" | "remoteProjects",
+): StateUpdater {
+  return (state) => ({ ...state, activeList: list });
+}
+
+export function updateActiveList(
+  updater: (list: ListSelectState<ProjectInfo>) => ListSelectState<ProjectInfo>,
+): StateUpdater {
+  return (state) => {
+    const key = state.activeList;
+    // remoteProjects is not a ListSelectState, skip update
+    if (key === "remoteProjects") return state;
+    return { ...state, [key]: updater(state[key]) };
+  };
+}
+
+export function selectProject(project: ProjectInfo | null): StateUpdater {
+  return (state) => {
+    if (!project) return { ...state, selectedProject: null };
+
+    return {
+      ...state,
+      selectedProject: project,
+      view: "project-detail",
+      previousView: state.view,
+    };
+  };
+}
+
+export function updateWizard(
+  update: Partial<AppState["wizard"]>,
+): StateUpdater {
+  return (state) => ({ ...state, wizard: { ...state.wizard, ...update } });
+}
+
+export function resetWizard(): StateUpdater {
+  return (state) => ({
+    ...state,
+    wizard: {
+      step: 0,
+      startType: null,
+      selectedTemplate: null,
+      integrations: [],
+      projectName: "",
+    },
+  });
+}
+
+export function startInput(
+  prompt: string,
+  onSubmit: (value: string) => void,
+  onCancel?: () => void,
+  initialValue?: string,
+): StateUpdater {
+  return (state) => ({
+    ...state,
+    input: {
+      active: true,
+      prompt,
+      value: initialValue ?? "",
+      cursorPos: initialValue?.length ?? 0,
+      onSubmit,
+      onCancel: onCancel ?? null,
+    },
+  });
+}
+
+export function updateInputValue(value: string, cursorPos: number): StateUpdater {
+  return (state) => ({
+    ...state,
+    input: { ...state.input, value, cursorPos },
+  });
+}
+
+export function endInput(): StateUpdater {
+  return (state) => ({
+    ...state,
+    input: {
+      active: false,
+      prompt: "",
+      value: "",
+      cursorPos: 0,
+      onSubmit: null,
+      onCancel: null,
+    },
+  });
+}
+
+export function addLog(level: LogEntry["level"], message: string, meta?: LogMeta): StateUpdater {
+  return (state) => {
+    const logs = [...state.logs, { time: new Date(), level, message, meta }];
+    if (logs.length > state.maxLogs) logs.shift();
+    return { ...state, logs };
+  };
+}
+
+export function clearLogs(): StateUpdater {
+  return (state) => ({ ...state, logs: [], logScroll: 0 });
+}
+
+export function toggleLogsExpanded(): StateUpdater {
+  return (state) => ({
+    ...state,
+    logsExpanded: !state.logsExpanded,
+    logScroll: 0,
+  });
+}
+
+export function scrollLogs(direction: "up" | "down"): StateUpdater {
+  return (state) => {
+    if (!state.logsExpanded) return state;
+
+    const maxScroll = Math.max(0, state.logs.length - 5);
+    let newScroll = state.logScroll;
+
+    if (direction === "up") {
+      newScroll = Math.min(maxScroll, state.logScroll + 1);
+    } else {
+      newScroll = Math.max(0, state.logScroll - 1);
+    }
+
+    return { ...state, logScroll: newScroll };
+  };
+}
+
+function shortenPath(path: string, env: RuntimeEnv = getRuntimeEnv()): string {
+  // Prefer relative path to cwd
+  const currentDir = cwd();
+  if (path.startsWith(currentDir + "/")) {
+    return "./" + path.slice(currentDir.length + 1);
+  }
+  if (path === currentDir) {
+    return "./";
+  }
+
+  // Fall back to ~ for home
+  const home = env.homeDir ?? "";
+  if (home && path.startsWith(home)) {
+    return `~${path.slice(home.length)}`;
+  }
+
+  return path;
+}
+
+export function getActiveSelection(
+  state: AppState,
+): ListItem<ProjectInfo> | undefined {
+  // remoteProjects is not a ListSelectState
+  if (state.activeList === "remoteProjects") return undefined;
+  const list = state[state.activeList];
+  return list.items[list.selectedIndex];
+}

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

@@ -0,0 +1,212 @@
+/**
+ * Dashboard View
+ *
+ * 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 { getTerminalWidth } from "../../ui/layout.js";
+import { getAgentFaceWithText } from "../../ui/dot-matrix.js";
+import { renderList } from "../components/list-select.js";
+import type { AppState } from "../state.js";
+
+/**
+ * Render the dashboard view
+ */
+export function renderDashboard(state: AppState): string {
+  const termWidth = Math.min(getTerminalWidth() - 4, 80);
+  const maxListWidth = termWidth - 4;
+  const lines: string[] = [];
+
+  lines.push(renderBanner(state), "");
+
+  const hasProjects = state.projects.items.length > 0;
+  const hasExamples = state.examples.items.length > 0;
+  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(
+      renderList(state.projects, {
+        maxWidth: maxListWidth,
+        visibleCount: 5,
+        showNumbers: true,
+        showSelection: isActive,
+      }),
+      "",
+    );
+  }
+
+  // Remote projects (when logged in)
+  if (hasRemoteProjects) {
+    const isRemoteActive = state.activeList === "remoteProjects";
+    const visibleCount = 5;
+    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));
+
+    if (start > 0) {
+      lines.push(`  ${dim("↑ more above")}`);
+    }
+
+    visibleProjects.forEach((p, i) => {
+      const actualIndex = start + i;
+      const isFocused = isRemoteActive && actualIndex === state.remote.focusedIndex;
+      const cursor = isFocused ? brand("›") : " ";
+      // Show number 1-9 or letter a-z for 10+
+      const displayNum = actualIndex + 1;
+      const shortcut = displayNum <= 9
+        ? String(displayNum)
+        : String.fromCharCode(96 + displayNum - 9); // 10='a', 11='b', etc.
+      const num = isFocused ? brand(`[${shortcut}]`) : dim(`[${shortcut}]`);
+      const label = isFocused ? p.slug : dim(p.slug);
+      lines.push(`${cursor} ${num} ${label}`);
+    });
+
+    if (end < state.remote.projects.length) {
+      lines.push(`  ${dim("↓ more below")}`);
+    }
+    lines.push("");
+  }
+
+  if (hasExamples) {
+    const isActive = state.activeList === "examples";
+    lines.push(renderSection("Examples", state.examples.items.length, isActive));
+    lines.push(
+      renderList(state.examples, {
+        maxWidth: maxListWidth,
+        visibleCount: 5,
+        showNumbers: true,
+        showSelection: isActive,
+      }),
+      "",
+    );
+  }
+
+  lines.push(renderHelpBar(state));
+
+  return lines.join("\n");
+}
+
+/**
+ * Render the banner with agent face and server info
+ */
+function renderBanner(state: AppState): string {
+  const serverDot = state.server.running ? success("●") : error("●");
+  const mcpDot = state.mcp.enabled ? success("●") : dim("○");
+
+  const textLines: string[] = [];
+
+  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")}`);
+    }
+  }
+
+  const { errors, warnings } = state.server;
+  if (errors > 0 || warnings > 0) {
+    const parts: string[] = [];
+    if (errors > 0) parts.push(error(`${errors} errors`));
+    if (warnings > 0) parts.push(muted(`${warnings} warnings`));
+    textLines.push(parts.join("  "));
+  }
+
+  return getAgentFaceWithText(textLines, {
+    litColor: "\x1b[38;2;252;143;93m", // Veryfront brand orange
+  });
+}
+
+/**
+ * Render a section header
+ */
+function renderSection(title: string, count: number, isActive = true): string {
+  const indicator = isActive ? brand("›") : " ";
+  const titleText = isActive ? title : dim(title);
+  return `  ${indicator} ${titleText} ${dim(`(${count})`)}`;
+}
+
+/**
+ * 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"));
+  }
+
+  parts.push(dim("↑↓ nav"));
+
+  if (hasProjects || hasExamples || hasRemoteProjects) {
+    parts.push(dim("o open"), dim("s studio"), dim("i ide"));
+  }
+
+  if (!state.remote.user) {
+    parts.push(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"));
+  }
+
+  parts.push(dim("? help"), dim("q quit"));
+
+  return `  ${parts.join("  ")}`;
+}
+
+/**
+ * Render a boxed dashboard (alternative style)
+ */
+export function renderDashboardBoxed(state: AppState): string {
+  const termWidth = Math.min(getTerminalWidth() - 4, 80);
+  const content = renderDashboard(state);
+
+  return box(content, {
+    style: "rounded",
+    title: "Veryfront Code",
+    titleColor: "\x1b[38;2;252;143;93m",
+    width: termWidth,
+    paddingX: 1,
+    paddingY: 0,
+  });
+}
+
+/**
+ * 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");
+}

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/index/command-router.ts

@@ -24,7 +24,7 @@ import { mergeCommand, parseMergeArgs } from "../commands/merge.js";
 import { deployCommand, parseDeployArgs } from "../commands/deploy.js";
 import { parseUpArgs, upCommand } from "../commands/up.js";
 import { newCommand, parseNewArgs } from "../commands/new.js";
-import { promptProjectName, showMainMenu } from "../commands/main.js";
+import { promptProjectName } from "../commands/main.js";
 import { issuesCommand } from "../commands/issues.js";
 import { login, logout, whoami } from "../auth/index.js";
 import { COMMANDS } from "../help/command-definitions.js";
@@ -41,7 +41,7 @@ import { handleBuildCommand } from "./build-handler.js";
 import { handleDevCommand } from "./dev-handler.js";
 import { handleGenerateCommand } from "./generate-handler.js";
 import { handleStudioCommand } from "./studio-handler.js";
-import { createMCPServer } from "../mcp/server.js";
+import { handleStartCommand } from "./start-handler.js";
 import type { ParsedArgs } from "./types.js";
 import type { InitTemplate } from "../commands/init/types.js";
 import type { IntegrationName } from "../templates/types.js";
@@ -437,11 +437,10 @@ export async function routeCommand(args: ParsedArgs): Promise<void> {
       }
 
       case "mcp": {
-        const server = await createMCPServer({ stdio: true });
-        await new Promise(() => {
-          /* never resolve - stdio loop runs until stdin closes */
-        });
-        await server.stop();
+        const { createMCPServer } = await import("../mcp/server.js");
+        const mcpServer = await createMCPServer({ stdio: true });
+        await new Promise(() => {});
+        await mcpServer.stop();
         break;
       }
 
@@ -454,40 +453,10 @@ export async function routeCommand(args: ParsedArgs): Promise<void> {
         exitProcess(0);
         return;
 
-      case undefined: {
-        const action = await showMainMenu();
-
-        switch (action) {
-          case "new": {
-            const name = await promptProjectName();
-            if (name) {
-              await newCommand(name, {});
-            }
-            break;
-          }
-          case "dev":
-            await handleDevCommand(args);
-            break;
-          case "deploy": {
-            const result = parseDeployArgs(args);
-            if (result.success) {
-              await deployCommand(result.data);
-            }
-            break;
-          }
-          case "login":
-            await login();
-            break;
-          case "help":
-            showHelp();
-            break;
-          case "exit":
-          case null:
-            exitProcess(0);
-            break;
-        }
+      case undefined:
+        // Default: run full TUI dashboard (like `deno task start`)
+        await handleStartCommand(args);
         break;
-      }
 
       default:
         cliLogger.error(`Unknown command: ${command}\n`);