chore: automatic CLI rebuild on file change (#125)

* chore: automatic CLI rebuild on file change

* feat(cli): Show running VMs in CLI dashboard (#129)

* organize code and add view context to manage views

* better types for views

* add list of running VMs

* Install chalk and date-fns packages

* Update CLI tool look and feel a bit

* Create custom components and show vms on dashboard

Author: tristandubbeld

package-lock.json

@@ -37,6 +37,7 @@
   },
   "types": "./dist/esm/index.d.ts",
   "scripts": {
+    "dev:cli": "node scripts/dev-cli.cjs",
     "build": "npm run clean && npm run build:esbuild && npm run build:cjs:types && npm run build:esm:types && chmod +x dist/bin/codesandbox.mjs",
     "build:esbuild": "node esbuild.cjs",
     "build:cjs:types": "tsc -p ./tsconfig.build-cjs.json --emitDeclarationOnly",
@@ -69,6 +70,7 @@
   ],
   "devDependencies": {
     "@hey-api/openapi-ts": "^0.63.2",
+    "@parcel/watcher": "^2.5.1",
     "@types/blessed": "^0.1.25",
     "@types/node": "^22.15.30",
     "@types/react": "^19.1.5",
@@ -97,6 +99,8 @@
     "blessed": "^0.1.81",
     "blessed-contrib": "^4.11.0",
     "cli-table3": "^0.6.3",
+    "chalk": "^5.4.1",
+    "date-fns": "^4.1.0",
     "isbinaryfile": "^5.0.4",
     "isomorphic-ws": "^5.0.0",
     "ora": "^8.2.0",

package.json

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+
+const watcher = require("@parcel/watcher");
+const { execSync } = require("child_process");
+const path = require("path");
+
+console.log("🚀 Starting CLI development mode...");
+console.log("");
+
+const buildCliOnly = () => {
+  console.log("🔨 Building CLI...");
+  console.log("");
+
+  const startTime = Date.now();
+
+  try {
+    execSync("node esbuild.cjs", { stdio: "inherit" });
+    execSync("chmod +x dist/bin/codesandbox.mjs", { stdio: "inherit" });
+
+    const duration = Date.now() - startTime;
+
+    console.log(`✅ CLI build completed in ${duration}ms`);
+    console.log("");
+
+    return true;
+  } catch (error) {
+    console.error("❌ CLI build failed:", error.message);
+    console.log("");
+
+    return false;
+  }
+};
+
+console.log("🔨 Initial build...");
+console.log("");
+
+try {
+  execSync("npm run build", { stdio: "inherit" });
+
+  console.log("✅ Initial build completed, watching for changes...");
+  console.log("");
+} catch (error) {
+  console.error("❌ Initial build failed:", error.message);
+  process.exit(1);
+}
+
+const startWatching = async () => {
+  const watchPath = path.join(__dirname, "../src/bin");
+
+  try {
+    let subscription = await watcher.subscribe(watchPath, (err, events) => {
+      if (err) {
+        console.error("❌ Watcher error:", err);
+        return;
+      }
+
+      // Filter out temporary files and directories
+      const relevantEvents = events.filter((event) => {
+        const filename = path.basename(event.path);
+        const validExtensions = [".ts", ".tsx", ".js", ".jsx"];
+        
+        return (
+          !filename.startsWith(".") &&
+          !filename.includes("node_modules") &&
+          validExtensions.some(ext => filename.endsWith(ext))
+        );
+      });
+
+      if (relevantEvents.length === 0) {
+        return;
+      }
+
+      console.log(`📝 File${relevantEvents.length > 1 ? "s" : ""} changed:`);
+
+      relevantEvents.forEach((event) => {
+        const relativePath = path.relative(process.cwd(), event.path);
+        console.log(`   ${event.type}: ${relativePath}`);
+      });
+
+      console.log("");
+
+      const shouldRebuild = buildCliOnly();
+
+      if (!shouldRebuild) {
+        console.log("🔄 Watching for changes...");
+        console.log("");
+      }
+    });
+
+    // Handle graceful shutdown
+    process.on("SIGINT", async () => {
+      console.log("\n🛑 Stopping watcher...");
+      await subscription.unsubscribe();
+      process.exit(0);
+    });
+  } catch (error) {
+    console.error("❌ Failed to start watcher:", error);
+    process.exit(1);
+  }
+};
+
+startWatching();

scripts/dev-cli.cjs

@@ -6,21 +6,24 @@ import { buildCommand } from "./commands/build";
 import { sandboxesCommand } from "./commands/sandbox";
 import { previewHostsCommand } from "./commands/previewHosts";
 import { hostTokensCommand } from "./commands/hostTokens";
-import { Dashboard } from "./ui/Dashboard";
+import { App } from "./ui/App";
 import React from "react";
 import { SDKProvider } from "./ui/sdkContext";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ViewProvider } from "./ui/viewContext";
 
 if (process.argv.length === 2) {
-  // Clear the screen before rendering the dashboard
+  // Clear the screen before rendering the App
   process.stdout.write("\x1Bc");
 
   const queryClient = new QueryClient();
 
   render(
     <QueryClientProvider client={queryClient}>
       <SDKProvider>
-        <Dashboard />
+        <ViewProvider>
+          <App />
+        </ViewProvider>
       </SDKProvider>
     </QueryClientProvider>,
     {

src/bin/main.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { Dashboard } from "./views/Dashboard";
+import { useView } from "./viewContext";
+import { Sandbox } from "./views/Sandbox";
+import { useTerminalSize } from "./hooks/useTerminalSize";
+
+export function App() {
+  const [stdoutWidth, stdoutHeight] = useTerminalSize();
+  const { view } = useView();
+
+  return (
+    <Box flexDirection="column" width={stdoutWidth} height={stdoutHeight} padding={1}>
+      <Box marginBottom={1}>
+        <Text bold>□ CodeSandbox SDK</Text>
+      </Box>
+      {view.name === "dashboard" && <Dashboard />}
+      {view.name === "sandbox" && <Sandbox />}
+    </Box>
+  );
+}