dev improvements (#457)

All the extra stuff I added in
#417 without the linting

Author: thomasballinger

.gitignore

@@ -50,3 +50,5 @@ template/pnpm-lock.yaml
 
 .vercel
 .env*.local
+
+temp_envars

.npmrc

@@ -0,0 +1 @@
+ignore-workspace-root-check=true

.prettierignore

@@ -1,3 +1,5 @@
 pnpm-lock.yaml
 .astro
 proxy/proxy.bundled.cjs
+convex/_generated
+template

README.md

@@ -117,3 +117,15 @@ You will need a lot of terminals
 There are a few steps to iterating on the template.
 
 Run `npm run rebuild-template` for directions.
+
+# Debugging
+
+We include source maps in production so you should be able to poke around in production.
+
+There are a few global variables available for debugging too:
+
+- `chefWebContainer` is the unix-ish container in which tooling and code runs
+- `chefMessages` is the raw messages
+- `chefParsedMessages` is similar
+- `chefSentryEnabled` is whether Sentry is currently enabled
+- `chefSetLogLevel()` can be called with log levels like `"debug"` or `"info"` to get more console logging. `"tracing"` is usually too much.

app/components/chat/Chat.tsx

@@ -321,9 +321,13 @@ export const Chat = memo(
       },
     });
 
+    (window as any).chefMessages = messages;
+
     // AKA "processed messages," since parsing has side effects
     const { parsedMessages, parseMessages } = useMessageParser(partCache);
 
+    (window as any).chefParsedMessages = parsedMessages;
+
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
 
     useEffect(() => {

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);
@@ -370,7 +372,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">
@@ -405,10 +407,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/components/header/DeployButton.tsx

@@ -101,7 +101,7 @@ export function DeployButton() {
       const container = await webcontainer;
 
       // Run the build command
-      const buildProcess = await container.spawn('npx', ['vite', 'build', '--mode', 'development']);
+      const buildProcess = await container.spawn('vite', ['build', '--mode', 'development']);
       const { output, exitCode } = await streamOutput(buildProcess);
       if (exitCode !== 0) {
         throw new Error(`Build failed: ${output}`);

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,30 +373,79 @@ export class ActionRunner {
         case 'deploy': {
           const container = await this.#webcontainer;
           await waitForContainerBootState(ContainerBootState.READY);
-          const convexProc = await container.spawn('sh', [
-            '-c',
-            '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,
+          result = '';
+
+          const commandErroredController = new AbortController();
+          const abortSignal = AbortSignal.any([action.abortSignal, commandErroredController.signal]);
+
+          /** Return a promise of output on success, throws an error containing output on failure. */
+          const run = async (
+            commandAndArgs: string[],
+            errorPrefix: OutputLabels,
+            onOutput?: (s: string) => void,
+          ): Promise<string> => {
+            logger.info('starting to run', errorPrefix);
+            const t0 = performance.now();
+            const proc = await container.spawn(commandAndArgs[0], commandAndArgs.slice(1));
+            const abortListener: () => void = () => proc.kill();
+            abortSignal.addEventListener('abort', () => {
+              logger.info('aborting', commandAndArgs);
+              proc.kill();
+            });
+            const { output, exitCode } = await streamOutput(proc, { onOutput, debounceMs: 50 });
+
+            const cleanedOutput = cleanConvexOutput(output);
+            const time = performance.now() - t0;
+            logger.debug('finished', errorPrefix, 'in', Math.round(time));
+            if (exitCode !== 0) {
+              // Kill all other commands
+              commandErroredController.abort(`${errorPrefix}`);
+              // This command's output will be reported exclusively
+              throw new Error(`[${errorPrefix}] Failed with exit code ${exitCode}: ${cleanedOutput}`);
+            }
+            abortSignal.removeEventListener('abort', abortListener);
+            if (cleanedOutput.trim().length === 0) {
+              return '';
+            }
+            return cleanedOutput + '\n\n';
+          };
+
+          //         START         deploy tool call
+          //          /
+          //         /
+          //  codegen              `convex typecheck` includes typecheck of convex/ dir
+          // + typecheck
+          //       |
+          //       |
+          // app typecheck         `tsc --noEmit --project tsconfig.app.json
+          //         \
+          //          \
+          //         deploy        `deploy` can fail
+
+          const runCodegenAndTypecheck = async (onOutput?: (output: string) => void) => {
+            // Convex codegen does a convex directory typecheck, then tsc does a full-project typecheck.
+            let output = await run(['convex', 'codegen'], outputLabels.convexTypecheck, onOutput);
+            output += await run(
+              ['tsc', '--noEmit', '-p', 'tsconfig.app.json'],
+              outputLabels.frontendTypecheck,
+              onOutput,
+            );
+            return output;
+          };
+
+          const t0 = performance.now();
+          result += await runCodegenAndTypecheck((output) => {
+            this.terminalOutput.set(output);
           });
-          const cleanedOutput = cleanConvexOutput(output);
-          if (exitCode !== 0) {
-            throw new Error(`Convex failed with exit code ${exitCode}: ${cleanedOutput}`);
-          }
-          result = cleanedOutput;
+          result += await run(['convex', 'dev', '--once', '--typecheck=disable'], outputLabels.convexDeploy);
+          const time = performance.now() - t0;
+          logger.info('deploy action finished in', time);
 
           // Start the default preview if it’s not already running
           if (!workbenchStore.isDefaultPreviewRunning()) {
             const shell = this.#shellTerminal();
-            await shell.startCommand('npx vite --open');
+            await shell.startCommand('vite --open');
             result += '\n\nDev server started successfully!';
           }
 

app/lib/runtime/deployToolOutputLabels.ts

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

app/lib/stores/startup/history.ts

@@ -14,6 +14,9 @@ import {
   prepareMessageHistory,
   waitForNewMessages,
 } from './messages';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('history');
 
 const BACKUP_DEBOUNCE_MS = 1000;
 
@@ -121,7 +124,7 @@ async function chatSyncWorker(args: { chatId: string; sessionId: Id<'sessions'>;
     const currentState = await waitForInitialized();
     const completeMessageInfo = lastCompleteMessageInfoStore.get();
     if (completeMessageInfo === null) {
-      console.error('Complete message info not initialized');
+      logger.error('Complete message info not initialized');
       continue;
     }
     const areMessagesUpToDate =
@@ -187,7 +190,7 @@ async function chatSyncWorker(args: { chatId: string; sessionId: Id<'sessions'>;
       );
     }
     if (messageBlob === undefined && snapshotBlob === undefined) {
-      console.info('No updates to chat, skipping sync');
+      logger.info('Complete message info not initialized');
       continue;
     }
     let response;
@@ -209,13 +212,13 @@ async function chatSyncWorker(args: { chatId: string; sessionId: Id<'sessions'>;
     }
     if (error !== null || (response !== undefined && !response.ok)) {
       const errorText = response !== undefined ? await response.text() : (error?.message ?? 'Unknown error');
-      console.error('Failed to save chat:', errorText);
+      logger.error('Complete message info not initialized');
       chatSyncState.set({
         ...currentState,
         numFailures: currentState.numFailures + 1,
       });
       const sleepTime = backoffTime(currentState.numFailures);
-      console.error(
+      logger.error(
         `Failed to save chat (num failures: ${currentState.numFailures}), sleeping for ${sleepTime.toFixed(2)}ms`,
         errorText,
       );