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

@@ -99,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

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