@pulse-editor/cli 0.1.1-beta.9 → 0.1.3

package/dist/app.js

@@ -12,6 +12,9 @@ import Build from './components/commands/build.js';
 import Preview from './components/commands/preview.js';
 import Start from './components/commands/start.js';
 import Clean from './components/commands/clean.js';
+import Upgrade from './components/commands/upgrade.js';
+import Skill from './components/commands/skill.js';
+import Code from './components/commands/code.js';
 export default function App({ cli }) {
     const [command, setCommand] = useState(undefined);
     if (cli.flags.stage) {
@@ -24,5 +27,5 @@ export default function App({ cli }) {
         const cmd = cli.input[0] ?? 'help';
         setCommand(cmd);
     }, [cli.input]);
-    return (_jsxs(_Fragment, { children: [cli.flags.stage && (_jsx(Text, { color: 'yellow', children: "\u26A0\uFE0F You are in development mode." })), command === 'help' ? (_jsx(Help, { cli: cli })) : command === 'chat' ? (_jsx(Chat, { cli: cli })) : command === 'login' ? (_jsx(Login, { cli: cli })) : command === 'logout' ? (_jsx(Logout, { cli: cli })) : command === 'publish' ? (_jsx(Publish, { cli: cli })) : command === 'create' ? (_jsx(Create, { cli: cli })) : command === 'dev' ? (_jsx(Dev, { cli: cli })) : command === 'build' ? (_jsx(Build, { cli: cli })) : command === 'preview' ? (_jsx(Preview, { cli: cli })) : command === 'start' ? (_jsx(Start, { cli: cli })) : command === 'clean' ? (_jsx(Clean, { cli: cli })) : (command !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: 'redBright', children: ["Invalid command: ", command] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: 'blueBright', children: "pulse help" }), " to see the list of available commands."] })] })))] }));
+    return (_jsxs(_Fragment, { children: [cli.flags.stage && (_jsx(Text, { color: 'yellow', children: "\u26A0\uFE0F  You are in development mode." })), command === 'help' ? (_jsx(Help, { cli: cli })) : command === 'chat' ? (_jsx(Chat, { cli: cli })) : command === 'login' ? (_jsx(Login, { cli: cli })) : command === 'logout' ? (_jsx(Logout, { cli: cli })) : command === 'publish' ? (_jsx(Publish, { cli: cli })) : command === 'create' ? (_jsx(Create, { cli: cli })) : command === 'dev' ? (_jsx(Dev, { cli: cli })) : command === 'build' ? (_jsx(Build, { cli: cli })) : command === 'preview' ? (_jsx(Preview, { cli: cli })) : command === 'start' ? (_jsx(Start, { cli: cli })) : command === 'clean' ? (_jsx(Clean, { cli: cli })) : command === 'upgrade' ? (_jsx(Upgrade, { cli: cli })) : command === 'skill' ? (_jsx(Skill, { cli: cli })) : command === 'code' ? (_jsx(Code, { cli: cli })) : (command !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: 'redBright', children: ["Invalid command: ", command] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: 'blueBright', children: "pulse help" }), " to see the list of available commands."] })] })))] }));
 }

package/dist/components/commands/build.js

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { execa } from 'execa';
 import fs from 'fs';
 import { cleanDist } from '../../lib/execa-utils/clean.js';
+import { webpackCompile } from '../../lib/webpack/compile.js';
 export default function Build({ cli }) {
     useEffect(() => {
         async function buildProd() {
@@ -23,6 +24,19 @@ export default function Build({ cli }) {
                         });
                     }
                 }
+                // Create node_modules/.pulse/server directory
+                if (!fs.existsSync('node_modules/.pulse/server')) {
+                    if (process.platform === 'win32') {
+                        await execa('mkdir node_modules\\.pulse\\server', {
+                            shell: true,
+                        });
+                    }
+                    else {
+                        await execa('mkdir -p node_modules/.pulse/server', {
+                            shell: true,
+                        });
+                    }
+                }
                 if (process.platform === 'win32') {
                     await execa('xcopy /E /I node_modules\\@pulse-editor\\cli\\dist\\lib\\server node_modules\\.pulse\\server', {
                         shell: true,
@@ -35,40 +49,11 @@ export default function Build({ cli }) {
                 }
             }
             await cleanDist();
-            if (buildTarget === undefined) {
-                // Start building
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                    },
-                });
-            }
-            else if (buildTarget === 'client') {
-                // Start building client only
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                        BUILD_TARGET: 'client',
-                    },
-                });
-            }
-            else if (buildTarget === 'server') {
-                // Start building server only
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                        BUILD_TARGET: 'server',
-                    },
-                });
+            try {
+                await webpackCompile('production', buildTarget);
             }
-            else {
-                console.error(`❌ Unknown build target: ${buildTarget}`);
+            catch (err) {
+                console.error('❌ Webpack build failed', err);
             }
         }
         buildProd();

package/dist/components/commands/code.d.ts

@@ -0,0 +1,5 @@
+import { Result } from "meow";
+import { Flags } from "../../lib/cli-flags.js";
+export default function Code({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/code.js

@@ -0,0 +1,342 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import fs from "fs";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import TextInput from "ink-text-input";
+import JSZip from "jszip";
+import path from "path";
+import { useEffect, useMemo, useState } from "react";
+import { getBackendUrl } from "../../lib/backend-url.js";
+import { checkToken, getToken } from "../../lib/token.js";
+function readContinueData(cwd) {
+    const pkgPath = path.resolve(cwd, "package.json");
+    if (!fs.existsSync(pkgPath)) {
+        return null;
+    }
+    try {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+        const name = typeof pkg["name"] === "string" ? pkg["name"] : undefined;
+        const version = typeof pkg["version"] === "string" ? pkg["version"] : undefined;
+        const appId = typeof pkg["appId"] === "string" ? pkg["appId"] : name;
+        if (!appId || !version) {
+            return null;
+        }
+        return { appId, version, name: name ?? appId };
+    }
+    catch {
+        return null;
+    }
+}
+function makeAppName(prompt) {
+    const normalized = prompt
+        .toLowerCase()
+        .replaceAll(/[^a-z0-9\s-]/g, "")
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 5)
+        .join("_");
+    const suffix = Math.random().toString(36).slice(2, 8);
+    return `${normalized || "pulse_app"}_${suffix}`;
+}
+function parseArtifact(result) {
+    if (!result) {
+        return undefined;
+    }
+    try {
+        return JSON.parse(result);
+    }
+    catch {
+        return undefined;
+    }
+}
+export default function Code({ cli }) {
+    // ── Continue mode ────────────────────────────────────────────────────────
+    const continueData = useMemo(() => {
+        if (!cli.flags.continue)
+            return undefined;
+        return readContinueData(process.cwd());
+    }, [cli.flags.continue]);
+    // ── Resolved inputs ──────────────────────────────────────────────────────
+    const [appName, setAppName] = useState(() => {
+        if (cli.flags.name)
+            return cli.flags.name;
+        if (cli.flags.continue) {
+            const data = readContinueData(process.cwd());
+            return data?.name ?? undefined;
+        }
+        return undefined;
+    });
+    const [appNameInput, setAppNameInput] = useState("");
+    const [prompt, setPrompt] = useState(undefined);
+    const [promptInput, setPromptInput] = useState("");
+    // ── Auth ─────────────────────────────────────────────────────────────────
+    const [isCheckingAuth, setIsCheckingAuth] = useState(true);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    // ── Generation state ─────────────────────────────────────────────────────
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [isGenerated, setIsGenerated] = useState(false);
+    const [error, setError] = useState(undefined);
+    const [statusLines, setStatusLines] = useState([]);
+    // Per-message live streaming buffers
+    const [liveBuffers, setLiveBuffers] = useState(new Map());
+    const [toolCallErrors, setToolCallErrors] = useState([]);
+    const [artifact, setArtifact] = useState(undefined);
+    const [isDownloading, setIsDownloading] = useState(false);
+    const [downloadedPath, setDownloadedPath] = useState(undefined);
+    const [downloadError, setDownloadError] = useState(undefined);
+    const token = useMemo(() => getToken(cli.flags.stage), [cli.flags.stage]);
+    // Pre-fill prompt from inline CLI args, e.g. `pulse code "my prompt"`
+    useEffect(() => {
+        const initialPrompt = cli.input.slice(1).join(" ").trim();
+        if (initialPrompt) {
+            setPrompt(initialPrompt);
+        }
+    }, [cli.input]);
+    useEffect(() => {
+        async function runAuthCheck() {
+            if (!token) {
+                setIsAuthenticated(false);
+                setIsCheckingAuth(false);
+                return;
+            }
+            const isValid = await checkToken(token, cli.flags.stage);
+            setIsAuthenticated(isValid);
+            setIsCheckingAuth(false);
+        }
+        runAuthCheck();
+    }, [token, cli.flags.stage]);
+    useEffect(() => {
+        async function runCodeGeneration(userPrompt, resolvedAppName) {
+            if (!token) {
+                setError("Missing access token. Please run pulse login first.");
+                return;
+            }
+            setError(undefined);
+            setStatusLines([]);
+            setLiveBuffers(new Map());
+            setToolCallErrors([]);
+            setArtifact(undefined);
+            setIsDownloading(false);
+            setDownloadedPath(undefined);
+            setDownloadError(undefined);
+            setIsGenerating(true);
+            const controller = new AbortController();
+            let didTimeout = false;
+            const timeoutId = setTimeout(() => {
+                didTimeout = true;
+                controller.abort("Generation timeout after 5 minutes");
+            }, 5 * 60 * 1000);
+            const collectedMessages = new Map();
+            // Per-message live streaming buffers
+            const localBuffers = new Map();
+            let _artifact = undefined;
+            try {
+                const response = await fetch(`${getBackendUrl(cli.flags.stage)}/api/server-function/vibe_dev_flow/latest/generate-code/v2/generate`, {
+                    method: "POST",
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        prompt: userPrompt,
+                        ...(continueData
+                            ? {
+                                appId: continueData.appId,
+                                version: continueData.version,
+                            }
+                            : {
+                                appName: resolvedAppName,
+                            }),
+                    }),
+                    signal: controller.signal,
+                });
+                if (!response.ok) {
+                    throw new Error(`Code generation failed: ${response.status} ${response.statusText} - ${await response.text()}`);
+                }
+                if (!response.body) {
+                    throw new Error("No stream returned from server.");
+                }
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let buffer = "";
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) {
+                        break;
+                    }
+                    buffer += decoder.decode(value, { stream: true });
+                    const parts = buffer.split("\n\n");
+                    buffer = parts.pop() ?? "";
+                    for (const part of parts) {
+                        if (!part.startsWith("data:")) {
+                            continue;
+                        }
+                        const json = part.replace(/^data:\s*/, "");
+                        let message;
+                        try {
+                            message = JSON.parse(json);
+                        }
+                        catch {
+                            continue;
+                        }
+                        if (message.type === "creation") {
+                            collectedMessages.set(message.messageId, message);
+                            if (message.data.type === "notification") {
+                                const text = [message.data.title, message.data.description]
+                                    .filter(Boolean)
+                                    .join(": ");
+                                if (text.length > 0) {
+                                    setStatusLines((previous) => [...previous, { text }]);
+                                }
+                            }
+                            if (message.data.type === "toolCall") {
+                                const label = message.data.title
+                                    ? `Tool call: ${message.data.title}`
+                                    : "Tool call executed";
+                                setStatusLines((previous) => [
+                                    ...previous,
+                                    {
+                                        text: label,
+                                        messageId: message.messageId,
+                                        toolTitle: message.data.title,
+                                    },
+                                ]);
+                                // Start tracking this tool call's buffer
+                                localBuffers.set(message.messageId, message.data.description
+                                    ? `${message.data.description}\n`
+                                    : "");
+                                setLiveBuffers(new Map(localBuffers));
+                            }
+                            if (message.data.type === "artifactOutput") {
+                                _artifact = parseArtifact(message.data.result);
+                                setArtifact(_artifact);
+                            }
+                        }
+                        else {
+                            // update message
+                            const existing = collectedMessages.get(message.messageId);
+                            if (!existing) {
+                                continue;
+                            }
+                            const deltaResult = message.delta.result ?? "";
+                            const deltaError = message.delta.error ?? "";
+                            existing.data.result = (existing.data.result ?? "") + deltaResult;
+                            existing.data.error = (existing.data.error ?? "") + deltaError;
+                            existing.isFinal = message.isFinal;
+                            // Accumulate delta into this message's own buffer
+                            if (localBuffers.has(message.messageId) &&
+                                deltaResult.length > 0) {
+                                const current = localBuffers.get(message.messageId) ?? "";
+                                localBuffers.set(message.messageId, current + deltaResult);
+                                setLiveBuffers(new Map(localBuffers));
+                            }
+                            // Surface tool-level errors when the message is finalized
+                            if (message.isFinal && existing.data.error) {
+                                const errText = existing.data.error.trim();
+                                if (errText.length > 0) {
+                                    setToolCallErrors((previous) => [...previous, errText]);
+                                }
+                            }
+                        }
+                    }
+                }
+                setIsGenerated(true);
+                // Download the source zip
+                if (_artifact && _artifact.appId) {
+                    setIsDownloading(true);
+                    try {
+                        // Step 1: exchange the archive endpoint for a SAS URL
+                        const sasEndpoint = `${getBackendUrl(cli.flags.stage)}/api/app/source?app=${encodeURIComponent(_artifact.appId)}`;
+                        const sasResponse = await fetch(sasEndpoint, {
+                            headers: {
+                                Accept: "application/zip",
+                                Authorization: `Bearer ${token}`,
+                            },
+                        });
+                        if (!sasResponse.ok) {
+                            throw new Error(`Failed to get download link for ${_artifact.appId}: ${sasResponse.status} ${sasResponse.statusText}`);
+                        }
+                        const { url: sasUrl } = (await sasResponse.json());
+                        console.log(`SAS URL for ${_artifact.appId}: ${sasUrl}`);
+                        // Step 2: download the actual zip from the SAS URL
+                        const downloadResponse = await fetch(sasUrl);
+                        if (!downloadResponse.ok) {
+                            throw new Error(`Failed to download archive: ${downloadResponse.status} ${downloadResponse.statusText}`);
+                        }
+                        const arrayBuffer = await downloadResponse.arrayBuffer();
+                        // Extract zip in-memory and write files one by one
+                        const zip = await JSZip.loadAsync(arrayBuffer);
+                        const destDir = process.cwd();
+                        for (const [relativePath, zipEntry] of Object.entries(zip.files)) {
+                            if (zipEntry.dir)
+                                continue;
+                            const filePath = path.join(destDir, relativePath);
+                            fs.mkdirSync(path.dirname(filePath), { recursive: true });
+                            const content = await zipEntry.async("nodebuffer");
+                            fs.writeFileSync(filePath, content);
+                        }
+                        setDownloadedPath(destDir);
+                    }
+                    catch (downloadErr) {
+                        setDownloadError(downloadErr instanceof Error
+                            ? downloadErr.message
+                            : "Failed to download source archive.");
+                    }
+                    finally {
+                        setIsDownloading(false);
+                    }
+                }
+            }
+            catch (generationError) {
+                if (controller.signal.aborted && didTimeout) {
+                    setError("Code generation timed out after 5 minutes.");
+                }
+                else {
+                    setError(generationError instanceof Error
+                        ? generationError.message
+                        : "Failed to generate code.");
+                }
+            }
+            finally {
+                clearTimeout(timeoutId);
+                setIsGenerating(false);
+            }
+        }
+        if (isAuthenticated && prompt && appName && continueData !== null) {
+            runCodeGeneration(prompt, appName);
+        }
+    }, [prompt, appName, cli.flags.stage, isAuthenticated, token, continueData]);
+    function getLiveLines(messageId, toolTitle) {
+        const text = liveBuffers.get(messageId);
+        if (!text)
+            return { lines: [], truncated: false };
+        const all = text.split("\n").filter((l) => l.length > 0);
+        if (toolTitle === "Agent Message") {
+            return { lines: all, truncated: false };
+        }
+        const truncated = all.length > 8;
+        return { lines: all.slice(-8), truncated };
+    }
+    return (_jsx(_Fragment, { children: isCheckingAuth ? (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Checking authentication..." })] })) : !isAuthenticated ? (_jsx(Text, { color: "redBright", children: "\u26D4 You are not authenticated. Run pulse login and try again." })) : cli.flags.continue && continueData === null ? (_jsx(Text, { color: "redBright", children: "\u26D4 Could not read app name and version from package.json in the current directory. Make sure a valid package.json with \"name\", \"version\" (and optionally \"appId\") exists." })) : appName === undefined ? (
+        // Step 1 — app name
+        _jsxs(Box, { children: [_jsx(Text, { children: "App name: " }), _jsx(TextInput, { value: appNameInput, onChange: setAppNameInput, onSubmit: (value) => {
+                        const trimmed = value.trim();
+                        setAppName(trimmed.length > 0 ? trimmed : makeAppName(""));
+                    } })] })) : prompt === undefined ? (
+        // Step 2 — prompt
+        _jsxs(Box, { children: [_jsx(Text, { children: "Describe the Pulse app you want to generate: " }), _jsx(TextInput, { value: promptInput, onChange: setPromptInput, onSubmit: (value) => {
+                        const trimmed = value.trim();
+                        if (trimmed.length === 0) {
+                            return;
+                        }
+                        setPrompt(trimmed);
+                    } })] })) : (
+        // Step 3 — generating
+        _jsxs(_Fragment, { children: [cli.flags.continue && continueData && (_jsxs(Text, { dimColor: true, children: ["Continuing from v", continueData.version, " (", continueData.appId, ")"] })), _jsxs(Text, { children: ["App name: ", _jsx(Text, { color: "yellow", children: appName })] }), _jsxs(Text, { children: ["Prompt: ", _jsx(Text, { color: "cyan", children: prompt })] }), isGenerating && (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Generating app..." })] })), statusLines.map((item, index) => {
+                    const { lines, truncated } = item.messageId !== undefined
+                        ? getLiveLines(item.messageId, item.toolTitle)
+                        : { lines: [], truncated: false };
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: index < statusLines.length - 1, children: ["\u2022 ", item.text] }), lines.length > 0 && (_jsxs(Box, { borderStyle: "round", borderColor: "gray", flexDirection: "column", paddingX: 1, children: [truncated && (_jsx(Text, { color: "gray", dimColor: true, children: "<truncated>" })), lines.map((line, lineIndex) => (_jsx(Text, { color: "gray", children: line }, lineIndex)))] }))] }, `${item.text}-${index}`));
+                }), toolCallErrors.map((err, index) => (_jsxs(Text, { color: "redBright", children: ["\u274C ", err] }, index))), error && _jsxs(Text, { color: "redBright", children: ["\u274C ", error] }), isGenerated && !error && (_jsx(Text, { color: "greenBright", children: "\u2705 Code generation completed." })), artifact?.publishedAppLink && (_jsxs(Text, { color: "greenBright", children: ["Preview: ", artifact.publishedAppLink] })), artifact?.sourceCodeArchiveLink && (_jsxs(Text, { color: "greenBright", children: ["Source (.zip): ", artifact.sourceCodeArchiveLink] })), isDownloading && (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Downloading source archive..." })] })), downloadedPath && (_jsxs(Text, { color: "greenBright", children: ["Source extracted: ", downloadedPath] })), downloadError && (_jsxs(Text, { color: "redBright", children: ["\u274C Download failed: ", downloadError] }))] })) }));
+}

package/dist/components/commands/create.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Box, Text, useApp } from 'ink';
 import Spinner from 'ink-spinner';
 import { $, execa } from 'execa';
@@ -10,9 +10,14 @@ import path from 'path';
 export default function Create({ cli }) {
     const [framework, setFramework] = useState(undefined);
     const [projectName, setProjectName] = useState(undefined);
+    const [displayName, setDisplayName] = useState(undefined);
     const [visibility, setVisibility] = useState(undefined);
+    const projectPath = useMemo(() => {
+        return cli.flags.path ?? projectName;
+    }, [projectName, cli]);
     const [isShowFrameworkSelect, setIsShowFrameworkSelect] = useState(true);
     const [isShowProjectNameInput, setIsShowProjectNameInput] = useState(false);
+    const [isShowDisplayNameInput, setIsShowDisplayNameInput] = useState(false);
     const [isShowVisibilitySelect, setIsShowVisibilitySelect] = useState(false);
     const [createMessage, setCreateMessage] = useState();
     const [errorMessage, setErrorMessage] = useState();
@@ -59,13 +64,26 @@ export default function Create({ cli }) {
         if (projectName) {
             // Check if the project already exists
             const projectPath = path.join(process.cwd(), projectName);
-            if (fs.existsSync(projectPath)) {
+            if (fs.existsSync(projectPath) &&
+                fs.lstatSync(projectPath).isDirectory() &&
+                fs.readdirSync(projectPath).length > 0) {
                 setErrorMessage(_jsx(Text, { color: "redBright", children: "\u274C A project with same name already exists in current path." }));
                 setTimeout(() => {
                     exit();
                 }, 0);
                 return;
             }
+            const displayName = cli.flags.displayName;
+            if (displayName) {
+                setDisplayName(displayName);
+            }
+            else {
+                setIsShowDisplayNameInput(true);
+            }
+        }
+    }, [projectName, cli]);
+    useEffect(() => {
+        if (displayName) {
             const visibility = cli.flags.visibility;
             if (visibility) {
                 setVisibility(visibility);
@@ -74,50 +92,55 @@ export default function Create({ cli }) {
                 setIsShowVisibilitySelect(true);
             }
         }
-    }, [projectName, cli]);
+    }, [displayName, cli]);
     useEffect(() => {
         if (visibility && projectName) {
             createFromTemplate(projectName, visibility);
         }
     }, [visibility, projectName]);
     async function createFromTemplate(name, visibility) {
+        if (!projectPath) {
+            setErrorMessage(_jsx(Text, { color: "redBright", children: "\u274C Project path is not defined." }));
+            return;
+        }
         if (framework === 'react') {
             // Clone the template repository
             setCreateMessage(_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Creating a new Pulse Editor app using React template..." })] }));
             try {
-                await $ `git clone --depth 1 https://github.com/ClayPulse/pulse-app-template.git ${name}`;
+                await $ `git clone --depth 1 https://github.com/ClayPulse/pulse-app-template.git ${projectPath}`;
             }
             catch (error) {
-                setCreateMessage(_jsx(Text, { color: "redBright", children: "\u274C Failed to clone the template. Please check your internet connection and try again." }));
+                setCreateMessage(_jsxs(Text, { color: "redBright", children: ["\u274C Failed to clone the template. ", error.message] }));
                 return;
             }
             // Modify the package.json file to update the name
             setCreateMessage(_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Initializing project..." })] }));
             /* Setup pulse.config.ts */
-            const pulseConfigPath = path.join(process.cwd(), name, 'pulse.config.ts');
+            const pulseConfigPath = path.join(process.cwd(), projectPath, 'pulse.config.ts');
             let pulseConfig = fs.readFileSync(pulseConfigPath, 'utf8');
             // Modify visibility by matching the block that starts with 'visibility:',
             // and replacing the entire line with the new visibility value.
             pulseConfig = pulseConfig.replace(/visibility:\s*['"`](public|unlisted|private)['"`],?/, `visibility: '${visibility}',`);
             fs.writeFileSync(pulseConfigPath, pulseConfig);
             /* Setup packages.json */
-            const packageJsonPath = path.join(process.cwd(), name, 'package.json');
+            const packageJsonPath = path.join(process.cwd(), projectPath, 'package.json');
             const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
             packageJson.name = name.replaceAll('-', '_');
+            packageJson.displayName = displayName;
             // Write the modified package.json back to the file
             fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
             // Remove the .git directory
-            const gitDirPath = path.join(process.cwd(), name, '.git');
+            const gitDirPath = path.join(process.cwd(), projectPath, '.git');
             if (fs.existsSync(gitDirPath)) {
                 fs.rmSync(gitDirPath, { recursive: true, force: true });
             }
             // Remove the .github directory
-            const githubDirPath = path.join(process.cwd(), name, '.github');
+            const githubDirPath = path.join(process.cwd(), projectPath, '.github');
             if (fs.existsSync(githubDirPath)) {
                 fs.rmSync(githubDirPath, { recursive: true, force: true });
             }
             // Remove LICENSE file
-            const licenseFilePath = path.join(process.cwd(), name, 'LICENSE');
+            const licenseFilePath = path.join(process.cwd(), projectPath, 'LICENSE');
             if (fs.existsSync(licenseFilePath)) {
                 fs.rmSync(licenseFilePath, { force: true });
             }
@@ -125,7 +148,7 @@ export default function Create({ cli }) {
             // Run `npm i`
             try {
                 await execa(`npm install`, {
-                    cwd: path.join(process.cwd(), name),
+                    cwd: path.join(process.cwd(), projectPath),
                     shell: true,
                 });
             }
@@ -136,7 +159,7 @@ export default function Create({ cli }) {
             setCreateMessage(_jsx(Text, { children: "\uD83D\uDE80 Pulse Editor React app project created successfully!" }));
         }
     }
-    return (_jsxs(_Fragment, { children: [isShowFrameworkSelect && (_jsx(FrameworkSelect, { cli: cli, frameworkItems: frameworkItems, framework: framework, setFramework: setFramework })), isShowProjectNameInput && (_jsx(ProjectNameInput, { projectName: projectName, setProjectName: setProjectName })), isShowVisibilitySelect && (_jsx(VisibilitySelect, { visibility: visibility, setVisibility: setVisibility })), visibility !== undefined && (_jsxs(_Fragment, { children: [framework === 'react' && _jsx(_Fragment, { children: createMessage }), framework !== 'react' && (_jsx(Text, { children: "\uD83D\uDEA7 Currently not available. We'd like to invite you to work on these frameworks if you are interested in! Check out our tutorial to integrate your favorite web framework with Pulse Editor using Module Federation." }))] })), _jsx(Text, { children: errorMessage })] }));
+    return (_jsxs(_Fragment, { children: [isShowFrameworkSelect && (_jsx(FrameworkSelect, { cli: cli, frameworkItems: frameworkItems, framework: framework, setFramework: setFramework })), isShowProjectNameInput && (_jsx(ProjectNameInput, { projectName: projectName, setProjectName: setProjectName })), isShowDisplayNameInput && (_jsx(DisplayNameInput, { projectName: projectName ?? '', displayName: displayName, setDisplayName: setDisplayName })), isShowVisibilitySelect && (_jsx(VisibilitySelect, { visibility: visibility, setVisibility: setVisibility })), visibility !== undefined && (_jsxs(_Fragment, { children: [framework === 'react' && _jsx(_Fragment, { children: createMessage }), framework !== 'react' && (_jsx(Text, { children: "\uD83D\uDEA7 Currently not available. We'd like to invite you to work on these frameworks if you are interested in! Check out our tutorial to integrate your favorite web framework with Pulse Editor using Module Federation." }))] })), _jsx(Text, { children: errorMessage })] }));
 }
 function FrameworkSelect({ cli, frameworkItems, framework, setFramework, }) {
     return (_jsx(_Fragment, { children: !cli.flags.framework && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\uD83D\uDEA9Create a new Pulse Editor app using your favorite web framework!" }), _jsx(SelectInput, { items: frameworkItems, onSelect: item => {
@@ -146,6 +169,9 @@ function FrameworkSelect({ cli, frameworkItems, framework, setFramework, }) {
 function ProjectNameInput({ projectName, setProjectName, }) {
     return (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsx(Text, { children: "Enter your project name: " }), _jsx(UncontrolledTextInput, { onSubmit: value => setTimeout(() => setProjectName(value), 0), focus: projectName === undefined })] }) }));
 }
+function DisplayNameInput({ projectName, displayName, setDisplayName, }) {
+    return (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsxs(Text, { children: ["Enter your project display name: (default: ", projectName, ")"] }), _jsx(UncontrolledTextInput, { onSubmit: value => setTimeout(() => setDisplayName(value.length > 0 ? value : projectName), 0), focus: displayName === undefined })] }) }));
+}
 function VisibilitySelect({ visibility, setVisibility, }) {
     return (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Enter marketplace visibility for your project:" }), _jsx(SelectInput, { items: [
                     { label: 'Public', value: 'public' },

package/dist/components/commands/dev.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Text } from 'ink';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { execa } from 'execa';
 import fs from 'fs';
 import { getDepsBinPath } from '../../lib/execa-utils/deps.js';
 import { cleanDist } from '../../lib/execa-utils/clean.js';
+import { webpackCompile } from '../../lib/webpack/compile.js';
 export default function Dev({ cli }) {
     useEffect(() => {
         async function startDevServer() {
@@ -22,6 +22,19 @@ export default function Dev({ cli }) {
                     });
                 }
             }
+            // Create node_modules/.pulse/server directory
+            if (!fs.existsSync('node_modules/.pulse/server')) {
+                if (process.platform === 'win32') {
+                    await execa('mkdir node_modules\\.pulse\\server', {
+                        shell: true,
+                    });
+                }
+                else {
+                    await execa('mkdir -p node_modules/.pulse/server', {
+                        shell: true,
+                    });
+                }
+            }
             if (process.platform === 'win32') {
                 await execa('xcopy /E /I node_modules\\@pulse-editor\\cli\\dist\\lib\\server node_modules\\.pulse\\server', {
                     shell: true,
@@ -34,11 +47,13 @@ export default function Dev({ cli }) {
             }
             // Start dev server
             await cleanDist();
-            await execa(getDepsBinPath('concurrently'), [
-                '--prefix',
-                'none',
-                '"npx webpack --mode development --watch"',
-                '"tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"',
+            // Start webpack in dev watch mode and watch for changes
+            const compiler = await webpackCompile('development', undefined, true);
+            // Start server with tsx
+            await execa(getDepsBinPath('tsx'), [
+                'watch',
+                '--clear-screen=false',
+                'node_modules/@pulse-editor/cli/dist/lib/server/express.js',
             ], {
                 stdio: 'inherit',
                 shell: true,
@@ -47,8 +62,20 @@ export default function Dev({ cli }) {
                     NODE_ENV: 'development',
                 },
             });
+            // Handle process exit to close webpack compiler
+            process.on('SIGINT', () => {
+                if (compiler && typeof compiler.close === 'function') {
+                    compiler.close(() => {
+                        process.exit();
+                    });
+                }
+                else {
+                    process.exit();
+                }
+            });
         }
+        console.log('🚀 Starting development server...');
         startDevServer();
     }, []);
-    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting dev server..." }) }));
+    return _jsx(_Fragment, {});
 }