run stuff in parallel!

Author: thomasballinger

app/components/chat/Chat.tsx

@@ -277,6 +277,8 @@ export const Chat = memo(
       },
     });
 
+    (window as any).chefMessages = messages;
+
     useEffect(() => {
       const prompt = searchParams.get('prompt');
 

app/components/chat/ToolCall.tsx

@@ -32,6 +32,8 @@ import { deployToolParameters } from '~/lib/runtime/deployTool';
 import type { ZodError } from 'zod';
 import { Spinner } from '@ui/Spinner';
 import { FolderIcon } from '@heroicons/react/24/outline';
+import { getRelativePath } from '~/lib/stores/files';
+import { outputLabels } from '~/lib/runtime/deployToolOutputLabels';
 
 export const ToolCall = memo(function ToolCall({ partId, toolCallId }: { partId: PartId; toolCallId: string }) {
   const userToggledAction = useRef(false);
@@ -394,7 +396,7 @@ function toolTitle(invocation: ConvexToolInvocation): React.ReactNode {
         extra = ` (lines ${start} - ${endName})`;
       }
       if (args.success) {
-        renderedPath = args.data.path || '/home/project';
+        renderedPath = getRelativePath(args.data.path) || '/home/project';
       }
       return (
         <div className="flex items-center gap-2">
@@ -429,10 +431,8 @@ function toolTitle(invocation: ConvexToolInvocation): React.ReactNode {
         );
       } else if (invocation.result?.startsWith('Error:')) {
         if (
-          // This is a hack, but `npx convex dev` prints this out when the typecheck fails
-          invocation.result.includes('To ignore failing typecheck') ||
-          // this is a bigger hack! TypeScript fails with error codes like TS
-          invocation.result.includes('Error TS')
+          invocation.result.includes(outputLabels.convexTypecheck) ||
+          invocation.result.includes(outputLabels.frontendTypecheck)
         ) {
           return (
             <div className="flex items-center gap-2">

app/lib/runtime/action-runner.ts

@@ -17,6 +17,7 @@ import { z } from 'zod';
 import { editToolParameters } from './editTool';
 import { getAbsolutePath } from '~/lib/stores/files';
 import { streamOutput } from '~/utils/process';
+import { outputLabels, type OutputLabels } from './deployToolOutputLabels';
 
 const logger = createScopedLogger('ActionRunner');
 
@@ -372,25 +373,88 @@ export class ActionRunner {
         case 'deploy': {
           const container = await this.#webcontainer;
           await waitForContainerBootState(ContainerBootState.READY);
-          const convexProc = await container.spawn('sh', [
-            '-c',
-            'eslint . && convex dev --once && tsc --noEmit -p tsconfig.app.json',
-          ]);
-          action.abortSignal.addEventListener('abort', () => {
-            convexProc.kill();
-          });
-
-          const { output, exitCode } = await streamOutput(convexProc, {
-            onOutput: (output) => {
-              this.terminalOutput.set(output);
-            },
-            debounceMs: 50,
-          });
-          const cleanedOutput = cleanConvexOutput(output);
-          if (exitCode !== 0) {
-            throw new Error(`Convex failed with exit code ${exitCode}: ${cleanedOutput}`);
+
+          // TODO need to get the output into here
+          result = '';
+
+          /** Return a promise of output on success, throws an error containing output on failure. */
+          const run = async (command: string, args: string[], errorPrefix: OutputLabels): Promise<string> => {
+            const t0 = performance.now();
+            const proc = await container.spawn(command, args);
+            let abortListener: () => void = () => {
+              proc.kill();
+            };
+            action.abortSignal.addEventListener('abort', abortListener);
+            const { output: output, exitCode: exitCode } = await streamOutput(proc, {
+              onOutput: (output) => {
+                this.terminalOutput.set(output);
+              },
+              debounceMs: 50,
+            });
+
+            const cleanedOutput = cleanConvexOutput(output);
+            const time = performance.now() - t0;
+            logger.trace('finished', errorPrefix, 'in', Math.round(time));
+            if (exitCode !== 0) {
+              throw new Error(`[${errorPrefix}] Failed with exit code ${exitCode}: ${cleanedOutput}`);
+            }
+            action.abortSignal.removeEventListener('abort', abortListener);
+            return cleanedOutput + '\n\n';
+          };
+
+          /*
+          result += await run(
+            'sh',
+            [
+              '-c',
+              'convex codegen' +
+                ' && tsc --noEmit -p tsconfig.app.json' +
+                ' && eslint convex' +
+                ' && convex dev --once --typecheck=disable',
+            ],
+            'do everything' as any,
+          );
+          */
+
+          const t0 = performance.now();
+          result += await run('convex', ['codegen', '--typecheck=disable'], outputLabels.convexTypecheck);
+
+          // what if we ran tsc, eslint, and deploy all at the same time?
+          const tscP = await run('tsc', ['--noEmit', '-p', 'tsconfig.app.json'], outputLabels.frontendTypecheck);
+
+          const eslintP = (async function maybeRunEslint(): Promise<string> {
+            // Only run eslint if the file we expect is present and contains '@convex-dev/eslint-plugin'
+            // Projects created with older versions of Chef have this file but it does not container
+            // @convex-dev/eslint-plugin.
+            let contents = '';
+            try {
+              contents = await container.fs.readFile('eslint.config.js', 'utf-8');
+            } catch (e: any) {
+              if (!e.message.includes('ENOENT: no such file or directory')) {
+                throw e;
+              }
+            }
+            if (contents.includes('@convex-dev/eslint-plugin')) {
+              await run('eslint', ['convex'], outputLabels.convexLint);
+            }
+            return '';
+          })();
+
+          const deployP = run('convex', ['dev', '--once', '--typecheck=disable'], outputLabels.convexDeploy);
+
+          const [tscResult, eslintResult, deployResult] = await Promise.allSettled([tscP, eslintP, deployP]);
+          console.log('parallel stuff done in', performance.now() - t0);
+          // TODO abort later ones?
+          // Throw the first failure in this order
+          for (const pResult of [tscResult, eslintResult, deployResult]) {
+            if (pResult.status === 'fulfilled') {
+              result += pResult.value;
+            } else {
+              throw pResult.reason;
+            }
           }
-          result = cleanedOutput;
+
+          result += await run('convex', ['dev', '--once', '--typecheck=disable'], outputLabels.convexDeploy);
 
           // Start the default preview if it’s not already running
           if (!workbenchStore.isDefaultPreviewRunning()) {

app/lib/runtime/deployToolOutputLabels.ts

@@ -0,0 +1,8 @@
+export const outputLabels = {
+  convexCodegen: '[ConvexCodegen]',
+  convexTypecheck: '[ConvexTypecheck]',
+  frontendTypecheck: '[FrontendTypecheck]',
+  convexLint: '[ConvexLint]',
+  convexDeploy: '[convexDeploy]',
+} as const;
+export type OutputLabels = (typeof outputLabels)[keyof typeof outputLabels];

app/lib/stores/startup/useContainerSetup.ts

@@ -18,7 +18,7 @@ import { workbenchStore } from '~/lib/stores/workbench.client';
 import { initializeConvexAuth } from '~/lib/convexAuth';
 import { appendEnvVarIfNotSet } from '~/utils/envFileUtils';
 
-const TEMPLATE_URL = '/template-snapshot-24853bcf.bin';
+const TEMPLATE_URL = '/template-snapshot-dbe070eb.bin';
 
 export function useNewChatContainerSetup() {
   const convex = useConvex();
@@ -82,6 +82,8 @@ async function setupContainer(
   // we won't receive file events for snapshot files.
   await workbenchStore.prewarmWorkdir(container);
 
+  (window as any).chefWebContainer = container;
+
   setContainerBootState(ContainerBootState.DOWNLOADING_DEPENDENCIES);
   const npm = await container.spawn('npm', ['install', '--no-fund', '--no-deprecated']);
   const { output, exitCode } = await streamOutput(npm);

app/styles/components/editor.css

@@ -20,7 +20,7 @@
   /* Cursor */
 
   --cm-cursor-width: 2px;
-  --cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, var(--content-secondary));
+  --cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, rgb(var(--content-secondary)));
 
   /* Matching Brackets */
 

make-bootstrap-snapshot.js

@@ -32,6 +32,7 @@ async function main() {
   console.log(`Writing snapshot (${compressed.length} bytes) to ${filename}...`);
   await fs.writeFile(`public/${filename}`, compressed);
   console.log("Done!");
+  console.log("Next update TEMPLATE_URL in app/lib/stores/startup/useContainerSetup.ts to see your change.");
 }
 
 async function getSnapshotFiles(dir) {

package.json

@@ -11,7 +11,7 @@
     "build": "remix vite:build",
     "build:proxy": "node proxy/build.cjs",
     "dev": "remix vite:dev",
-    "rebuild-template": "node make-bootstrap-snapshot.js && open http://localhost:5173/admin/build-snapshot",
+    "rebuild-template": "node make-bootstrap-snapshot.js",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint:app": "eslint --cache --cache-location ./node_modules/.cache/eslint app",

public/template-snapshot-dbe070eb.bin

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@convex-dev/auth": "^0.0.80",
-    "@convex-dev/eslint-plugin": "^0.0.1-alpha.2",
+    "@convex-dev/eslint-plugin": "0.0.1-alpha.3",
     "clsx": "^2.1.1",
     "convex": "1.21.1-alpha.1",
     "react": "^19.0.0",