diff --git a/.github/workflows/release_system_prompts.yml b/.github/workflows/release_system_prompts.yml new file mode 100644 index 00000000..66f7fabd --- /dev/null +++ b/.github/workflows/release_system_prompts.yml @@ -0,0 +1,61 @@ +name: Create System Prompts Release + +on: + push: + branches: + - main + paths: + - 'codinit-agent/prompts/**' + workflow_dispatch: # Allow manual triggering + +permissions: + contents: write + pull-requests: read + +jobs: + release: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup and Build + uses: ./.github/actions/setup-and-build + + - name: Build System Prompts + run: | + pnpm run build:system-prompts + node dist/buildSystemPrompts.js + + - name: Create Release + id: create_release + uses: rymndhng/release-on-push-action@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + bump_version_scheme: patch + tag_prefix: prompts-v + release_name: 'codinit System Prompts ' + release_body: | + ## codinit System Prompts Release + + This release contains the compiled system prompts used by the codinit AI assistant. + + ### Files included: + - `codinit-system-prompts.txt` - Complete system prompts as sent to the AI model + + Generated automatically from the latest prompt changes in the codinit-agent. + + - name: Upload Release Assets + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: | + if [ -f "codinit-system-prompts.txt" ]; then + gh release upload "${{ steps.create_release.outputs.tag_name }}" "codinit-system-prompts.txt" --clobber + echo "✅ Uploaded codinit-system-prompts.txt to release" + else + echo "❌ codinit-system-prompts.txt not found" + exit 1 + fi diff --git a/.gitignore b/.gitignore index e2609f4e..68c12c62 100644 --- a/.gitignore +++ b/.gitignore @@ -52,4 +52,5 @@ CLAUDE.md AGENTS.md* .mcp.json .claude -backend \ No newline at end of file +backend +.kiro \ No newline at end of file diff --git a/app/components/deploy/CloudflareDeploy.client.tsx b/app/components/deploy/CloudflareDeploy.client.tsx index 2ac650f1..731e21ad 100644 --- a/app/components/deploy/CloudflareDeploy.client.tsx +++ b/app/components/deploy/CloudflareDeploy.client.tsx @@ -2,10 +2,12 @@ import { toast } from 'react-toastify'; import { useStore } from '@nanostores/react'; import { cloudflareConnection } from '~/lib/stores/cloudflare'; import { workbenchStore } from '~/lib/stores/workbench'; +import { alertsStore } from '~/lib/stores/alerts'; import { webcontainer } from '~/lib/webcontainer'; import { path } from '~/utils/path'; import { useState } from 'react'; -import type { ActionCallbackData } from '~/lib/runtime/message-parser'; +import type { ActionCallbackData } from 'codinit-agent/message-parser'; +import { makePartId } from 'codinit-agent/partId'; import { chatId } from '~/lib/persistence/useChatHistory'; export function useCloudflareDeploy() { @@ -35,21 +37,27 @@ export function useCloudflareDeploy() { // Create a deployment artifact for visual feedback const deploymentId = `deploy-cloudflare-project`; + const partId = makePartId(deploymentId, 0); workbenchStore.addArtifact({ id: deploymentId, - messageId: deploymentId, + partId, title: 'Cloudflare Pages Deployment', type: 'standalone', }); - const deployArtifact = workbenchStore.artifacts.get()[deploymentId]; - // Notify that build is starting - deployArtifact.runner.handleDeployAction('building', 'running', { source: 'cloudflare' }); + alertsStore.setDeployAlert({ + type: 'info', + title: 'Cloudflare Deployment', + description: 'Building project...', + stage: 'building', + buildStatus: 'running', + source: 'cloudflare', + }); const actionId = 'build-' + Date.now(); const actionData: ActionCallbackData = { - messageId: 'cloudflare build', + partId: makePartId('cloudflare-build', 0), artifactId: artifact.id, actionId, action: { @@ -61,20 +69,32 @@ export function useCloudflareDeploy() { // Add the action first artifact.runner.addAction(actionData); - // Then run it - await artifact.runner.runAction(actionData); + // Run the build action + await artifact.runner.runAction(actionData, { isStreaming: false }); if (!artifact.runner.buildOutput) { // Notify that build failed - deployArtifact.runner.handleDeployAction('building', 'failed', { - error: 'Build failed. Check the terminal for details.', + alertsStore.setDeployAlert({ + type: 'error', + title: 'Cloudflare Deployment Failed', + description: 'Build failed. Check the terminal for details.', + stage: 'building', + buildStatus: 'failed', source: 'cloudflare', }); throw new Error('Build failed'); } // Notify that build succeeded and deployment is starting - deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'cloudflare' }); + alertsStore.setDeployAlert({ + type: 'info', + title: 'Cloudflare Deployment', + description: 'Build successful. Starting deployment...', + stage: 'building', + buildStatus: 'complete', + deployStatus: 'running', + source: 'cloudflare', + }); // Get the build files const container = await webcontainer; @@ -156,8 +176,12 @@ export function useCloudflareDeploy() { console.error('Invalid deploy response:', data); // Notify that deployment failed - deployArtifact.runner.handleDeployAction('deploying', 'failed', { - error: data.error || 'Invalid deployment response', + alertsStore.setDeployAlert({ + type: 'error', + title: 'Cloudflare Deployment Failed', + description: data.error || 'Invalid deployment response', + stage: 'deploying', + deployStatus: 'failed', source: 'cloudflare', }); throw new Error(data.error || 'Invalid deployment response'); @@ -169,7 +193,12 @@ export function useCloudflareDeploy() { } // Notify that deployment completed successfully - deployArtifact.runner.handleDeployAction('complete', 'complete', { + alertsStore.setDeployAlert({ + type: 'success', + title: 'Cloudflare Deployment Complete', + description: 'Your project has been deployed successfully!', + stage: 'complete', + deployStatus: 'complete', url: data.deploy.url, source: 'cloudflare', }); diff --git a/app/components/deploy/NetlifyDeploy.client.tsx b/app/components/deploy/NetlifyDeploy.client.tsx index 62b95f44..6aca5f6d 100644 --- a/app/components/deploy/NetlifyDeploy.client.tsx +++ b/app/components/deploy/NetlifyDeploy.client.tsx @@ -2,10 +2,12 @@ import { toast } from 'react-toastify'; import { useStore } from '@nanostores/react'; import { netlifyConnection } from '~/lib/stores/netlify'; import { workbenchStore } from '~/lib/stores/workbench'; +import { alertsStore } from '~/lib/stores/alerts'; import { webcontainer } from '~/lib/webcontainer'; import { path } from '~/utils/path'; import { useState } from 'react'; -import type { ActionCallbackData } from '~/lib/runtime/message-parser'; +import type { ActionCallbackData } from 'codinit-agent/message-parser'; +import { makePartId } from 'codinit-agent/partId'; import { chatId } from '~/lib/persistence/useChatHistory'; export function useNetlifyDeploy() { @@ -35,22 +37,28 @@ export function useNetlifyDeploy() { // Create a deployment artifact for visual feedback const deploymentId = `deploy-artifact`; + const partId = makePartId(deploymentId, 0); workbenchStore.addArtifact({ id: deploymentId, - messageId: deploymentId, + partId, title: 'Netlify Deployment', type: 'standalone', }); - const deployArtifact = workbenchStore.artifacts.get()[deploymentId]; - // Notify that build is starting - deployArtifact.runner.handleDeployAction('building', 'running', { source: 'netlify' }); + alertsStore.setDeployAlert({ + type: 'info', + title: 'Netlify Deployment', + description: 'Building project...', + stage: 'building', + buildStatus: 'running', + source: 'netlify', + }); // Set up build action const actionId = 'build-' + Date.now(); const actionData: ActionCallbackData = { - messageId: 'netlify build', + partId: makePartId('netlify-build', 0), artifactId: artifact.id, actionId, action: { @@ -62,20 +70,32 @@ export function useNetlifyDeploy() { // Add the action first artifact.runner.addAction(actionData); - // Then run it - await artifact.runner.runAction(actionData); + // Run the build action + await artifact.runner.runAction(actionData, { isStreaming: false }); if (!artifact.runner.buildOutput) { // Notify that build failed - deployArtifact.runner.handleDeployAction('building', 'failed', { - error: 'Build failed. Check the terminal for details.', + alertsStore.setDeployAlert({ + type: 'error', + title: 'Netlify Deployment Failed', + description: 'Build failed. Check the terminal for details.', + stage: 'building', + buildStatus: 'failed', source: 'netlify', }); throw new Error('Build failed'); } // Notify that build succeeded and deployment is starting - deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'netlify' }); + alertsStore.setDeployAlert({ + type: 'info', + title: 'Netlify Deployment', + description: 'Build successful. Starting deployment...', + stage: 'building', + buildStatus: 'complete', + deployStatus: 'running', + source: 'netlify', + }); // Get the build files const container = await webcontainer; @@ -158,8 +178,12 @@ export function useNetlifyDeploy() { console.error('Invalid deploy response:', data); // Notify that deployment failed - deployArtifact.runner.handleDeployAction('deploying', 'failed', { - error: data.error || 'Invalid deployment response', + alertsStore.setDeployAlert({ + type: 'error', + title: 'Netlify Deployment Failed', + description: data.error || 'Invalid deployment response', + stage: 'deploying', + deployStatus: 'failed', source: 'netlify', }); throw new Error(data.error || 'Invalid deployment response'); @@ -188,8 +212,12 @@ export function useNetlifyDeploy() { if (deploymentStatus.state === 'error') { // Notify that deployment failed - deployArtifact.runner.handleDeployAction('deploying', 'failed', { - error: 'Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'), + alertsStore.setDeployAlert({ + type: 'error', + title: 'Netlify Deployment Failed', + description: 'Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'), + stage: 'deploying', + deployStatus: 'failed', source: 'netlify', }); throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error')); @@ -206,8 +234,12 @@ export function useNetlifyDeploy() { if (attempts >= maxAttempts) { // Notify that deployment timed out - deployArtifact.runner.handleDeployAction('deploying', 'failed', { - error: 'Deployment timed out', + alertsStore.setDeployAlert({ + type: 'error', + title: 'Netlify Deployment Failed', + description: 'Deployment timed out', + stage: 'deploying', + deployStatus: 'failed', source: 'netlify', }); throw new Error('Deployment timed out'); @@ -219,7 +251,12 @@ export function useNetlifyDeploy() { } // Notify that deployment completed successfully - deployArtifact.runner.handleDeployAction('complete', 'complete', { + alertsStore.setDeployAlert({ + type: 'success', + title: 'Netlify Deployment Complete', + description: 'Your project has been deployed successfully!', + stage: 'complete', + deployStatus: 'complete', url: deploymentStatus.ssl_url || deploymentStatus.url, source: 'netlify', }); diff --git a/app/components/deploy/VercelDeploy.client.tsx b/app/components/deploy/VercelDeploy.client.tsx index 22ceb393..b863ce9d 100644 --- a/app/components/deploy/VercelDeploy.client.tsx +++ b/app/components/deploy/VercelDeploy.client.tsx @@ -2,10 +2,12 @@ import { toast } from 'react-toastify'; import { useStore } from '@nanostores/react'; import { vercelConnection } from '~/lib/stores/vercel'; import { workbenchStore } from '~/lib/stores/workbench'; +import { alertsStore } from '~/lib/stores/alerts'; import { webcontainer } from '~/lib/webcontainer'; import { path } from '~/utils/path'; import { useState } from 'react'; -import type { ActionCallbackData } from '~/lib/runtime/message-parser'; +import type { ActionCallbackData } from 'codinit-agent/message-parser'; +import { makePartId } from 'codinit-agent/partId'; import { chatId } from '~/lib/persistence/useChatHistory'; export function useVercelDeploy() { @@ -35,21 +37,27 @@ export function useVercelDeploy() { // Create a deployment artifact for visual feedback const deploymentId = `deploy-vercel-project`; + const partId = makePartId(deploymentId, 0); workbenchStore.addArtifact({ id: deploymentId, - messageId: deploymentId, + partId, title: 'Vercel Deployment', type: 'standalone', }); - const deployArtifact = workbenchStore.artifacts.get()[deploymentId]; - // Notify that build is starting - deployArtifact.runner.handleDeployAction('building', 'running', { source: 'vercel' }); + alertsStore.setDeployAlert({ + type: 'info', + title: 'Vercel Deployment', + description: 'Building project...', + stage: 'building', + buildStatus: 'running', + source: 'vercel', + }); const actionId = 'build-' + Date.now(); const actionData: ActionCallbackData = { - messageId: 'vercel build', + partId: makePartId('vercel-build', 0), artifactId: artifact.id, actionId, action: { @@ -61,20 +69,32 @@ export function useVercelDeploy() { // Add the action first artifact.runner.addAction(actionData); - // Then run it - await artifact.runner.runAction(actionData); + // Run the build action + await artifact.runner.runAction(actionData, { isStreaming: false }); if (!artifact.runner.buildOutput) { // Notify that build failed - deployArtifact.runner.handleDeployAction('building', 'failed', { - error: 'Build failed. Check the terminal for details.', + alertsStore.setDeployAlert({ + type: 'error', + title: 'Vercel Deployment Failed', + description: 'Build failed. Check the terminal for details.', + stage: 'building', + buildStatus: 'failed', source: 'vercel', }); throw new Error('Build failed'); } // Notify that build succeeded and deployment is starting - deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'vercel' }); + alertsStore.setDeployAlert({ + type: 'info', + title: 'Vercel Deployment', + description: 'Build successful. Starting deployment...', + stage: 'building', + buildStatus: 'complete', + deployStatus: 'running', + source: 'vercel', + }); // Get the build files const container = await webcontainer; @@ -157,8 +177,12 @@ export function useVercelDeploy() { console.error('Invalid deploy response:', data); // Notify that deployment failed - deployArtifact.runner.handleDeployAction('deploying', 'failed', { - error: data.error || 'Invalid deployment response', + alertsStore.setDeployAlert({ + type: 'error', + title: 'Vercel Deployment Failed', + description: data.error || 'Invalid deployment response', + stage: 'deploying', + deployStatus: 'failed', source: 'vercel', }); throw new Error(data.error || 'Invalid deployment response'); @@ -169,7 +193,12 @@ export function useVercelDeploy() { } // Notify that deployment completed successfully - deployArtifact.runner.handleDeployAction('complete', 'complete', { + alertsStore.setDeployAlert({ + type: 'success', + title: 'Vercel Deployment Complete', + description: 'Your project has been deployed successfully!', + stage: 'complete', + deployStatus: 'complete', url: data.deploy.url, source: 'vercel', }); diff --git a/app/components/ui/Button.tsx b/app/components/ui/Button.tsx index d268fe47..3373a861 100644 --- a/app/components/ui/Button.tsx +++ b/app/components/ui/Button.tsx @@ -32,8 +32,7 @@ const buttonVariants = cva( ); export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { + extends React.ButtonHTMLAttributes, VariantProps { _asChild?: boolean; } diff --git a/app/lib/.server/chat.ts b/app/lib/.server/chat.ts new file mode 100644 index 00000000..228b8595 --- /dev/null +++ b/app/lib/.server/chat.ts @@ -0,0 +1,6 @@ +export interface Tracer { + startSpan(name: string): { + setAttribute(key: string, value: any): void; + end(): void; + }; +} diff --git a/app/lib/.server/env.ts b/app/lib/.server/env.ts new file mode 100644 index 00000000..9ea8519d --- /dev/null +++ b/app/lib/.server/env.ts @@ -0,0 +1,13 @@ +import { z } from 'zod'; + +export const envSchema = z.object({ + OPENAI_API_KEY: z.string().optional(), + ANTHROPIC_API_KEY: z.string().optional(), + GOOGLE_GENERATIVE_AI_API_KEY: z.string().optional(), + OPENAI_PROXY_ENABLED: z.string().optional(), + RESEND_PROXY_ENABLED: z.string().optional(), +}); + +export function getEnv(key: string): string | undefined { + return process.env[key]; +} diff --git a/app/lib/.server/llm/codinit-agent.ts b/app/lib/.server/llm/codinit-agent.ts new file mode 100644 index 00000000..282c7351 --- /dev/null +++ b/app/lib/.server/llm/codinit-agent.ts @@ -0,0 +1,516 @@ +import { + createDataStream, + streamText, + type CoreAssistantMessage, + type CoreMessage, + type CoreToolMessage, + type DataStreamWriter, + type LanguageModelUsage, + type Message, + type ProviderMetadata, + type StepResult, +} from 'ai'; +import { ROLE_SYSTEM_PROMPT, generalSystemPrompt } from 'codinit-agent/prompts/system'; +import { deployTool } from 'codinit-agent/tools/deploy'; +import { viewTool } from 'codinit-agent/tools/view'; +import type { CodinitToolSet } from 'codinit-agent/types'; +import { npmInstallTool } from 'codinit-agent/tools/npmInstall'; +import type { Tracer } from '~/lib/.server/chat'; +import { editTool } from 'codinit-agent/tools/edit'; +import { captureException, captureMessage } from '@sentry/remix'; +import type { SystemPromptOptions } from 'codinit-agent/types'; +import { cleanupAssistantMessages } from 'codinit-agent/cleanupAssistantMessages'; +import { logger } from 'codinit-agent/utils/logger'; +import { encodeUsageAnnotation, encodeModelAnnotation } from '~/lib/.server/usage'; +import { compressWithLz4Server } from '~/lib/compression.server'; +import { getCodinitSiteUrl } from '~/lib/codinitSiteUrl'; +import { REPEATED_ERROR_REASON } from '~/lib/common/annotations'; +import { waitUntil } from '@vercel/functions'; +import type { internal } from '@codinit/_generated/api'; +import type { Usage } from '~/lib/common/annotations'; +import type { UsageRecord } from '@codinit/schema'; +import { getProvider, type ModelProvider } from '~/lib/.server/llm/provider'; +import { getEnv } from '~/lib/.server/env'; +import { calculateCodinitTokens, usageFromGeneration } from '~/lib/common/usage'; +import { lookupDocsTool } from 'codinit-agent/tools/lookupDocs'; +import { addEnvironmentVariablesTool } from 'codinit-agent/tools/addEnvironmentVariables'; +import { getCodinitDeploymentNameTool } from 'codinit-agent/tools/getCodinitDeploymentName'; +import type { PromptCharacterCounts } from 'codinit-agent/ChatContextManager'; + +type Messages = Message[]; + +export async function codinitAgent(args: { + chatInitialId: string; + firstUserMessage: boolean; + messages: Messages; + tracer: Tracer | null; + modelProvider: ModelProvider; + modelChoice: string | undefined; + userApiKey: string | undefined; + shouldDisableTools: boolean; + recordUsageCb: ( + lastMessage: Message | undefined, + finalGeneration: { usage: LanguageModelUsage; providerMetadata?: ProviderMetadata }, + ) => Promise; + recordRawPromptsForDebugging: boolean; + collapsedMessages: boolean; + promptCharacterCounts?: PromptCharacterCounts; + featureFlags: { + enableResend: boolean; + }; +}) { + const { + chatInitialId, + firstUserMessage, + messages, + tracer, + modelProvider, + userApiKey, + modelChoice, + shouldDisableTools, + recordUsageCb, + recordRawPromptsForDebugging, + collapsedMessages, + promptCharacterCounts, + featureFlags, + } = args; + console.debug('Starting agent with model provider', modelProvider); + + if (userApiKey) { + console.debug('Using user provided API key'); + } + + const startTime = Date.now(); + let firstResponseTime: number | null = null; + + const provider = getProvider(userApiKey, modelProvider, modelChoice); + const opts: SystemPromptOptions = { + enableBulkEdits: true, + includeTemplate: true, + openaiProxyEnabled: getEnv('OPENAI_PROXY_ENABLED') == '1', + usingOpenAi: modelProvider == 'OpenAI', + usingGoogle: modelProvider == 'Google', + resendProxyEnabled: getEnv('RESEND_PROXY_ENABLED') == '1', + enableResend: featureFlags.enableResend, + }; + const tools: CodinitToolSet = { + deploy: deployTool, + npmInstall: npmInstallTool, + lookupDocs: lookupDocsTool(), + getCodinitDeploymentName: getCodinitDeploymentNameTool, + }; + tools.addEnvironmentVariables = addEnvironmentVariablesTool(); + tools.view = viewTool; + tools.edit = editTool; + + const messagesForDataStream: CoreMessage[] = [ + { + role: 'system' as const, + content: ROLE_SYSTEM_PROMPT, + }, + { + role: 'system' as const, + content: generalSystemPrompt(opts), + }, + ...cleanupAssistantMessages(messages), + ]; + + if (modelProvider === 'Bedrock') { + messagesForDataStream[messagesForDataStream.length - 1].providerOptions = { + bedrock: { + cachePoint: { + type: 'default', + }, + }, + }; + } + + if (modelProvider === 'Anthropic') { + messagesForDataStream[messagesForDataStream.length - 1].providerOptions = { + anthropic: { + cacheControl: { + type: 'ephemeral', + }, + }, + }; + } + + const dataStream = createDataStream({ + execute(dataStream) { + const result = streamText({ + model: provider.model, + maxTokens: provider.maxTokens, + providerOptions: provider.options, + messages: messagesForDataStream, + tools, + toolChoice: shouldDisableTools ? 'none' : 'auto', + onFinish: (result) => { + onFinishHandler({ + dataStream, + messages, + result, + tracer, + chatInitialId, + recordUsageCb, + toolsDisabledFromRepeatedErrors: shouldDisableTools, + recordRawPromptsForDebugging, + coreMessages: messagesForDataStream, + modelProvider, + modelChoice, + collapsedMessages, + promptCharacterCounts, + _startTime: startTime, + _firstResponseTime: firstResponseTime, + providerModel: provider.model.modelId, + }); + }, + onError({ error }) { + console.error(error); + }, + experimental_telemetry: { + isEnabled: true, + metadata: { + firstUserMessage, + chatInitialId, + provider: modelProvider, + }, + }, + }); + + // Track first response time + (async () => { + try { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + for await (const _ of result.textStream) { + if (firstResponseTime === null) { + firstResponseTime = Date.now(); + + const timeToFirstResponse = firstResponseTime - startTime; + + if (tracer) { + const span = tracer.startSpan('first-response'); + span.setAttribute('chatInitialId', chatInitialId); + span.setAttribute('timeToFirstResponse', timeToFirstResponse); + span.setAttribute('provider', modelProvider); + span.end(); + } + + console.log('First response metrics:', { + timeToFirstResponse: `${timeToFirstResponse}ms`, + provider: modelProvider, + chatInitialId, + }); + break; + } + } + } catch (error) { + console.error('Error tracking first response time:', error); + } + })(); + + result.mergeIntoDataStream(dataStream); + }, + onError(error: any) { + return error.message; + }, + }); + + return dataStream; +} + +async function onFinishHandler({ + dataStream, + messages, + result, + tracer, + chatInitialId, + recordUsageCb, + toolsDisabledFromRepeatedErrors, + recordRawPromptsForDebugging, + coreMessages, + modelProvider, + modelChoice, + collapsedMessages, + promptCharacterCounts, + _startTime, + _firstResponseTime, + providerModel, +}: { + dataStream: DataStreamWriter; + messages: Messages; + result: Omit, 'stepType' | 'isContinued'>; + tracer: Tracer | null; + chatInitialId: string; + recordUsageCb: ( + lastMessage: Message | undefined, + finalGeneration: { usage: LanguageModelUsage; providerMetadata?: ProviderMetadata }, + ) => Promise; + recordRawPromptsForDebugging: boolean; + toolsDisabledFromRepeatedErrors: boolean; + coreMessages: CoreMessage[]; + modelProvider: ModelProvider; + modelChoice: string | undefined; + collapsedMessages: boolean; + promptCharacterCounts?: PromptCharacterCounts; + _startTime: number; + _firstResponseTime: number | null; + providerModel: string; +}) { + const { providerMetadata } = result; + + // This usage accumulates accross multiple /api/chat calls until finishReason of 'stop'. + const usage = { + completionTokens: normalizeUsage(result.usage.completionTokens), + promptTokens: normalizeUsage(result.usage.promptTokens), + totalTokens: normalizeUsage(result.usage.totalTokens), + }; + console.log('Finished streaming', { + finishReason: result.finishReason, + usage, + providerMetadata, + }); + console.log('Prompt character counts', promptCharacterCounts); + + if (tracer) { + const span = tracer.startSpan('on-finish-handler'); + span.setAttribute('chatInitialId', chatInitialId); + span.setAttribute('finishReason', result.finishReason); + span.setAttribute('usage.completionTokens', usage.completionTokens); + span.setAttribute('usage.promptTokens', usage.promptTokens); + span.setAttribute('usage.totalTokens', usage.totalTokens); + span.setAttribute('collapsedMessages', collapsedMessages); + span.setAttribute('model', providerModel); + + if (promptCharacterCounts) { + span.setAttribute('promptCharacterCounts.messageHistoryChars', promptCharacterCounts.messageHistoryChars); + span.setAttribute('promptCharacterCounts.currentTurnChars', promptCharacterCounts.currentTurnChars); + span.setAttribute('promptCharacterCounts.totalPromptChars', promptCharacterCounts.totalPromptChars); + } + + if (providerMetadata) { + if (providerMetadata.anthropic) { + const anthropic: any = providerMetadata.anthropic; + span.setAttribute('providerMetadata.anthropic.cacheCreationInputTokens', anthropic.cacheCreationInputTokens); + span.setAttribute('providerMetadata.anthropic.cacheReadInputTokens', anthropic.cacheReadInputTokens); + } + + if (providerMetadata.google) { + const google: any = providerMetadata.google; + span.setAttribute('providerMetadata.google.cachedContentTokenCount', google.cachedContentTokenCount ?? 0); + } + + if (providerMetadata.openai) { + const openai: any = providerMetadata.openai; + span.setAttribute('providerMetadata.openai.cachedPromptTokens', openai.cachedPromptTokens ?? 0); + } + + if (providerMetadata.bedrock) { + const bedrock: any = providerMetadata.bedrock; + span.setAttribute( + 'providerMetadata.bedrock.cacheCreationInputTokens', + bedrock.usage?.cacheCreationInputTokens ?? 0, + ); + span.setAttribute('providerMetadata.bedrock.cacheReadInputTokens', bedrock.usage?.cacheReadInputTokens ?? 0); + } + } + + if (result.finishReason === 'stop' || result.finishReason === 'unknown') { + const lastMessage = messages[messages.length - 1]; + + if (lastMessage.role === 'assistant') { + /* + * This field is deprecated, but for some reason, the new field "parts", does not contain all of the tool calls. This is likely a + * vercel bug. We do this at the end end the request because it's when we have the results from all of the tool calls. + */ + const toolCalls = lastMessage.toolInvocations?.filter((t) => t.toolName === 'deploy' && t.state === 'result'); + const successfulDeploys = + toolCalls?.filter((t) => t.state === 'result' && !t.result.startsWith('Error:')).length ?? 0; + span.setAttribute('tools.successfulDeploys', successfulDeploys); + span.setAttribute('tools.failedDeploys', toolCalls ? toolCalls.length - successfulDeploys : 0); + } + + span.setAttribute('tools.disabledFromRepeatedErrors', toolsDisabledFromRepeatedErrors ? 'true' : 'false'); + } + + span.end(); + } + + if (toolsDisabledFromRepeatedErrors) { + dataStream.writeMessageAnnotation({ type: 'failure', reason: REPEATED_ERROR_REASON }); + } + + let toolCallId: { kind: 'tool-call'; toolCallId: string } | { kind: 'final' } | undefined; + + /* + * Always stash this part's usage as an annotation -- these are used for + * displaying usage info in the UI as well as calculating usage when the message + * finishes. + */ + if (result.finishReason === 'tool-calls') { + if (result.toolCalls.length === 1) { + toolCallId = { kind: 'tool-call', toolCallId: result.toolCalls[0].toolCallId }; + } else { + logger.warn('Stopped with not exactly one tool call', { + toolCalls: result.toolCalls, + }); + } + } else { + toolCallId = { kind: 'final' }; + } + + if (toolCallId) { + const annotation = encodeUsageAnnotation(toolCallId, usage, providerMetadata); + dataStream.writeMessageAnnotation({ type: 'usage', usage: annotation }); + + const modelAnnotation = encodeModelAnnotation(toolCallId, providerMetadata, modelChoice); + dataStream.writeMessageAnnotation({ type: 'model', ...modelAnnotation }); + } + + // Record usage once we've generated the final part. + if (result.finishReason !== 'tool-calls') { + await recordUsageCb(messages[messages.length - 1], { usage, providerMetadata }); + } + + if (recordRawPromptsForDebugging) { + const responseCoreMessages = result.response.messages as (CoreAssistantMessage | CoreToolMessage)[]; + + // don't block the request but keep the request alive in Vercel Lambdas + waitUntil( + storeDebugPrompt( + coreMessages, + chatInitialId, + responseCoreMessages, + result, + { + usage, + providerMetadata, + }, + modelProvider, + ), + ); + } + + await new Promise((resolve) => setTimeout(resolve, 0)); +} + +/* Convert Usage into something stable to store in CodinIT debug logs */ +function buildUsageRecord(usage: Usage): UsageRecord { + const usageRecord = { + completionTokens: 0, + promptTokens: 0, + cachedPromptTokens: 0, + }; + + for (const k of Object.keys(usage) as Array) { + switch (k) { + case 'completionTokens': { + usageRecord.completionTokens += usage.completionTokens; + break; + } + case 'promptTokens': { + usageRecord.promptTokens += usage.promptTokens; + break; + } + case 'xaiCachedPromptTokens': { + usageRecord.cachedPromptTokens += usage.xaiCachedPromptTokens; + usageRecord.promptTokens += usage.xaiCachedPromptTokens; + break; + } + case 'openaiCachedPromptTokens': { + usageRecord.cachedPromptTokens += usage.openaiCachedPromptTokens; + break; + } + case 'anthropicCacheReadInputTokens': { + usageRecord.cachedPromptTokens += usage.anthropicCacheReadInputTokens; + usageRecord.promptTokens += usage.anthropicCacheReadInputTokens; + break; + } + case 'anthropicCacheCreationInputTokens': { + usageRecord.promptTokens += usage.anthropicCacheCreationInputTokens; + break; + } + case 'googleCachedContentTokenCount': { + usageRecord.cachedPromptTokens += usage.googleCachedContentTokenCount; + break; + } + case 'googleThoughtsTokenCount': { + usageRecord.completionTokens += usage.googleThoughtsTokenCount; + break; + } + case 'bedrockCacheWriteInputTokens': { + usageRecord.promptTokens += usage.bedrockCacheWriteInputTokens; + break; + } + case 'bedrockCacheReadInputTokens': { + usageRecord.cachedPromptTokens += usage.bedrockCacheReadInputTokens; + usageRecord.promptTokens += usage.bedrockCacheReadInputTokens; + break; + } + case 'toolCallId': + case 'providerMetadata': + case 'totalTokens': { + break; + } + default: { + const exhaustiveCheck: never = k; + throw new Error(`Unhandled property: ${String(exhaustiveCheck)}`); + } + } + } + + return usageRecord; +} + +async function storeDebugPrompt( + promptCoreMessages: CoreMessage[], + chatInitialId: string, + responseCoreMessages: CoreMessage[], + result: Omit, 'stepType' | 'isContinued'>, + generation: { usage: LanguageModelUsage; providerMetadata?: ProviderMetadata }, + modelProvider: ModelProvider, +) { + try { + const finishReason = result.finishReason; + const modelId = result.response.modelId || ''; + const usage = usageFromGeneration(generation); + + const promptMessageData = new TextEncoder().encode(JSON.stringify(promptCoreMessages)); + const compressedData = compressWithLz4Server(promptMessageData); + + type Metadata = Omit<(typeof internal.debugPrompt.storeDebugPrompt)['_args'], 'promptCoreMessagesStorageId'>; + + const { codinitTokens } = calculateCodinitTokens(usage, modelProvider); + + const metadata = { + chatInitialId, + responseCoreMessages, + finishReason, + modelId, + usage: buildUsageRecord(usage), + codinitTokens, + } satisfies Metadata; + + const formData = new FormData(); + formData.append('metadata', JSON.stringify(metadata)); + formData.append('promptCoreMessages', new Blob([compressedData as any])); + + const response = await fetch(`${getCodinitSiteUrl()}/upload_debug_prompt`, { + method: 'POST', + body: formData, + }); + + if (!response.ok) { + const text = await response.text(); + const message = `Failed to store debug prompt: ${response.status} ${text}`; + console.error(message); + captureMessage(message); + } + } catch (error) { + console.error(error); + captureException(error); + } +} + +function normalizeUsage(usage: number) { + return Number.isNaN(usage) ? 0 : usage; +} diff --git a/app/lib/.server/llm/provider.ts b/app/lib/.server/llm/provider.ts new file mode 100644 index 00000000..a4f7cb35 --- /dev/null +++ b/app/lib/.server/llm/provider.ts @@ -0,0 +1,13 @@ +export type ModelProvider = 'OpenAI' | 'Anthropic' | 'Google' | 'Bedrock'; + +export function getProvider( + apiKey: string | undefined, + provider: ModelProvider, + modelChoice: string | undefined, +): { model: any; maxTokens: number; options: any } { + return { + model: { modelId: modelChoice || 'gpt-4o' }, + maxTokens: 4096, + options: {}, + }; +} diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts index e7fc9d5d..ce34fb41 100644 --- a/app/lib/.server/llm/stream-text.ts +++ b/app/lib/.server/llm/stream-text.ts @@ -8,7 +8,6 @@ import { allowedHTMLElements } from '~/utils/markdown'; import { LLMManager } from '~/lib/modules/llm/manager'; import { createScopedLogger } from '~/utils/logger'; import { createFilesContext, extractPropertiesFromMessage } from './utils'; -import { BuiltInToolService } from '~/lib/services/builtInToolService'; export type Messages = Message[]; @@ -210,15 +209,7 @@ Use these preferences when creating UI components, styling code, or suggesting d logger.info(`Sending llm call to ${provider.name} with model ${modelDetails.name}`); - let allTools = { ...options?.tools }; - const builtInToolService = BuiltInToolService.getInstance(); - const builtInTools = builtInToolService.toolsWithoutExecute; - - if (Object.keys(builtInTools).length > 0) { - allTools = { ...allTools, ...builtInTools }; - logger.info(`Added ${Object.keys(builtInTools).length} built-in tools:`, Object.keys(builtInTools)); - } - + const allTools = { ...options?.tools }; const hasTools = Object.keys(allTools).length > 0; return await _streamText({ diff --git a/app/lib/.server/llm/utils.ts b/app/lib/.server/llm/utils.ts index 54a429dd..6d859f76 100644 --- a/app/lib/.server/llm/utils.ts +++ b/app/lib/.server/llm/utils.ts @@ -63,7 +63,7 @@ export function createFilesContext(files: FileMap, useRelativePath?: boolean) { }); const fileContexts = filePaths - .filter((x) => files[x] && files[x].type == 'file') + .filter((x) => files[x]?.type === 'file') .map((path) => { const dirent = files[path]; diff --git a/app/lib/.server/usage.ts b/app/lib/.server/usage.ts new file mode 100644 index 00000000..8ce4e802 --- /dev/null +++ b/app/lib/.server/usage.ts @@ -0,0 +1,7 @@ +export function encodeUsageAnnotation(toolCallId: any, usage: any, _providerMetadata: any) { + return usage; +} + +export function encodeModelAnnotation(_toolCallId: any, _providerMetadata: any, _modelChoice: any) { + return { model: _modelChoice }; +} diff --git a/app/lib/codinitSiteUrl.ts b/app/lib/codinitSiteUrl.ts new file mode 100644 index 00000000..4c085884 --- /dev/null +++ b/app/lib/codinitSiteUrl.ts @@ -0,0 +1,3 @@ +export function getCodinitSiteUrl(): string { + return 'https://localhost:5173'; +} diff --git a/app/lib/common/annotations.ts b/app/lib/common/annotations.ts new file mode 100644 index 00000000..19dc4fd2 --- /dev/null +++ b/app/lib/common/annotations.ts @@ -0,0 +1,17 @@ +export const REPEATED_ERROR_REASON = 'repeated-error'; + +export type Usage = { + completionTokens: number; + promptTokens: number; + totalTokens: number; + xaiCachedPromptTokens: number; + openaiCachedPromptTokens: number; + anthropicCacheReadInputTokens: number; + anthropicCacheCreationInputTokens: number; + googleCachedContentTokenCount: number; + googleThoughtsTokenCount: number; + bedrockCacheWriteInputTokens: number; + bedrockCacheReadInputTokens: number; + toolCallId?: string; + providerMetadata?: any; +}; diff --git a/app/lib/common/builtin-tools.json b/app/lib/common/builtin-tools.json deleted file mode 100644 index d4d69b11..00000000 --- a/app/lib/common/builtin-tools.json +++ /dev/null @@ -1,196 +0,0 @@ -{ - "tools": [ - { - "name": "ReadFile", - "description": "Reads file contents intelligently - returns complete files when small, or targeted sections when large.\n\n**When to use:**\n• Before editing existing files to understand context\n• Understanding implementation details\n• Finding specific code patterns\n• Code analysis and review\n\n**Features:**\n• Small files (≤2000 lines) - Returns complete content\n• Large files (>2000 lines) - Returns with truncation warning\n• Supports line ranges for reading specific sections\n• Any lines longer than 2000 characters are truncated", - "parameters": { - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "object", - "properties": { - "filePath": { - "type": "string", - "description": "The absolute path to the file to read" - }, - "query": { - "type": "string", - "description": "Optional: What you're looking for in the file (for context)" - }, - "startLine": { - "type": "number", - "description": "Optional: Starting line number (1-based)" - }, - "endLine": { - "type": "number", - "description": "Optional: Ending line number (1-based)" - }, - "taskNameActive": { - "type": "string", - "description": "2-5 words describing the task when running" - }, - "taskNameComplete": { - "type": "string", - "description": "2-5 words describing the task when complete" - } - }, - "required": ["filePath", "taskNameActive", "taskNameComplete"] - } - }, - { - "name": "LSRepo", - "description": "Lists files and directories in the repository. Returns file paths sorted alphabetically.\n\n**Use cases:**\n• Explore repository structure\n• Find files in specific directories\n• Locate configuration files or documentation\n• Get overview before diving into code\n\n**Features:**\n• Recursive directory listing\n• Glob pattern support for filtering\n• Default ignores: node_modules, .git, dist, build, .next, .turbo\n• Max 200 files returned", - "parameters": { - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "object", - "properties": { - "path": { - "type": "string", - "description": "Optional: The absolute path to the directory to list" - }, - "globPattern": { - "type": "string", - "description": "Optional: Glob pattern to filter files (e.g., '*.js', '*.{ts,tsx}')" - }, - "ignore": { - "type": "array", - "items": { - "type": "string" - }, - "description": "Optional: List of glob patterns to ignore" - }, - "taskNameActive": { - "type": "string", - "description": "2-5 words describing the task when running" - }, - "taskNameComplete": { - "type": "string", - "description": "2-5 words describing the task when complete" - } - }, - "required": ["taskNameActive", "taskNameComplete"] - } - }, - { - "name": "GrepRepo", - "description": "Searches for regex patterns within file contents. Returns matching lines with file paths and line numbers.\n\n**Use cases:**\n• Find function definitions\n• Locate imports/exports\n• Search for specific classes or interfaces\n• Find API calls or configuration\n• Track usage patterns\n\n**Features:**\n• Case-insensitive regex matching\n• Glob pattern support for file filtering\n• Returns file path, line number, and content\n• Max 200 matches returned", - "parameters": { - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "object", - "properties": { - "pattern": { - "type": "string", - "description": "The regex pattern to search for" - }, - "globPattern": { - "type": "string", - "description": "Optional: Glob pattern to filter files" - }, - "path": { - "type": "string", - "description": "Optional: The absolute path to search within" - }, - "taskNameActive": { - "type": "string", - "description": "2-5 words describing the task when running" - }, - "taskNameComplete": { - "type": "string", - "description": "2-5 words describing the task when complete" - } - }, - "required": ["pattern", "taskNameActive", "taskNameComplete"] - } - }, - { - "name": "SearchWeb", - "description": "Performs web search using high-quality sources. Supports first-party documentation search for Vercel ecosystem.\n\n**When to use:**\n• Need up-to-date documentation\n• Latest best practices and features\n• Technical details not in training data\n• Troubleshooting and debugging\n• Framework/library comparisons\n\n**Features:**\n• General web search via Brave API\n• First-party docs for Vercel ecosystem (Next.js, Vercel, AI SDK, etc.)\n• Returns top 10 results with titles, URLs, and snippets", - "parameters": { - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "object", - "properties": { - "query": { - "type": "string", - "description": "The search query" - }, - "isFirstParty": { - "type": "boolean", - "description": "Set true for Vercel ecosystem products (Next.js, Vercel, AI SDK, etc.)" - }, - "taskNameActive": { - "type": "string", - "description": "2-5 words describing the task when running" - }, - "taskNameComplete": { - "type": "string", - "description": "2-5 words describing the task when complete" - } - }, - "required": ["query", "taskNameActive", "taskNameComplete"] - } - }, - { - "name": "FetchFromWeb", - "description": "Fetches full text content from web pages. Returns clean, parsed text with metadata.\n\n**When to use:**\n• Have specific URLs to read completely\n• Need full article/documentation text\n• Follow-up after web search\n• Read complete tutorials or references\n\n**Features:**\n• Fetches and parses HTML\n• Removes scripts and styles\n• Extracts clean text content\n• 50,000 character limit per URL\n• Supports multiple URLs in single request", - "parameters": { - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "object", - "properties": { - "urls": { - "type": "array", - "items": { - "type": "string" - }, - "description": "URLs to fetch content from" - }, - "taskNameActive": { - "type": "string", - "description": "2-5 words describing the task when running" - }, - "taskNameComplete": { - "type": "string", - "description": "2-5 words describing the task when complete" - } - }, - "required": ["urls", "taskNameActive", "taskNameComplete"] - } - }, - { - "name": "TodoManager", - "description": "Manages structured todo lists for complex projects. Tracks progress through milestone-level tasks.\n\n**When to use:**\n• Multi-step projects with distinct systems\n• Apps requiring separate components\n• Complex integrations with multiple features\n• Need to demonstrate systematic approach\n\n**Actions:**\n• set_tasks - Create initial task breakdown (3-7 tasks)\n• add_task - Add single task to list\n• move_to_task - Complete current, focus on next\n• mark_all_done - Complete all tasks\n• read_list - View current todo list", - "parameters": { - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "object", - "properties": { - "action": { - "type": "string", - "enum": ["add_task", "set_tasks", "mark_all_done", "move_to_task", "read_list"], - "description": "The todo management action to perform" - }, - "task": { - "type": "string", - "description": "Task description for add_task" - }, - "tasks": { - "type": "array", - "items": { - "type": "string" - }, - "description": "Complete task list for set_tasks" - }, - "moveToTask": { - "type": "string", - "description": "Exact task name for move_to_task" - }, - "taskNameActive": { - "type": "string", - "description": "2-5 words describing the task when running" - }, - "taskNameComplete": { - "type": "string", - "description": "2-5 words describing the task when complete" - } - }, - "required": ["action", "taskNameActive", "taskNameComplete"] - } - } - ] -} diff --git a/app/lib/common/tool-registry.ts b/app/lib/common/tool-registry.ts deleted file mode 100644 index 1b4c695f..00000000 --- a/app/lib/common/tool-registry.ts +++ /dev/null @@ -1,52 +0,0 @@ -import toolsConfig from './builtin-tools.json'; - -export interface ToolDefinition { - name: string; - description: string; - parameters: any; -} - -export class ToolRegistry { - private static _toolDefinitions: Map = new Map(); - - static initialize() { - if (this._toolDefinitions.size > 0) { - return; - } - - for (const tool of toolsConfig.tools) { - this._toolDefinitions.set(tool.name, { - name: tool.name, - description: tool.description, - parameters: tool.parameters, - }); - } - } - - static getToolDefinition(name: string): ToolDefinition | undefined { - this.initialize(); - return this._toolDefinitions.get(name); - } - - static getAllToolDefinitions(): ToolDefinition[] { - this.initialize(); - return Array.from(this._toolDefinitions.values()); - } - - static getToolNames(): string[] { - this.initialize(); - return Array.from(this._toolDefinitions.keys()); - } - - static hasTools(): boolean { - this.initialize(); - return this._toolDefinitions.size > 0; - } - - static getEnabledTools(enabledToolNames: string[]): ToolDefinition[] { - this.initialize(); - return enabledToolNames - .map((name) => this._toolDefinitions.get(name)) - .filter((tool): tool is ToolDefinition => tool !== undefined); - } -} diff --git a/app/lib/common/tools.json b/app/lib/common/tools.json deleted file mode 100644 index 5a736f3f..00000000 --- a/app/lib/common/tools.json +++ /dev/null @@ -1,207 +0,0 @@ -{ - "_metadata": { - "version": "2.0.0", - "description": "CodinIT agent tools specification. These tools describe the actual capabilities available in the application. Tools are invoked via XML action tags in LLM responses, not standard function calling.", - "execution_method": "XML action tags", - "frameworks": ["web", "electron"], - "runtimes": ["web-remix", "electron-webcontainer"] - }, - - "file": { - "version": "1.0.0", - "category": "file-operations", - "status": "production", - "frameworks": ["all"], - "environments": ["web", "electron"], - "requires": [], - "description": "Create or write files to the project. Overwrites existing files completely. Use for creating new files or complete rewrites. For modifying existing files, prefer using the 'line-replace' action if possible.", - "invocation": "file content here", - "parameters": { - "properties": { - "filePath": { - "type": "string", - "description": "Path relative to project root (e.g., 'src/main.ts', 'config.json', 'styles/theme.css')", - "example": "src/App.tsx" - }, - "content": { - "type": "string", - "description": "Complete file content - code, configuration, CSS, or any text", - "example": "export const config = { /* ... */ };" - } - }, - "required": ["filePath", "content"], - "type": "object" - }, - "examples": [ - { - "description": "Create a TypeScript component", - "code": "export function Button() { return ; }" - }, - { - "description": "Create a configuration file", - "code": "{\"name\": \"my-app\", \"version\": \"1.0.0\"}" - } - ] - }, - - "line-replace": { - "version": "1.0.0", - "category": "file-operations", - "status": "production", - "frameworks": ["all"], - "environments": ["web", "electron"], - "requires": [], - "description": "Modify specific lines in existing files using exact line numbers. Preferred method for editing existing code. Maintains file integrity and allows precise edits without rewriting entire files. Works with any language or file type.", - "invocation": "", - "parameters": { - "properties": { - "filePath": { - "type": "string", - "description": "Path relative to project root", - "example": "src/components/Form.tsx" - }, - "firstLine": { - "type": "number", - "description": "First line number to replace (1-indexed)", - "example": 15 - }, - "lastLine": { - "type": "number", - "description": "Last line number to replace (1-indexed)", - "example": 28 - }, - "search": { - "type": "string", - "description": "Exact content to search for. Use '...' for omitted sections in large blocks.", - "example": "const value = oldValue;\n...\nreturn value;" - }, - "replace": { - "type": "string", - "description": "New content to insert", - "example": "const value = newValue;\nconst doubled = value * 2;\nreturn doubled;" - } - }, - "required": ["filePath", "firstLine", "lastLine", "search", "replace"], - "type": "object" - }, - "examples": [ - { - "description": "Update a function implementation", - "code": "" - } - ] - }, - - "shell": { - "version": "1.0.0", - "category": "environment", - "status": "production", - "frameworks": ["all"], - "environments": ["web", "electron"], - "requires": [], - "description": "Execute shell commands in the project environment. Runs in WebContainer with access to pnpm, npm, git, and other CLI tools. Use for installing dependencies, running builds, git operations, etc.", - "invocation": "pnpm add lodash", - "parameters": { - "properties": { - "command": { - "type": "string", - "description": "Shell command to execute (e.g., 'pnpm add package', 'npm run build', 'git commit -m message')", - "example": "pnpm install" - } - }, - "required": ["command"], - "type": "object" - }, - "examples": [ - { - "description": "Install a package dependency", - "code": "pnpm add lodash@latest" - }, - { - "description": "Run a build command", - "code": "pnpm run build" - }, - { - "description": "Git operations", - "code": "git add . && git commit -m \"Initial commit\"" - } - ] - }, - - "supabase": { - "version": "1.0.0", - "category": "database", - "status": "production", - "frameworks": ["all"], - "environments": ["web", "electron"], - "requires": ["supabase-connection"], - "description": "Perform database operations: create migrations, execute SQL queries, or manage database schema. Supports PostgreSQL SQL syntax for Supabase backend.", - "operations": { - "migration": "Create a new database migration file", - "query": "Execute a SQL query directly" - }, - "invocation": "SQL content", - "parameters": { - "properties": { - "operation": { - "type": "string", - "enum": ["migration", "query"], - "description": "Operation type: 'migration' to create a migration file, 'query' to execute SQL", - "example": "migration" - }, - "content": { - "type": "string", - "description": "SQL code for the operation", - "example": "CREATE TABLE users (id uuid PRIMARY KEY, name text);" - } - }, - "required": ["operation", "content"], - "type": "object" - }, - "examples": [ - { - "description": "Create a database migration", - "code": "\nCREATE TABLE users (\n id uuid PRIMARY KEY DEFAULT gen_random_uuid(),\n name text NOT NULL,\n email text UNIQUE,\n created_at timestamp DEFAULT now()\n);\n" - }, - { - "description": "Create authentication tables", - "code": "\nCREATE TABLE auth_users (\n id uuid PRIMARY KEY,\n email text UNIQUE NOT NULL,\n password_hash text,\n created_at timestamp DEFAULT now()\n);\n" - } - ] - }, - - "mcp-tools": { - "version": "1.0.0", - "category": "extensibility", - "status": "production", - "frameworks": ["all"], - "environments": ["web", "electron"], - "requires": [], - "description": "Model Context Protocol (MCP) tools provide extensibility through external MCP servers. Available tools depend on configured MCP servers. Common available tools include Supabase database, Stripe payments, GitHub operations, and more.", - "configuration": "Configured through the MCP settings panel in the application", - "available_servers": [ - { - "name": "Supabase", - "tools": "Database queries, table management, RLS policies", - "transport": "SSE" - }, - { - "name": "Claude Code", - "tools": "Code search, file operations, terminal access", - "transport": "stdio" - }, - { - "name": "Stripe", - "tools": "Payment processing, subscription management", - "transport": "streamable-http" - }, - { - "name": "PostHog", - "tools": "Analytics, event tracking", - "transport": "streamable-http" - } - ], - "invocation": "MCP tools are invoked directly by name (after LLM function calling capability is enabled)", - "note": "These tools are optional and must be explicitly configured by the user. Not all users have MCP servers available." - } -} diff --git a/app/lib/common/usage.ts b/app/lib/common/usage.ts new file mode 100644 index 00000000..a1d04749 --- /dev/null +++ b/app/lib/common/usage.ts @@ -0,0 +1,21 @@ +import type { Usage } from './annotations'; + +export function calculateCodinitTokens(_usage: Usage, _provider: string): { codinitTokens: number } { + return { codinitTokens: 0 }; +} + +export function usageFromGeneration(generation: any): Usage { + return { + completionTokens: generation.usage.completionTokens || 0, + promptTokens: generation.usage.promptTokens || 0, + totalTokens: generation.usage.totalTokens || 0, + xaiCachedPromptTokens: 0, + openaiCachedPromptTokens: 0, + anthropicCacheReadInputTokens: 0, + anthropicCacheCreationInputTokens: 0, + googleCachedContentTokenCount: 0, + googleThoughtsTokenCount: 0, + bedrockCacheWriteInputTokens: 0, + bedrockCacheReadInputTokens: 0, + }; +} diff --git a/app/lib/compression.server.ts b/app/lib/compression.server.ts new file mode 100644 index 00000000..cfa639a1 --- /dev/null +++ b/app/lib/compression.server.ts @@ -0,0 +1,4 @@ +export function compressWithLz4Server(data: Uint8Array): Uint8Array { + // Stub implementation return as is + return data; +} diff --git a/app/lib/hooks/StickToBottom.tsx b/app/lib/hooks/StickToBottom.tsx index 8580627c..f814d104 100644 --- a/app/lib/hooks/StickToBottom.tsx +++ b/app/lib/hooks/StickToBottom.tsx @@ -33,8 +33,7 @@ export interface StickToBottomContext { const StickToBottomContext = createContext(null); export interface StickToBottomProps - extends Omit, 'children'>, - StickToBottomOptions { + extends Omit, 'children'>, StickToBottomOptions { contextRef?: React.Ref; instance?: ReturnType; children: ((context: StickToBottomContext) => ReactNode) | ReactNode; diff --git a/app/lib/hooks/useMessageParser.ts b/app/lib/hooks/useMessageParser.ts index cd0783b0..15cbfc92 100644 --- a/app/lib/hooks/useMessageParser.ts +++ b/app/lib/hooks/useMessageParser.ts @@ -1,6 +1,7 @@ import type { Message } from 'ai'; import { useCallback, useState } from 'react'; -import { StreamingMessageParser } from '~/lib/runtime/message-parser'; +import { StreamingMessageParser } from 'codinit-agent/message-parser'; +import { makePartId } from 'codinit-agent/partId'; import { workbenchStore } from '~/lib/stores/workbench'; import { createScopedLogger } from '~/utils/logger'; @@ -40,16 +41,6 @@ const messageParser = new StreamingMessageParser({ logger.trace('onActionStream', data.action); workbenchStore.runAction(data, true); }, - onThinkingArtifactOpen: (data) => { - logger.trace('onThinkingArtifactOpen', data); - - workbenchStore.addThinkingArtifact(data); - }, - onThinkingArtifactClose: (data) => { - logger.trace('onThinkingArtifactClose', data); - - workbenchStore.updateThinkingArtifact(data, { closed: true }); - }, }, }); const extractTextContent = (message: Message) => @@ -70,7 +61,7 @@ export function useMessageParser() { for (const [index, message] of messages.entries()) { if (message.role === 'assistant' || message.role === 'user') { - const newParsedContent = messageParser.parse(message.id, extractTextContent(message)); + const newParsedContent = messageParser.parse(makePartId(message.id, 0), extractTextContent(message)); setParsedMessages((prevParsed) => ({ ...prevParsed, [index]: !reset ? (prevParsed[index] || '') + newParsedContent : newParsedContent, diff --git a/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap b/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap index 8aa7e239..8766d7cc 100644 --- a/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap +++ b/app/lib/runtime/__snapshots__/message-parser.spec.ts.snap @@ -8,7 +8,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl }, "actionId": "0", "artifactId": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", } `; @@ -20,14 +20,14 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl }, "actionId": "0", "artifactId": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", } `; exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (0) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -36,7 +36,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (0) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -50,7 +50,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl }, "actionId": "0", "artifactId": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", } `; @@ -64,7 +64,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl }, "actionId": "1", "artifactId": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", } `; @@ -76,7 +76,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl }, "actionId": "0", "artifactId": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", } `; @@ -89,14 +89,14 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl }, "actionId": "1", "artifactId": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", } `; exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (1) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -105,7 +105,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (1) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -114,7 +114,7 @@ exports[`StreamingMessageParser > valid artifacts with actions > should correctl exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (0) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -123,7 +123,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (0) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -132,7 +132,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (1) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": "bundled", } @@ -141,7 +141,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (1) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": "bundled", } @@ -150,7 +150,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (2) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -159,7 +159,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (2) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -168,7 +168,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (3) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -177,7 +177,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (3) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -186,7 +186,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (4) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -195,7 +195,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (4) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -204,7 +204,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (5) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -213,7 +213,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (5) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -222,7 +222,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (6) > onArtifactClose 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } @@ -231,7 +231,7 @@ exports[`StreamingMessageParser > valid artifacts without actions > should corre exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (6) > onArtifactOpen 1`] = ` { "id": "artifact_1", - "messageId": "message_1", + "partId": "message_1-0", "title": "Some title", "type": undefined, } diff --git a/app/lib/runtime/action-runner.ts b/app/lib/runtime/action-runner.ts index 47ec3ee0..9e753cab 100644 --- a/app/lib/runtime/action-runner.ts +++ b/app/lib/runtime/action-runner.ts @@ -1,39 +1,57 @@ import type { WebContainer } from '@webcontainer/api'; -import { path as nodePath } from '~/utils/path'; -import { atom, map, type MapStore } from 'nanostores'; -import type { ActionAlert, BoltAction, DeployAlert, FileHistory, SupabaseAction, SupabaseAlert } from '~/types/actions'; -import { createScopedLogger } from '~/utils/logger'; -import { unreachable } from '~/utils/unreachable'; -import type { ActionCallbackData } from './message-parser'; +import { path as nodePath } from 'codinit-agent/utils/path'; +import { atom, map, type MapStore, type WritableAtom } from 'nanostores'; +import type { ActionAlert, FileHistory } from '~/types/actions'; +import { createScopedLogger } from 'codinit-agent/utils/logger'; +import { unreachable } from 'codinit-agent/utils/unreachable'; +import type { ActionCallbackData } from 'codinit-agent/message-parser'; +import type { ToolInvocation } from 'ai'; +import { viewParameters } from 'codinit-agent/tools/view'; +import { renderDirectory } from 'codinit-agent/utils/renderDirectory'; +import { renderFile } from 'codinit-agent/utils/renderFile'; +import { readPath, workDirRelative } from '~/utils/fileUtils'; +import { ContainerBootState, waitForContainerBootState } from '~/lib/stores/containerBootState'; +import { npmInstallToolParameters } from 'codinit-agent/tools/npmInstall'; +import { workbenchStore } from '~/lib/stores/workbench'; +import { z } from 'zod'; +import { editToolParameters } from 'codinit-agent/tools/edit'; +import { getAbsolutePath } from 'codinit-agent/utils/workDir'; +import { cleanCodinitOutput } from 'codinit-agent/utils/shell'; +import type { CodinitAction } from 'codinit-agent/types'; import type { ExampleShell } from '~/utils/shell'; -import { validateCode } from './code-validator'; -import { isElectron, saveFileLocal } from '~/utils/electron'; -import { getProjectName } from '~/utils/projectName'; +import { streamOutput } from '~/utils/process'; +import { outputLabels } from '~/lib/runtime/deployToolOutputLabels'; +import type { CodinitToolName } from 'codinit-agent/types'; +import { lookupDocsParameters, docs, type DocKey } from 'codinit-agent/tools/lookupDocs'; +import { addEnvironmentVariablesParameters } from 'codinit-agent/tools/addEnvironmentVariables'; +import { openDashboardToPath } from '~/lib/stores/dashboardPath'; +import { codinitProjectStore } from '~/lib/stores/codinitProject'; const logger = createScopedLogger('ActionRunner'); -export type ActionStatus = 'pending' | 'running' | 'complete' | 'aborted' | 'failed' | 'awaiting-approval'; +export type ActionStatus = 'pending' | 'running' | 'complete' | 'aborted' | 'failed'; -export type BaseActionState = BoltAction & { +type BaseActionState = CodinitAction & { status: Exclude; abort: () => void; executed: boolean; abortSignal: AbortSignal; }; -export type FailedActionState = BoltAction & +type FailedActionState = CodinitAction & Omit & { status: Extract; error: string; }; -export type ActionState = BaseActionState | FailedActionState; +export type ActionState = (BaseActionState | FailedActionState) & { isEdit?: boolean }; -type BaseActionUpdate = Partial>; +type BaseActionUpdate = Partial>; -export type ActionStateUpdate = +type ActionStateUpdate = | BaseActionUpdate - | (Omit & { status: 'failed'; error: string }); + | (Omit & { status: 'failed'; error: string }) + | Pick; type ActionsMap = MapStore>; @@ -66,48 +84,39 @@ class ActionCommandError extends Error { } } -export type TestResultCallback = (result: { - command: string; - summary: { total: number; passed: number; failed: number; skipped: number }; - duration: number; - coverage?: { lines: number; statements: number; functions: number; branches: number }; - failedTests?: Array<{ name: string; file: string; line: number; error: string; stack?: string }>; - status: 'complete' | 'failed'; -}) => void; - export class ActionRunner { - static readonly MAX_CONCURRENT_FILE_WRITES = 5; - #webcontainer: Promise; #currentExecutionPromise: Promise = Promise.resolve(); - #currentFileWrites = 0; - #fileWriteQueue: Array<() => Promise> = []; - #shellTerminal: () => ExampleShell; + #shellTerminal: ExampleShell; + #previousToolCalls: Map = new Map(); runnerId = atom(`${Date.now()}`); actions: ActionsMap = map({}); onAlert?: (alert: ActionAlert) => void; - onSupabaseAlert?: (alert: SupabaseAlert) => void; - onDeployAlert?: (alert: DeployAlert) => void; - onTestResult?: TestResultCallback; - onLiveOutput?: (output: string, actionId: string) => void; buildOutput?: { path: string; exitCode: number; output: string }; - + terminalOutput: WritableAtom = atom(''); + onToolCallComplete: (args: { + kind: 'success' | 'error'; + result: string; + toolCallId: string; + toolName: CodinitToolName; + }) => void; constructor( webcontainerPromise: Promise, - getShellTerminal: () => ExampleShell, - onAlert?: (alert: ActionAlert) => void, - onSupabaseAlert?: (alert: SupabaseAlert) => void, - onDeployAlert?: (alert: DeployAlert) => void, - onTestResult?: TestResultCallback, - onLiveOutput?: (output: string, actionId: string) => void, + shellTerminal: ExampleShell, + callbacks: { + onAlert?: (alert: ActionAlert) => void; + onToolCallComplete: (args: { + kind: 'success' | 'error'; + result: string; + toolCallId: string; + toolName: CodinitToolName; + }) => void; + }, ) { this.#webcontainer = webcontainerPromise; - this.#shellTerminal = getShellTerminal; - this.onAlert = onAlert; - this.onSupabaseAlert = onSupabaseAlert; - this.onDeployAlert = onDeployAlert; - this.onTestResult = onTestResult; - this.onLiveOutput = onLiveOutput; + this.#shellTerminal = shellTerminal; + this.onAlert = callbacks.onAlert; + this.onToolCallComplete = callbacks.onToolCallComplete; } addAction(data: ActionCallbackData) { @@ -117,29 +126,39 @@ export class ActionRunner { const action = actions[actionId]; if (action) { - // action already added + if (action.content !== data.action.content) { + this.updateAction(actionId, { ...action, content: data.action.content }); + } + return; } const abortController = new AbortController(); + if (data.action.type === 'file') { + const files = workbenchStore.files.get(); + const absPath = getAbsolutePath(data.action.filePath); + const existing = !!files[absPath]; + data.action.isEdit = existing; + } + this.actions.setKey(actionId, { ...data.action, status: 'pending', executed: false, abort: () => { abortController.abort(); - this.#updateAction(actionId, { status: 'aborted' }); + this.updateAction(actionId, { status: 'aborted' }); }, abortSignal: abortController.signal, }); this.#currentExecutionPromise.then(() => { - this.#updateAction(actionId, { status: 'running' }); + this.updateAction(actionId, { status: 'running' }); }); } - async runAction(data: ActionCallbackData, isStreaming: boolean = false) { + async runAction(data: ActionCallbackData, args: { isStreaming: boolean }) { const { actionId } = data; const action = this.actions.get()[actionId]; @@ -151,15 +170,37 @@ export class ActionRunner { return; // No return value here } - if (isStreaming && action.type !== 'file') { + if (args.isStreaming && action.type !== 'file') { return; // No return value here } - this.#updateAction(actionId, { ...action, ...data.action, executed: !isStreaming }); + // Check for duplicate tool calls + if (action.type === 'toolUse') { + const parsed = action.parsedContent; + + if (parsed.state === 'call') { + const key = `${parsed.toolName}:${JSON.stringify(parsed.args)}`; + const previousCall = this.#previousToolCalls.get(key); + + if (previousCall) { + this.onToolCallComplete({ + kind: 'error', + result: 'Error: This exact action was already executed. Please try a different approach.', + toolCallId: parsed.toolCallId, + toolName: parsed.toolName as CodinitToolName, + }); + return; + } + + this.#previousToolCalls.set(key, { toolName: parsed.toolName, args: parsed.args }); + } + } + + this.updateAction(actionId, { ...action, ...data.action, executed: !args.isStreaming }); this.#currentExecutionPromise = this.#currentExecutionPromise .then(() => { - return this.#executeAction(actionId, isStreaming); + return this.#executeAction(actionId, args); }) .catch((error) => { console.error('Action failed:', error); @@ -170,87 +211,35 @@ export class ActionRunner { return; } - async #executeAction(actionId: string, isStreaming: boolean = false) { + async #executeAction(actionId: string, args: { isStreaming: boolean }) { const action = this.actions.get()[actionId]; - this.#updateAction(actionId, { status: 'running' }); + this.updateAction(actionId, { status: 'running' }); try { switch (action.type) { - case 'shell': { - await this.#runShellAction(action); - break; - } case 'file': { - await this.#queueFileWrite(() => this.#runFileAction(action)); - break; - } - case 'supabase': { - try { - await this.handleSupabaseAction(action as SupabaseAction); - } catch (error: any) { - // Update action status - this.#updateAction(actionId, { - status: 'failed', - error: error instanceof Error ? error.message : 'Supabase action failed', - }); - - // Return early without re-throwing - return; - } + await this.#runFileAction(action); break; } - case 'build': { - const buildOutput = await this.#runBuildAction(action); - - // Store build output for deployment - this.buildOutput = buildOutput; + case 'toolUse': { + await this.#runToolUseAction(actionId, action); break; } - case 'start': { - // making the start app non blocking - - this.#runStartAction(action) - .then(() => this.#updateAction(actionId, { status: 'complete' })) - .catch((err: Error) => { - if (action.abortSignal.aborted) { - return; - } - - this.#updateAction(actionId, { status: 'failed', error: 'Action failed' }); - logger.error(`[${action.type}]:Action failed\n\n`, err); - - if (!(err instanceof ActionCommandError)) { - return; - } - - this.onAlert?.({ - type: 'error', - title: 'Dev Server Failed', - description: err.header, - content: err.output, - }); - }); - - /* - * adding a delay to avoid any race condition between 2 start actions - * i am up for a better approach - */ - await new Promise((resolve) => setTimeout(resolve, 2000)); - - return; + default: { + throw new Error(`Unknown action type: ${JSON.stringify(action)}`); } } - this.#updateAction(actionId, { - status: isStreaming ? 'running' : action.abortSignal.aborted ? 'aborted' : 'complete', + this.updateAction(actionId, { + status: args.isStreaming ? 'running' : action.abortSignal.aborted ? 'aborted' : 'complete', }); } catch (error) { if (action.abortSignal.aborted) { return; } - this.#updateAction(actionId, { status: 'failed', error: 'Action failed' }); + this.updateAction(actionId, { status: 'failed', error: 'Action failed' }); logger.error(`[${action.type}]:Action failed\n\n`, error); if (!(error instanceof ActionCommandError)) { @@ -269,129 +258,6 @@ export class ActionRunner { } } - async #queueFileWrite(writeOperation: () => Promise): Promise { - if (this.#currentFileWrites < ActionRunner.MAX_CONCURRENT_FILE_WRITES) { - this.#currentFileWrites++; - - try { - await writeOperation(); - } finally { - this.#currentFileWrites--; - this.#processFileWriteQueue(); - } - } else { - await new Promise((resolve) => { - this.#fileWriteQueue.push(async () => { - await writeOperation(); - resolve(); - }); - }); - } - } - - #processFileWriteQueue() { - while (this.#fileWriteQueue.length > 0 && this.#currentFileWrites < ActionRunner.MAX_CONCURRENT_FILE_WRITES) { - const next = this.#fileWriteQueue.shift(); - - if (next) { - this.#currentFileWrites++; - next().finally(() => { - this.#currentFileWrites--; - this.#processFileWriteQueue(); - }); - } - } - } - - async #runShellAction(action: ActionState) { - if (action.type !== 'shell') { - unreachable('Expected shell action'); - } - - const shell = this.#shellTerminal(); - await shell.ready(); - - if (!shell || !shell.terminal || !shell.process) { - unreachable('Shell terminal not found'); - } - - const resp = await shell.executeCommand(this.runnerId.get(), action.content, () => { - logger.debug(`[${action.type}]:Aborting Action\n\n`, action); - action.abort(); - }); - logger.debug(`${action.type} Shell Response: [exit code:${resp?.exitCode}]`); - - // Check if this is a test command and handle test results - if (this.#isTestCommand(action.content) && resp?.output && this.onTestResult) { - const testResult = this.#parseTestOutput(resp.output); - - if (testResult) { - const status = resp.exitCode === 0 && testResult.summary.failed === 0 ? 'complete' : 'failed'; - - this.onTestResult({ - command: action.content, - ...testResult, - status, - }); - } - } - - if (resp?.exitCode != 0) { - throw new ActionCommandError(`Failed To Execute Shell Command`, resp?.output || 'No Output Available'); - } - } - - async #monitorLiveOutput(stream: ReadableStreamDefaultReader, command: string) { - let buffer = ''; - - try { - while (true) { - const { value, done } = await stream.read(); - - if (done) { - break; - } - - buffer += value || ''; - - if (this.onLiveOutput) { - this.onLiveOutput(buffer, command); - } - } - } catch (error) { - logger.error('Live output monitoring error:', error); - } - } - - async #runStartAction(action: ActionState) { - if (action.type !== 'start') { - unreachable('Expected shell action'); - } - - if (!this.#shellTerminal) { - unreachable('Shell terminal not found'); - } - - const shell = this.#shellTerminal(); - await shell.ready(); - - if (!shell || !shell.terminal || !shell.process) { - unreachable('Shell terminal not found'); - } - - const resp = await shell.executeCommand(this.runnerId.get(), action.content, () => { - logger.debug(`[${action.type}]:Aborting Action\n\n`, action); - action.abort(); - }); - logger.debug(`${action.type} Shell Response: [exit code:${resp?.exitCode}]`); - - if (resp?.exitCode != 0) { - throw new ActionCommandError('Failed To Start Application', resp?.output || 'No Output Available'); - } - - return resp; - } - async #runFileAction(action: ActionState) { if (action.type !== 'file') { unreachable('Expected file action'); @@ -414,31 +280,15 @@ export class ActionRunner { } } - const validationResult = validateCode(relativePath, action.content); - - if (!validationResult.isValid) { - logger.warn(`Code validation failed for ${relativePath}:`, validationResult.errors); - logger.warn('Writing file anyway, but it may contain errors'); - } - - if (validationResult.warnings.length > 0) { - logger.debug(`Code validation warnings for ${relativePath}:`, validationResult.warnings); - } - try { await webcontainer.fs.writeFile(relativePath, action.content); logger.debug(`File written ${relativePath}`); - - if (isElectron()) { - const projectName = getProjectName(); - await saveFileLocal(projectName, relativePath, action.content); - } } catch (error) { logger.error('Failed to write file\n\n', error); } } - #updateAction(id: string, newState: ActionStateUpdate) { + updateAction(id: string, newState: ActionStateUpdate) { const actions = this.actions.get(); this.actions.setKey(id, { ...actions[id], ...newState }); @@ -473,303 +323,278 @@ export class ActionRunner { return nodePath.join('.history', filePath); } - async #runBuildAction(action: ActionState) { - if (action.type !== 'build') { - unreachable('Expected build action'); + async #runToolUseAction(_actionId: string, action: ActionState) { + if (action.type !== 'toolUse') { + unreachable('Expected tool use action'); } - // Trigger build started alert - this.onDeployAlert?.({ - type: 'info', - title: 'Building Application', - description: 'Building your application...', - stage: 'building', - buildStatus: 'running', - deployStatus: 'pending', - source: 'netlify', - }); + const parsed: ToolInvocation = action.parsedContent; - const webcontainer = await this.#webcontainer; + if (parsed.state === 'result') { + return; + } - // Create a new terminal specifically for the build - const buildProcess = await webcontainer.spawn('npm', ['run', 'build']); + if (parsed.state === 'partial-call') { + throw new Error('Tool call is still in progress'); + } - let output = ''; - buildProcess.output.pipeTo( - new WritableStream({ - write(data) { - output += data; - }, - }), - ); + let result: string; - const exitCode = await buildProcess.exit; + try { + switch (parsed.toolName) { + case 'view': { + const args = viewParameters.parse(parsed.args); + const container = await this.#webcontainer; + const relPath = workDirRelative(args.path); + const file = await readPath(container, relPath); + + if (file.type === 'directory') { + result = renderDirectory(file.children); + } else { + if (args.view_range && args.view_range.length !== 2) { + throw new Error('When provided, view_range must be an array of two numbers'); + } + + result = renderFile(file.content, args.view_range as [number, number]); + } - if (exitCode !== 0) { - // Trigger build failed alert - this.onDeployAlert?.({ - type: 'error', - title: 'Build Failed', - description: 'Your application build failed', - content: output || 'No build output available', - stage: 'building', - buildStatus: 'failed', - deployStatus: 'pending', - source: 'netlify', - }); + break; + } + case 'edit': { + const args = editToolParameters.parse(parsed.args); + const container = await this.#webcontainer; + const relPath = workDirRelative(args.path); + const file = await readPath(container, relPath); + + if (file.type !== 'file') { + throw new Error('Expected a file'); + } - throw new ActionCommandError('Build Failed', output || 'No Output Available'); - } + let content = file.content; - // Trigger build success alert - this.onDeployAlert?.({ - type: 'success', - title: 'Build Completed', - description: 'Your application was built successfully', - stage: 'deploying', - buildStatus: 'complete', - deployStatus: 'running', - source: 'netlify', - }); + if (args.old.length > 1024) { + throw new Error(`Old text must be less than 1024 characters: ${args.old}`); + } - // Check for common build directories - const commonBuildDirs = ['dist', 'build', 'out', 'output', '.next', 'public']; + if (args.new.length > 1024) { + throw new Error(`New text must be less than 1024 characters: ${args.new}`); + } - let buildDir = ''; + const matchPos = content.indexOf(args.old); - // Try to find the first existing build directory - for (const dir of commonBuildDirs) { - const dirPath = nodePath.join(webcontainer.workdir, dir); + if (matchPos === -1) { + throw new Error(`Old text not found: ${args.old}`); + } - try { - await webcontainer.fs.readdir(dirPath); - buildDir = dirPath; - logger.debug(`Found build directory: ${buildDir}`); - break; - } catch (error) { - // Directory doesn't exist, try the next one - logger.debug(`Build directory ${dir} not found, trying next option. ${error}`); - } - } + const secondMatchPos = content.indexOf(args.old, matchPos + args.old.length); - // If no build directory was found, use the default (dist) - if (!buildDir) { - buildDir = nodePath.join(webcontainer.workdir, 'dist'); - logger.debug(`No build directory found, defaulting to: ${buildDir}`); - } + if (secondMatchPos !== -1) { + throw new Error(`Old text found multiple times: ${args.old}`); + } - return { - path: buildDir, - exitCode, - output, - }; - } - async handleSupabaseAction(action: SupabaseAction) { - const { operation, content, filePath } = action; - logger.debug('[Supabase Action]:', { operation, filePath, content }); - - switch (operation) { - case 'migration': - if (!filePath) { - throw new Error('Migration requires a filePath'); + content = content.replace(args.old, args.new); + await container.fs.writeFile(relPath, content); + result = `Successfully edited ${args.path}`; + break; } + case 'npmInstall': { + try { + const args = npmInstallToolParameters.parse(parsed.args); + const container = await this.#webcontainer; + await waitForContainerBootState(ContainerBootState.READY); - // Show alert for migration action - this.onSupabaseAlert?.({ - type: 'info', - title: 'Supabase Migration', - description: `Create migration file: ${filePath}`, - content, - source: 'supabase', - }); - - // Only create the migration file - await this.#runFileAction({ - type: 'file', - filePath, - content, - changeSource: 'supabase', - } as any); - return { success: true }; - - case 'query': { - // Always show the alert and let the SupabaseAlert component handle connection state - this.onSupabaseAlert?.({ - type: 'info', - title: 'Supabase Query', - description: 'Execute database query', - content, - source: 'supabase', - }); - - // The actual execution will be triggered from SupabaseChatAlert - return { pending: true }; - } + const npmInstallProc = await container.spawn('npm', ['install', ...args.packages.split(' ')]); + action.abortSignal.addEventListener('abort', () => { + npmInstallProc.kill(); + }); - default: - throw new Error(`Unknown operation: ${operation}`); - } - } + const { output, exitCode } = await streamOutput(npmInstallProc, { + onOutput: (output) => { + this.terminalOutput.set(output); + }, + debounceMs: 50, + }); + const cleanedOutput = cleanCodinitOutput(output); + + if (exitCode !== 0) { + throw new Error(`Npm install failed with exit code ${exitCode}: ${cleanedOutput}`); + } + + result = cleanedOutput; + } catch (error: unknown) { + if (error instanceof z.ZodError) { + result = `Error: Invalid npm install arguments. ${error}`; + } else if (error instanceof Error) { + result = `Error: ${error.message}`; + } else { + result = `Error: An unknown error occurred during npm install`; + } + } + break; + } + case 'lookupDocs': { + const args = lookupDocsParameters.parse(parsed.args); + const docsToLookup = args.docs; + const results: string[] = []; + + for (const doc of docsToLookup) { + if (doc in docs) { + results.push(docs[doc as DocKey]); + } else { + throw new Error(`Could not find documentation for component: ${doc}. It may not yet be supported.`); + } + } - // Add this method declaration to the class - handleDeployAction( - stage: 'building' | 'deploying' | 'complete', - status: ActionStatus, - details?: { - url?: string; - error?: string; - source?: 'vercel' | 'netlify' | 'github' | 'gitlab' | 'cloudflare'; - }, - ): void { - if (!this.onDeployAlert) { - logger.debug('No deploy alert handler registered'); - return; - } + result = results.join('\n\n'); + break; + } + case 'deploy': { + const container = await this.#webcontainer; + await waitForContainerBootState(ContainerBootState.READY); + + result = ''; + + const commandErroredController = new AbortController(); + const abortSignal = action.abortSignal; + + /** Return a promise of output on success, throws an error containing output on failure. */ + const run = async ( + commandAndArgs: string[], + errorPrefix: string, + onOutput?: (s: string) => void, + ): Promise => { + 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 alertType = status === 'failed' ? 'error' : status === 'complete' ? 'success' : 'info'; - - const title = - stage === 'building' - ? 'Building Application' - : stage === 'deploying' - ? 'Deploying Application' - : 'Deployment Complete'; - - const description = - status === 'failed' - ? `${stage === 'building' ? 'Build' : 'Deployment'} failed` - : status === 'running' - ? `${stage === 'building' ? 'Building' : 'Deploying'} your application...` - : status === 'complete' - ? `${stage === 'building' ? 'Build' : 'Deployment'} completed successfully` - : `Preparing to ${stage === 'building' ? 'build' : 'deploy'} your application`; - - const buildStatus = - stage === 'building' ? status : stage === 'deploying' || stage === 'complete' ? 'complete' : 'pending'; - - const deployStatus = stage === 'building' ? 'pending' : status; - - this.onDeployAlert({ - type: alertType, - title, - description, - content: details?.error || '', - url: details?.url, - stage, - buildStatus: buildStatus as any, - deployStatus: deployStatus as any, - source: details?.source || 'netlify', - }); - } + const { output, exitCode } = await streamOutput(proc, { onOutput, debounceMs: 50 }); - #isTestCommand(command: string): boolean { - const patterns = [/\b(npm|pnpm|yarn|bun)\s+(run\s+)?test\b/, /\b(vitest|jest|mocha|ava|tape)\b/, /\btest:[^\s]+/]; - return patterns.some((p) => p.test(command)); - } + const cleanedOutput = cleanCodinitOutput(output); + const time = performance.now() - t0; + logger.debug('finished', errorPrefix, 'in', Math.round(time)); - #parseTestOutput(output: string): { - summary: { total: number; passed: number; failed: number; skipped: number }; - duration: number; - coverage?: { lines: number; statements: number; functions: number; branches: number }; - failedTests?: Array<{ name: string; file: string; line: number; error: string; stack?: string }>; - } | null { - try { - // Try to parse Vitest output - const vitestMatch = output.match(/Test Files\s+(\d+)\s+passed.*?\((\d+)\)/); - const vitestFailed = output.match(/(\d+)\s+failed/); - const vitestSkipped = output.match(/(\d+)\s+skipped/); - const vitestDuration = output.match(/Duration\s+([\d.]+)([ms]+)/); - - // Try Jest format - const jestMatch = output.match(/Tests:\s+(\d+)\s+failed.*?(\d+)\s+passed.*?(\d+)\s+total/); - const jestTime = output.match(/Time:\s+([\d.]+)\s*s/); - - let summary = { total: 0, passed: 0, failed: 0, skipped: 0 }; - let duration = 0; - - if (vitestMatch) { - const passed = parseInt(vitestMatch[1] || '0', 10); - const total = parseInt(vitestMatch[2] || '0', 10); - const failed = vitestFailed ? parseInt(vitestFailed[1] || '0', 10) : 0; - const skipped = vitestSkipped ? parseInt(vitestSkipped[1] || '0', 10) : 0; - - summary = { total, passed, failed, skipped }; - - if (vitestDuration) { - const value = parseFloat(vitestDuration[1]); - duration = vitestDuration[2] === 's' ? value * 1000 : value; - } - } else if (jestMatch) { - const failed = parseInt(jestMatch[1] || '0', 10); - const passed = parseInt(jestMatch[2] || '0', 10); - const total = parseInt(jestMatch[3] || '0', 10); - const skipped = total - passed - failed; + if (exitCode !== 0) { + // Kill all other commands + commandErroredController.abort(`${errorPrefix}`); - summary = { total, passed, failed, skipped }; + // This command's output will be reported exclusively + throw new Error(`[${errorPrefix}] Failed with exit code ${exitCode}: ${cleanedOutput}`); + } - if (jestTime) { - duration = parseFloat(jestTime[1]) * 1000; - } - } else { - // Fallback: try to find any test counts - const passedMatch = output.match(/(\d+)\s+pass/i); - const failedMatch = output.match(/(\d+)\s+fail/i); - - if (passedMatch || failedMatch) { - const passed = passedMatch ? parseInt(passedMatch[1], 10) : 0; - const failed = failedMatch ? parseInt(failedMatch[1], 10) : 0; - const total = passed + failed; - summary = { total, passed, failed, skipped: 0 }; - } else { - return null; - } - } + abortSignal.removeEventListener('abort', abortListener); - // Parse coverage if available - let coverage; - const coverageMatch = output.match(/All files\s*\|\s*([\d.]+)\s*\|\s*([\d.]+)\s*\|\s*([\d.]+)\s*\|\s*([\d.]+)/); - - if (coverageMatch) { - coverage = { - statements: parseFloat(coverageMatch[1]), - branches: parseFloat(coverageMatch[2]), - functions: parseFloat(coverageMatch[3]), - lines: parseFloat(coverageMatch[4]), - }; - } + if (cleanedOutput.trim().length === 0) { + return ''; + } - // Parse failed tests - let failedTests; + return cleanedOutput + '\n\n'; + }; - if (summary.failed > 0) { - failedTests = []; + /* + * 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 failurePattern = /FAIL\s+(.+?)\n.*?›\s+(.+?)\n.*?Error:\s+(.+?)(?=\n\s*\n|\n\s*at|$)/gs; - let match; + const runCodegenAndTypecheck = async (onOutput?: (output: string) => void) => { + // Codinit codegen does a codinit directory typecheck, then tsc does a full-project typecheck. + let output = await run(['codinit', 'codegen'], outputLabels.codinitTypecheck, 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); + }); + result += await run(['codinit', 'dev', '--once', '--typecheck=disable'], outputLabels.codinitDeploy); - while ((match = failurePattern.exec(output)) !== null && failedTests.length < 10) { - const [, filePath, testName, error] = match; - const lineMatch = filePath.match(/:(\d+):/); - const line = lineMatch ? parseInt(lineMatch[1], 10) : 1; + const time = performance.now() - t0; + logger.info('deploy action finished in', time); - failedTests.push({ - name: testName.trim(), - file: filePath.replace(/:\d+:\d+$/, '').trim(), - line, - error: error.trim(), - }); + // Start the default preview if it's not already running + if (!workbenchStore.isDefaultPreviewRunning()) { + await this.#shellTerminal.executeCommand('start-preview', 'vite --open'); + result += '\n\nDev server started successfully!'; + } + + break; + } + case 'addEnvironmentVariables': { + const args = addEnvironmentVariablesParameters.parse(parsed.args); + const envVarNames = args.envVarNames; + + if (envVarNames.length === 0) { + result = 'Error: No environment variables to add. Please provide a list of environment variable names.'; + break; + } + + let path = `settings/environment-variables?var=${envVarNames[0]}`; + + for (const envVarName of envVarNames.slice(1)) { + path += `&var=${envVarName}`; + } + openDashboardToPath(path); + result = `Opened dashboard to add environment variables: ${envVarNames.join(', ')}\nPlease add the values in the dashboard.`; + break; + } + case 'getCodinitDeploymentName': { + const codinitProject = codinitProjectStore.get(); + + if (!codinitProject) { + result = 'Error: No Codinit project is currently connected. Please connect a Codinit project first.'; + } else { + result = codinitProject.deploymentName; + console.log('getCodinitDeploymentName tool called, returning:', result); + } + + break; + } + default: { + throw new Error(`Unknown tool: ${parsed.toolName}`); } } + this.onToolCallComplete({ + kind: 'success', + result, + toolCallId: action.parsedContent.toolCallId, + toolName: parsed.toolName, + }); + } catch (e: any) { + console.error('Error on tool call', e); - return { - summary, - duration: duration || 0, - coverage, - failedTests, - }; - } catch (error) { - logger.error('Failed to parse test output:', error); - return null; + let message = e.toString(); + + if (!message.startsWith('Error:')) { + message = 'Error: ' + message; + } + + this.onToolCallComplete({ + kind: 'error', + result: message, + toolCallId: action.parsedContent.toolCallId, + toolName: parsed.toolName as CodinitToolName, + }); + throw e; } } } diff --git a/app/lib/runtime/deployToolOutputLabels.ts b/app/lib/runtime/deployToolOutputLabels.ts new file mode 100644 index 00000000..6928c402 --- /dev/null +++ b/app/lib/runtime/deployToolOutputLabels.ts @@ -0,0 +1,7 @@ +export type OutputLabels = 'codinitTypecheck' | 'frontendTypecheck' | 'codinitDeploy'; + +export const outputLabels: Record = { + codinitTypecheck: 'codinit typecheck', + frontendTypecheck: 'frontend typecheck', + codinitDeploy: 'codinit deploy', +}; diff --git a/app/lib/runtime/message-parser.ts b/app/lib/runtime/message-parser.ts deleted file mode 100644 index d1c4b1a5..00000000 --- a/app/lib/runtime/message-parser.ts +++ /dev/null @@ -1,647 +0,0 @@ -import type { ActionType, BoltAction, BoltActionData, FileAction, ShellAction, SupabaseAction } from '~/types/actions'; -import type { CodinitArtifactData, ThinkingArtifactData } from '~/types/artifact'; -import type { ThinkingData } from '~/types/thinking'; -import { createScopedLogger } from '~/utils/logger'; -import { unreachable } from '~/utils/unreachable'; - -const ARTIFACT_TAG_OPEN = ' void; -export type ActionCallback = (data: ActionCallbackData) => void; -export type ThinkingCallback = (data: ThinkingCallbackData) => void; -export type ThinkingArtifactCallback = (data: ThinkingArtifactCallbackData) => void; - -export interface ThinkingArtifactCallbackData extends ThinkingArtifactData { - messageId: string; -} - -export interface ParserCallbacks { - onArtifactOpen?: ArtifactCallback; - onArtifactClose?: ArtifactCallback; - onActionOpen?: ActionCallback; - onActionStream?: ActionCallback; - onActionClose?: ActionCallback; - onThinkingOpen?: ThinkingCallback; - onThinkingClose?: ThinkingCallback; - onThinkingArtifactOpen?: ThinkingArtifactCallback; - onThinkingArtifactClose?: ThinkingArtifactCallback; -} - -interface ElementFactoryProps { - messageId: string; -} - -type ElementFactory = (props: ElementFactoryProps) => string; - -export interface StreamingMessageParserOptions { - callbacks?: ParserCallbacks; - artifactElement?: ElementFactory; - thinkingArtifactElement?: ElementFactory; -} - -interface MessageState { - position: number; - insideArtifact: boolean; - insideAction: boolean; - insideThinking: boolean; - insideThinkingArtifact: boolean; - actionId: number; - currentArtifact?: CodinitArtifactData; - currentAction?: BoltActionData; - currentThinking?: ThinkingData; - currentThinkingArtifact?: ThinkingArtifactData; -} - -function cleanoutMarkdownSyntax(content: string) { - const codeBlockRegex = /^\s*```[\w-]*\s*\n?([\s\S]*?)\n?\s*```\s*$/; - const match = content.match(codeBlockRegex); - - if (match) { - return match[1].trim(); - } - - const multilineCodeBlockRegex = /```[\w-]*\s*\n([\s\S]*?)```/g; - let cleaned = content.replace(multilineCodeBlockRegex, (_match, code) => code.trim()); - - const inlineCodeBlockRegex = /^```[\w-]*\s*\n?|```\s*$/gm; - cleaned = cleaned.replace(inlineCodeBlockRegex, ''); - - return cleaned.trim() !== content.trim() ? cleaned.trim() : content; -} - -function cleanEscapedTags(content: string) { - return content.replace(/</g, '<').replace(/>/g, '>'); -} -export class StreamingMessageParser { - #messages = new Map(); - - constructor(private _options: StreamingMessageParserOptions = {}) {} - - parse(messageId: string, input: string) { - let state = this.#messages.get(messageId); - - if (!state) { - state = { - position: 0, - insideAction: false, - insideArtifact: false, - insideThinking: false, - insideThinkingArtifact: false, - currentAction: { content: '' }, - actionId: 0, - }; - - this.#messages.set(messageId, state); - } - - let output = ''; - let i = state.position; - let earlyBreak = false; - - while (i < input.length) { - if (state.insideArtifact) { - const currentArtifact = state.currentArtifact; - - if (currentArtifact === undefined) { - unreachable('Artifact not initialized'); - } - - if (state.insideAction) { - let closeIndex = input.indexOf(ARTIFACT_ACTION_TAG_CLOSE, i); - - // Also check for legacy codinit action close tag - if (closeIndex === -1) { - closeIndex = input.indexOf(CODINIT_ACTION_TAG_CLOSE, i); - } - - const currentAction = state.currentAction; - - if (!currentAction) { - break; - } - - if (closeIndex !== -1) { - currentAction.content += input.slice(i, closeIndex); - - let content = currentAction.content.trim(); - - if ('type' in currentAction && currentAction.type === 'file') { - // Remove markdown code block syntax if present and file is not markdown - if (!currentAction.filePath.endsWith('.md')) { - content = cleanoutMarkdownSyntax(content); - content = cleanEscapedTags(content); - } - - content += '\n'; - } - - currentAction.content = content; - - this._options.callbacks?.onActionClose?.({ - artifactId: currentArtifact.id, - messageId, - - /** - * We decrement the id because it's been incremented already - * when `onActionOpen` was emitted to make sure the ids are - * the same. - */ - actionId: String(state.actionId - 1), - - action: currentAction as BoltAction, - }); - - state.insideAction = false; - state.currentAction = { content: '' }; - - // Determine which tag was found to get the correct length - const closeTagLength = - input.indexOf(ARTIFACT_ACTION_TAG_CLOSE, i) === closeIndex - ? ARTIFACT_ACTION_TAG_CLOSE.length - : CODINIT_ACTION_TAG_CLOSE.length; - - i = closeIndex + closeTagLength; - } else { - if ('type' in currentAction && currentAction.type === 'file') { - let content = input.slice(i); - - if (content.length > MAX_FILE_CHUNK_SIZE) { - content = content.slice(0, MAX_FILE_CHUNK_SIZE); - logger.warn(`File content exceeds 1MB limit, truncating for streaming`); - } - - if (!currentAction.filePath.endsWith('.md')) { - content = cleanoutMarkdownSyntax(content); - content = cleanEscapedTags(content); - } - - this._options.callbacks?.onActionStream?.({ - artifactId: currentArtifact.id, - messageId, - actionId: String(state.actionId - 1), - action: { - ...(currentAction as FileAction), - content, - filePath: currentAction.filePath, - }, - }); - } - - break; - } - } else { - let actionOpenIndex = input.indexOf(ARTIFACT_ACTION_TAG_OPEN, i); - let artifactCloseIndex = input.indexOf(ARTIFACT_TAG_CLOSE, i); - const thinkingArtifactCloseIndex = input.indexOf(THINKING_ARTIFACT_TAG_CLOSE, i); - - // Also check for legacy codinit tags - const codinitActionOpenIndex = input.indexOf(CODINIT_ACTION_TAG_OPEN, i); - const codinitArtifactCloseIndex = input.indexOf(CODINIT_ARTIFACT_TAG_CLOSE, i); - - // Use the earliest action open tag found - if (codinitActionOpenIndex !== -1 && (actionOpenIndex === -1 || codinitActionOpenIndex < actionOpenIndex)) { - actionOpenIndex = codinitActionOpenIndex; - } - - // Use the earliest artifact close tag found - if ( - codinitArtifactCloseIndex !== -1 && - (artifactCloseIndex === -1 || codinitArtifactCloseIndex < artifactCloseIndex) - ) { - artifactCloseIndex = codinitArtifactCloseIndex; - } - - // Use the earliest thinking artifact close tag found - if ( - thinkingArtifactCloseIndex !== -1 && - (artifactCloseIndex === -1 || thinkingArtifactCloseIndex < artifactCloseIndex) - ) { - artifactCloseIndex = thinkingArtifactCloseIndex; - } - - if (actionOpenIndex !== -1 && (artifactCloseIndex === -1 || actionOpenIndex < artifactCloseIndex)) { - const actionEndIndex = input.indexOf('>', actionOpenIndex); - - if (actionEndIndex !== -1) { - state.insideAction = true; - - state.currentAction = this.#parseActionTag(input, actionOpenIndex, actionEndIndex); - - this._options.callbacks?.onActionOpen?.({ - artifactId: currentArtifact.id, - messageId, - actionId: String(state.actionId++), - action: state.currentAction as BoltAction, - }); - - i = actionEndIndex + 1; - } else { - break; - } - } else if (artifactCloseIndex !== -1) { - if (state.currentArtifact) { - this._options.callbacks?.onArtifactClose?.({ messageId, ...state.currentArtifact }); - - state.insideArtifact = false; - state.currentArtifact = undefined; - } else if (state.currentThinkingArtifact) { - // Process thinking artifact content to extract steps - const content = state.currentThinkingArtifact.content; - const lines = content.split('\n').filter((line) => line.trim()); - const steps: string[] = []; - - lines.forEach((line) => { - const trimmed = line.trim(); - - const numberedMatch = trimmed.match(/^\d+\.\s*(.+)$/); - - if (numberedMatch) { - steps.push(numberedMatch[1]); - return; - } - - const bulletMatch = trimmed.match(/^[-*]\s*(.+)$/); - - if (bulletMatch) { - steps.push(bulletMatch[1]); - return; - } - - if (trimmed.length > 0) { - steps.push(trimmed); - } - }); - - const completedThinkingArtifact = { - ...state.currentThinkingArtifact, - steps, - }; - - this._options.callbacks?.onThinkingArtifactClose?.({ messageId, ...completedThinkingArtifact }); - - state.insideThinkingArtifact = false; - state.currentThinkingArtifact = undefined; - } - - // Determine which tag was found to get the correct length - const closeTagLength = - input.indexOf(ARTIFACT_TAG_CLOSE, i) === artifactCloseIndex - ? ARTIFACT_TAG_CLOSE.length - : input.indexOf(CODINIT_ARTIFACT_TAG_CLOSE, i) === artifactCloseIndex - ? CODINIT_ARTIFACT_TAG_CLOSE.length - : THINKING_ARTIFACT_TAG_CLOSE.length; - - i = artifactCloseIndex + closeTagLength; - } else { - break; - } - } - } else if (input[i] === '<' && input[i + 1] !== '/') { - let j = i; - let potentialTag = ''; - - const maxTagLength = Math.max( - ARTIFACT_TAG_OPEN.length, - CODINIT_ARTIFACT_TAG_OPEN.length, - THINKING_TAG_OPEN.length, - THINKING_ARTIFACT_TAG_OPEN.length, - ); - - while (j < input.length && potentialTag.length < maxTagLength) { - potentialTag += input[j]; - - const isCodinitTag = potentialTag === ARTIFACT_TAG_OPEN; - const isThinkingTag = potentialTag === THINKING_TAG_OPEN; - const isThinkingArtifactTag = potentialTag === THINKING_ARTIFACT_TAG_OPEN; - - if (isThinkingTag) { - const nextChar = input[j + 1]; - - if (nextChar && nextChar !== '>' && nextChar !== ' ') { - output += input.slice(i, j + 1); - i = j + 1; - break; - } - - const openTagEnd = input.indexOf('>', j); - - if (openTagEnd !== -1) { - const thinkingTag = input.slice(i, openTagEnd + 1); - const thinkingId = this.#extractAttribute(thinkingTag, 'id') as string; - - state.insideThinking = true; - - const currentThinking = { - id: thinkingId || `thinking-${Date.now()}`, - content: '', - } satisfies ThinkingData; - - state.currentThinking = currentThinking; - - this._options.callbacks?.onThinkingOpen?.({ messageId, ...currentThinking }); - - i = openTagEnd + 1; - } else { - earlyBreak = true; - } - - break; - } else if (isThinkingArtifactTag) { - const nextChar = input[j + 1]; - - if (nextChar && nextChar !== '>' && nextChar !== ' ') { - output += input.slice(i, j + 1); - i = j + 1; - break; - } - - const openTagEnd = input.indexOf('>', j); - - if (openTagEnd !== -1) { - const thinkingArtifactTag = input.slice(i, openTagEnd + 1); - const thinkingArtifactTitle = this.#extractAttribute(thinkingArtifactTag, 'title') as string; - const thinkingArtifactId = this.#extractAttribute(thinkingArtifactTag, 'id') as string; - - if (!thinkingArtifactTitle) { - logger.warn('Thinking artifact title missing'); - } - - if (!thinkingArtifactId) { - logger.warn('Thinking artifact id missing'); - } - - state.insideThinkingArtifact = true; - - const currentThinkingArtifact = { - id: thinkingArtifactId, - title: thinkingArtifactTitle, - type: 'thinking' as const, - steps: [], - content: '', - } satisfies ThinkingArtifactData; - - state.currentThinkingArtifact = currentThinkingArtifact; - - this._options.callbacks?.onThinkingArtifactOpen?.({ messageId, ...currentThinkingArtifact }); - - const thinkingArtifactFactory = this._options.thinkingArtifactElement ?? createThinkingArtifactElement; - - output += thinkingArtifactFactory({ messageId }); - - i = openTagEnd + 1; - } else { - earlyBreak = true; - } - - break; - } else if (isCodinitTag || isCodinitTag) { - const nextChar = input[j + 1]; - - if (nextChar && nextChar !== '>' && nextChar !== ' ') { - output += input.slice(i, j + 1); - i = j + 1; - break; - } - - const openTagEnd = input.indexOf('>', j); - - if (openTagEnd !== -1) { - const artifactTag = input.slice(i, openTagEnd + 1); - - const artifactTitle = this.#extractAttribute(artifactTag, 'title') as string; - const type = this.#extractAttribute(artifactTag, 'type') as string; - const artifactId = this.#extractAttribute(artifactTag, 'id') as string; - - if (!artifactTitle) { - logger.warn('Artifact title missing'); - } - - if (!artifactId) { - logger.warn('Artifact id missing'); - } - - state.insideArtifact = true; - - const currentArtifact = { - id: artifactId, - title: artifactTitle, - type, - } satisfies CodinitArtifactData; - - state.currentArtifact = currentArtifact; - - this._options.callbacks?.onArtifactOpen?.({ messageId, ...currentArtifact }); - - const artifactFactory = this._options.artifactElement ?? createArtifactElement; - - output += artifactFactory({ messageId }); - - i = openTagEnd + 1; - } else { - earlyBreak = true; - } - - break; - } else if ( - !ARTIFACT_TAG_OPEN.startsWith(potentialTag) && - !CODINIT_ARTIFACT_TAG_OPEN.startsWith(potentialTag) && - !THINKING_TAG_OPEN.startsWith(potentialTag) && - !THINKING_ARTIFACT_TAG_OPEN.startsWith(potentialTag) - ) { - output += input.slice(i, j + 1); - i = j + 1; - break; - } - - j++; - } - - if ( - j === input.length && - (ARTIFACT_TAG_OPEN.startsWith(potentialTag) || - CODINIT_ARTIFACT_TAG_OPEN.startsWith(potentialTag) || - THINKING_TAG_OPEN.startsWith(potentialTag) || - THINKING_ARTIFACT_TAG_OPEN.startsWith(potentialTag)) - ) { - break; - } - } else if (state.insideThinking) { - const closeIndex = input.indexOf(THINKING_TAG_CLOSE, i); - - if (closeIndex !== -1) { - const content = input.slice(i, closeIndex); - - if (state.currentThinking) { - state.currentThinking.content += content; - - output += `
${state.currentThinking.content}
`; - - this._options.callbacks?.onThinkingClose?.({ - messageId, - ...state.currentThinking, - }); - - state.insideThinking = false; - state.currentThinking = undefined; - - i = closeIndex + THINKING_TAG_CLOSE.length; - } else { - output += input[i]; - i++; - } - } else if (state.insideThinkingArtifact) { - const closeIndex = input.indexOf(THINKING_ARTIFACT_TAG_CLOSE, i); - - if (closeIndex !== -1) { - const content = input.slice(i, closeIndex); - - if (state.currentThinkingArtifact) { - state.currentThinkingArtifact.content += content; - } - - i = closeIndex; - } else { - if (state.currentThinkingArtifact) { - state.currentThinkingArtifact.content += input.slice(i); - } - - break; - } - } else { - if (state.currentThinking) { - state.currentThinking.content += input.slice(i); - } - - break; - } - } else { - output += input[i]; - i++; - } - - if (earlyBreak) { - break; - } - } - - state.position = i; - - return output; - } - - reset() { - this.#messages.clear(); - } - - #parseActionTag(input: string, actionOpenIndex: number, actionEndIndex: number) { - const actionTag = input.slice(actionOpenIndex, actionEndIndex + 1); - - const actionType = this.#extractAttribute(actionTag, 'type') as ActionType; - - const actionAttributes = { - type: actionType, - content: '', - }; - - if (actionType === 'supabase') { - const operation = this.#extractAttribute(actionTag, 'operation'); - - if (!operation || !['migration', 'query'].includes(operation)) { - logger.warn(`Invalid or missing operation for Supabase action: ${operation}`); - throw new Error(`Invalid Supabase operation: ${operation}`); - } - - (actionAttributes as SupabaseAction).operation = operation as 'migration' | 'query'; - - if (operation === 'migration') { - const filePath = this.#extractAttribute(actionTag, 'filePath'); - - if (!filePath) { - logger.warn('Migration requires a filePath'); - throw new Error('Migration requires a filePath'); - } - - (actionAttributes as SupabaseAction).filePath = filePath; - } - } else if (actionType === 'file') { - const filePath = this.#extractAttribute(actionTag, 'filePath') as string; - - if (!filePath) { - logger.debug('File path not specified'); - } - - (actionAttributes as FileAction).filePath = filePath; - } else if (!['shell', 'start'].includes(actionType)) { - logger.warn(`Unknown action type '${actionType}'`); - } - - return actionAttributes as FileAction | ShellAction; - } - - #extractAttribute(tag: string, attributeName: string): string | undefined { - const match = tag.match(new RegExp(`${attributeName}="([^"]*)"`, 'i')); - return match ? match[1] : undefined; - } -} - -const createArtifactElement: ElementFactory = (props) => { - const elementProps = [ - 'class="__codinitArtifact__"', - ...Object.entries(props).map(([key, value]) => { - return `data-${camelToDashCase(key)}=${JSON.stringify(value)}`; - }), - ]; - - return `
`; -}; - -const createThinkingArtifactElement: ElementFactory = (props) => { - const elementProps = [ - 'class="__thinkingArtifact__"', - ...Object.entries(props).map(([key, value]) => { - return `data-${camelToDashCase(key)}=${JSON.stringify(value)}`; - }), - ]; - - return `
`; -}; - -function camelToDashCase(input: string) { - return input.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); -} diff --git a/app/lib/services/builtInToolService.ts b/app/lib/services/builtInToolService.ts deleted file mode 100644 index 2de1c044..00000000 --- a/app/lib/services/builtInToolService.ts +++ /dev/null @@ -1,203 +0,0 @@ -import type { WebContainer } from '@webcontainer/api'; -import { ToolRegistry } from '~/lib/common/tool-registry'; -import { createScopedLogger } from '~/utils/logger'; -import { readFile, lsRepo, grepRepo } from './tools/repoTools'; -import { searchWeb, fetchFromWeb } from './tools/webTools'; -import { manageTodo } from './tools/todoTools'; - -const logger = createScopedLogger('BuiltInToolService'); - -export interface ToolExecutor { - (args: any, webcontainer?: WebContainer): Promise; -} - -export class BuiltInToolService { - private static _instance: BuiltInToolService; - private _enabledTools: Set = new Set(); - private _webcontainer?: WebContainer; - - static getInstance(): BuiltInToolService { - if (!BuiltInToolService._instance) { - BuiltInToolService._instance = new BuiltInToolService(); - } - - return BuiltInToolService._instance; - } - - constructor() { - ToolRegistry.initialize(); - this.setEnabledTools(['ReadFile', 'LSRepo', 'SearchWeb', 'TodoManager']); - logger.info('BuiltInToolService initialized'); - } - - setWebContainer(webcontainer: WebContainer): void { - this._webcontainer = webcontainer; - logger.info('WebContainer attached to BuiltInToolService'); - } - - setEnabledTools(toolNames: string[]): void { - this._enabledTools = new Set(toolNames); - logger.info('Enabled tools:', Array.from(this._enabledTools)); - } - - getEnabledTools(): string[] { - return Array.from(this._enabledTools); - } - - get tools(): Record { - const tools: Record = {}; - const allTools = ToolRegistry.getAllToolDefinitions(); - - for (const toolDef of allTools) { - if (!this._enabledTools.has(toolDef.name)) { - continue; - } - - tools[toolDef.name] = { - description: toolDef.description, - parameters: toolDef.parameters, - execute: this._getExecutor(toolDef.name), - }; - } - - return tools; - } - - get toolsWithoutExecute(): Record { - const tools: Record = {}; - const allTools = ToolRegistry.getAllToolDefinitions(); - - for (const toolDef of allTools) { - if (!this._enabledTools.has(toolDef.name)) { - continue; - } - - tools[toolDef.name] = { - description: toolDef.description, - parameters: toolDef.parameters, - }; - } - - return tools; - } - - private _getExecutor(toolName: string): ToolExecutor { - const executorMap: Record = { - ReadFile: this._executeReadFile.bind(this), - LSRepo: this._executeLSRepo.bind(this), - GrepRepo: this._executeGrepRepo.bind(this), - SearchWeb: this._executeSearchWeb.bind(this), - FetchFromWeb: this._executeFetchFromWeb.bind(this), - TodoManager: this._executeTodoManager.bind(this), - }; - - const executor = executorMap[toolName]; - - if (!executor) { - throw new Error(`No executor found for tool: ${toolName}`); - } - - return executor; - } - - private async _executeReadFile(args: any): Promise { - if (!this._webcontainer) { - throw new Error('WebContainer not initialized'); - } - - logger.info('Executing ReadFile tool'); - - return await readFile(this._webcontainer, args); - } - - private async _executeLSRepo(args: any): Promise { - if (!this._webcontainer) { - throw new Error('WebContainer not initialized'); - } - - logger.info('Executing LSRepo tool'); - - return await lsRepo(this._webcontainer, args); - } - - private async _executeGrepRepo(args: any): Promise { - if (!this._webcontainer) { - throw new Error('WebContainer not initialized'); - } - - logger.info('Executing GrepRepo tool'); - - return await grepRepo(this._webcontainer, args); - } - - private async _executeSearchWeb(args: any): Promise { - logger.info('Executing SearchWeb tool'); - return await searchWeb(args); - } - - private async _executeFetchFromWeb(args: any): Promise { - logger.info('Executing FetchFromWeb tool'); - return await fetchFromWeb(args); - } - - private async _executeTodoManager(args: any): Promise { - logger.info('Executing TodoManager tool'); - return manageTodo(args); - } - - async executeTool(toolName: string, args: any): Promise { - if (!this._enabledTools.has(toolName)) { - throw new Error(`Tool ${toolName} is not enabled`); - } - - const executor = this._getExecutor(toolName); - - return await executor(args, this._webcontainer); - } - - async processToolInvocations(messages: any[], dataStream: any): Promise { - const processedMessages = [...messages]; - - for (const message of processedMessages) { - if (message.role === 'assistant' && message.toolInvocations) { - for (const invocation of message.toolInvocations) { - if (invocation.state === 'call' && this._enabledTools.has(invocation.toolName)) { - try { - logger.info('Processing tool invocation:', invocation.toolName); - - const result = await this.executeTool(invocation.toolName, invocation.args); - - invocation.state = 'result'; - invocation.result = result; - - if (dataStream) { - dataStream.writeData({ - type: 'tool-result', - toolName: invocation.toolName, - result, - }); - } - } catch (error) { - logger.error('Tool execution error:', error); - - invocation.state = 'result'; - invocation.result = { - error: error instanceof Error ? error.message : 'Unknown error', - }; - - if (dataStream) { - dataStream.writeData({ - type: 'tool-error', - toolName: invocation.toolName, - error: error instanceof Error ? error.message : 'Unknown error', - }); - } - } - } - } - } - } - - return processedMessages; - } -} diff --git a/app/lib/stores/codinitProject.ts b/app/lib/stores/codinitProject.ts new file mode 100644 index 00000000..8bff82fe --- /dev/null +++ b/app/lib/stores/codinitProject.ts @@ -0,0 +1,4 @@ +import { atom } from 'nanostores'; +import type { CodinitProject } from 'codinit-agent/types'; + +export const codinitProjectStore = atom(undefined); diff --git a/app/lib/stores/containerBootState.ts b/app/lib/stores/containerBootState.ts new file mode 100644 index 00000000..5583b80e --- /dev/null +++ b/app/lib/stores/containerBootState.ts @@ -0,0 +1,24 @@ +import { atom } from 'nanostores'; + +export enum ContainerBootState { + BOOTING = 'booting', + READY = 'ready', +} + +export const containerBootStatus = atom(ContainerBootState.BOOTING); + +export function waitForContainerBootState(state: ContainerBootState) { + return new Promise((resolve) => { + if (containerBootStatus.get() === state) { + resolve(); + return; + } + + const unsubscribe = containerBootStatus.subscribe((value) => { + if (value === state) { + unsubscribe(); + resolve(); + } + }); + }); +} diff --git a/app/lib/stores/dashboardPath.ts b/app/lib/stores/dashboardPath.ts new file mode 100644 index 00000000..c90247f5 --- /dev/null +++ b/app/lib/stores/dashboardPath.ts @@ -0,0 +1,7 @@ +import { atom } from 'nanostores'; + +export const dashboardPathStore = atom(''); + +export function openDashboardToPath(path: string) { + dashboardPathStore.set(path); +} diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts index f4bbd277..65d2927c 100644 --- a/app/lib/stores/workbench.ts +++ b/app/lib/stores/workbench.ts @@ -1,11 +1,7 @@ import { atom, map, type MapStore, type ReadableAtom, type WritableAtom } from 'nanostores'; import type { EditorDocument, ScrollPosition } from '~/components/editor/codemirror/CodeMirrorEditor'; -import { ActionRunner } from '~/lib/runtime/action-runner'; -import type { - ActionCallbackData, - ArtifactCallbackData, - ThinkingArtifactCallbackData, -} from '~/lib/runtime/message-parser'; +import type { ActionCallbackData, ArtifactCallbackData } from 'codinit-agent/message-parser'; +import type { ExampleShell } from '~/utils/shell'; import { webcontainer, setupWebContainerEventHandlers } from '~/lib/webcontainer'; import type { ITerminal } from '~/types/terminal'; import { unreachable } from '~/utils/unreachable'; @@ -27,21 +23,12 @@ import { startAutoSave } from '~/lib/persistence/fileAutoSave'; import { diffApprovalStore } from './settings'; import { isElectron, saveFileLocal } from '~/utils/electron'; import { getProjectName } from '~/utils/projectName'; +import { ActionRunner } from '~/lib/runtime/action-runner'; const { saveAs } = fileSaver; const logger = createScopedLogger('WorkbenchStore'); -function yieldToMainThread(): Promise { - return new Promise((resolve) => { - if ('requestIdleCallback' in window) { - requestIdleCallback(() => resolve(), { timeout: 100 }); - } else { - setTimeout(resolve, 0); - } - }); -} - const DEFAULT_ACTION_SAMPLE_INTERVAL = 500; export interface ArtifactState { @@ -141,6 +128,12 @@ export class WorkbenchStore { artifactIdList: string[] = []; #globalExecutionQueue = Promise.resolve(); + actionStreamSampler = createSampler( + (data: ActionCallbackData, isStreaming: boolean) => + this.addToExecutionQueue(() => this._runAction(data, isStreaming)), + DEFAULT_ACTION_SAMPLE_INTERVAL, + ); + constructor() { if (import.meta.hot) { import.meta.hot.data.artifacts = this.artifacts; @@ -502,6 +495,10 @@ export class WorkbenchStore { } } + isDefaultPreviewRunning() { + return this.#previewsStore.previews.get().length > 0; + } + async deleteFile(filePath: string) { try { const currentDocument = this.currentDocument.get(); @@ -601,8 +598,17 @@ export class WorkbenchStore { this.#reloadedMessages = new Set(messages); } - addArtifact(data: ArtifactCallbackData & { id: string; title: string; type?: string }) { - const { messageId, title, id, type } = data; + #getArtifact(messageId: string): ArtifactState | undefined { + return this.artifacts.get()[messageId]; + } + + #getProjectName() { + return getProjectName(); + } + + addArtifact(data: ArtifactCallbackData) { + const { partId, title, id, type } = data; + const messageId = partId; const artifact = this.#getArtifact(messageId); if (artifact) { @@ -618,81 +624,23 @@ export class WorkbenchStore { title, closed: false, type, - runner: new ActionRunner( - webcontainer, - () => this.codinitTerminal, - (alert) => { + runner: new ActionRunner(webcontainer, this.codinitTerminal as unknown as ExampleShell, { + onAlert: (alert: ActionAlert) => { if (this.#reloadedMessages.has(messageId)) { return; } this.actionAlert.set(alert); }, - (alert) => { - if (this.#reloadedMessages.has(messageId)) { - return; - } - - this.supabaseAlert.set(alert); - }, - (alert) => { - if (this.#reloadedMessages.has(messageId)) { - return; - } - - this.deployAlert.set(alert); + onToolCallComplete: () => { + // Partial implementation }, - (testResult) => { - if (this.#reloadedMessages.has(messageId)) { - return; - } - - // Create or update test artifact - const testArtifact = this.#getTestArtifact(messageId); - - if (!testArtifact) { - this.addTestArtifact(messageId, { - id: `test-${Date.now()}`, - title: 'Test Results', - type: 'test', - command: testResult.command, - summary: testResult.summary, - duration: testResult.duration, - coverage: testResult.coverage, - failedTests: testResult.failedTests, - status: testResult.status, - timestamp: new Date().toISOString(), - }); - } else { - this.updateTestArtifact(messageId, { - summary: testResult.summary, - duration: testResult.duration, - coverage: testResult.coverage, - failedTests: testResult.failedTests, - status: testResult.status, - }); - } - }, - (output, command) => { - if (this.#reloadedMessages.has(messageId)) { - return; - } - - this.actionAlert.set({ - type: 'info', - title: 'Command Running', - description: `Executing: ${command}`, - content: output, - isStreaming: true, - streamingOutput: output, - command, - }); - }, - ), + }), }); } - updateArtifact({ messageId }: ArtifactCallbackData, state: Partial) { + updateArtifact({ partId }: ArtifactCallbackData, state: Partial) { + const messageId = partId; const artifact = this.#getArtifact(messageId); if (!artifact) { @@ -702,37 +650,6 @@ export class WorkbenchStore { this.artifacts.setKey(messageId, { ...artifact, ...state }); } - addThinkingArtifact({ messageId, title, id, type, steps, content }: ThinkingArtifactCallbackData) { - const thinkingArtifact = this.#getThinkingArtifact(messageId); - - if (thinkingArtifact) { - return; - } - - this.thinkingArtifacts.setKey(messageId, { - id, - title, - closed: false, - type, - steps, - content, - }); - } - - updateThinkingArtifact({ messageId }: ThinkingArtifactCallbackData, state: Partial) { - const thinkingArtifact = this.#getThinkingArtifact(messageId); - - if (!thinkingArtifact) { - return; - } - - this.thinkingArtifacts.setKey(messageId, { ...thinkingArtifact, ...state }); - } - - #getThinkingArtifact(messageId: string): ThinkingArtifactState | undefined { - return this.thinkingArtifacts.get()[messageId]; - } - addTestArtifact(messageId: string, artifact: Omit) { const testArtifact = this.#getTestArtifact(messageId); @@ -761,12 +678,12 @@ export class WorkbenchStore { } addAction(data: ActionCallbackData) { - // this._addAction(data); - this.addToExecutionQueue(() => this._addAction(data)); } + async _addAction(data: ActionCallbackData) { - const { messageId } = data; + const { partId } = data; + const messageId = partId; const artifact = this.#getArtifact(messageId); @@ -784,8 +701,10 @@ export class WorkbenchStore { this.addToExecutionQueue(() => this._runAction(data, isStreaming)); } } + async _runAction(data: ActionCallbackData, isStreaming: boolean = false) { - const { messageId } = data; + const { partId } = data; + const messageId = partId; const artifact = this.#getArtifact(messageId); @@ -799,88 +718,25 @@ export class WorkbenchStore { return; } - await yieldToMainThread(); - - if (data.action.type === 'file' && !isStreaming && diffApprovalStore.get()) { - const wc = await webcontainer; - const fullPath = path.join(wc.workdir, data.action.filePath); - - let beforeContent = ''; - const existingFile = this.files.get()[fullPath]; - - if (existingFile && existingFile.type === 'file') { - beforeContent = existingFile.content; - } else { - try { - const fileContent = await wc.fs.readFile(fullPath, 'utf-8'); - beforeContent = fileContent; - } catch { - beforeContent = ''; - } - } - - const afterContent = data.action.content; - - if (beforeContent !== afterContent) { - this.pendingApproval.set({ - actionId: data.actionId, - messageId, - artifactId: data.artifactId, - filePath: fullPath, - beforeContent, - afterContent, - action: data.action, - }); - - const actions = artifact.runner.actions.get(); - const currentAction = actions[data.actionId]; - - if (currentAction) { - artifact.runner.actions.setKey(data.actionId, { ...currentAction, status: 'awaiting-approval' }); - } - - return; - } - } - if (data.action.type === 'file') { - const wc = await webcontainer; - const fullPath = path.join(wc.workdir, data.action.filePath); + const fullPath = path.join('/', data.action.filePath); - /* - * For scoped locks, we would need to implement diff checking here - * to determine if the AI is modifying existing code or just adding new code - * This is a more complex feature that would be implemented in a future update - */ - - if (this.selectedFile.value !== fullPath) { + if (this.selectedFile.get() !== fullPath) { this.setSelectedFile(fullPath); } - if (this.currentView.value !== 'code') { - this.currentView.set('code'); - } - - const doc = this.#editorStore.documents.get()[fullPath]; - - if (!doc) { - await artifact.runner.runAction(data, isStreaming); - } - this.#editorStore.updateFile(fullPath, data.action.content); - await yieldToMainThread(); if (!isStreaming && data.action.content) { await this.saveFile(fullPath); - await yieldToMainThread(); } + } - if (!isStreaming) { - await artifact.runner.runAction(data); - this.resetAllFileModifications(); - } + if (!isStreaming) { + await artifact.runner.runAction(data, { isStreaming }); + this.resetAllFileModifications(); } else { - await artifact.runner.runAction(data); + await artifact.runner.runAction(data, { isStreaming }); } } @@ -891,7 +747,7 @@ export class WorkbenchStore { return; } - const { actionId, messageId, artifactId, action } = pending; + const { actionId, messageId } = pending; this.pendingApproval.set(null); @@ -914,10 +770,13 @@ export class WorkbenchStore { try { await this._runAction( { - messageId, - artifactId, actionId, - action, + partId: artifact.id as any, + artifactId: artifact.id, + action: { + type: 'build' as const, + content: 'npm run build', + }, }, false, ); @@ -951,15 +810,6 @@ export class WorkbenchStore { } } - actionStreamSampler = createSampler(async (data: ActionCallbackData, isStreaming: boolean = false) => { - return await this._runAction(data, isStreaming); - }, DEFAULT_ACTION_SAMPLE_INTERVAL); - - #getArtifact(id: string) { - const artifacts = this.artifacts.get(); - return artifacts[id]; - } - async downloadZip() { const zip = new JSZip(); const files = this.files.get(); @@ -1331,10 +1181,6 @@ export class WorkbenchStore { throw error; } } - - #getProjectName() { - return getProjectName(); - } } export const workbenchStore = new WorkbenchStore(); diff --git a/app/lib/version.ts b/app/lib/version.ts index 4fdf74f2..7f64bb20 100644 --- a/app/lib/version.ts +++ b/app/lib/version.ts @@ -1,2 +1,2 @@ -export const APP_VERSION = '1.2.3'; +export const APP_VERSION = '1.2.5'; export const GITHUB_REPOSITORY = 'codinit-dev/codinit-dev'; diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts index 442dc365..99473044 100644 --- a/app/routes/api.chat.ts +++ b/app/routes/api.chat.ts @@ -11,7 +11,6 @@ import type { ContextAnnotation, ProgressAnnotation } from '~/types/context'; import { WORK_DIR } from '~/utils/constants'; import { extractPropertiesFromMessage } from '~/lib/.server/llm/utils'; import { MCPService } from '~/lib/services/mcpService'; -import { BuiltInToolService } from '~/lib/services/builtInToolService'; export async function action(args: ActionFunctionArgs) { return chatAction(args); @@ -255,10 +254,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) { } try { - const builtInToolService = BuiltInToolService.getInstance(); - const serverSideTools = ['SearchWeb', 'FetchFromWeb', 'TodoManager']; - builtInToolService.setEnabledTools(serverSideTools); - processedMessages = await builtInToolService.processToolInvocations(processedMessages, dataStream); + // const serverSideTools = ['SearchWeb', 'FetchFromWeb', 'TodoManager']; logger.debug('Processed built-in tool invocations'); } catch (error) { logger.error('Failed to process built-in tool invocations:', error); diff --git a/app/types/actions.ts b/app/types/actions.ts index a2494dd6..323c5275 100644 --- a/app/types/actions.ts +++ b/app/types/actions.ts @@ -30,9 +30,9 @@ export interface SupabaseAction extends BaseAction { projectId?: string; } -export type BoltAction = FileAction | ShellAction | StartAction | BuildAction | SupabaseAction; +export type CodinitAction = FileAction | ShellAction | StartAction | BuildAction | SupabaseAction; -export type BoltActionData = BoltAction | BaseAction; +export type CodinitActionData = CodinitAction | BaseAction; export interface ActionAlert { type: string; diff --git a/app/utils/fileUtils.ts b/app/utils/fileUtils.ts index 7a06432b..a8b77a80 100644 --- a/app/utils/fileUtils.ts +++ b/app/utils/fileUtils.ts @@ -116,6 +116,35 @@ ${files[filePath].content} `, ) .join('\n')} + `; }; + +// Added utilities +import type { WebContainer } from '@webcontainer/api'; +import { path } from 'codinit-agent/utils/path'; +import { WORK_DIR } from 'codinit-agent/constants'; + +export function workDirRelative(filePath: string): string { + return path.relative(WORK_DIR, filePath); +} + +export type FileResult = { type: 'file'; content: string } | { type: 'directory'; children: any[] }; + +export async function readPath(webcontainer: WebContainer, filePath: string): Promise { + try { + // Try as directory first + const entries = await webcontainer.fs.readdir(filePath, { withFileTypes: true }); + return { type: 'directory', children: entries }; + } catch { + // If not a directory, try as file + try { + const content = await webcontainer.fs.readFile(filePath, 'utf-8'); + return { type: 'file', content }; + } catch { + // console.warn(`Failed to read path ${filePath}`, e2); + } + } + return { type: 'directory', children: [] }; // Fallback +} diff --git a/app/utils/process.ts b/app/utils/process.ts new file mode 100644 index 00000000..876f821e --- /dev/null +++ b/app/utils/process.ts @@ -0,0 +1,20 @@ +import type { WebContainerProcess } from '@webcontainer/api'; + +export async function streamOutput( + process: WebContainerProcess, + options: { onOutput?: (output: string) => void; debounceMs?: number } = {}, +): Promise<{ output: string; exitCode: number }> { + let output = ''; + process.output.pipeTo( + new WritableStream({ + write(data) { + output += data; + options.onOutput?.(data); + }, + }), + ); + + const exitCode = await process.exit; + + return { output, exitCode }; +} diff --git a/buildSystemPrompts.ts b/buildSystemPrompts.ts new file mode 100644 index 00000000..9aad23e4 --- /dev/null +++ b/buildSystemPrompts.ts @@ -0,0 +1,39 @@ +#!/usr/bin/env node + +import { writeFileSync } from 'fs'; +import { ROLE_SYSTEM_PROMPT, generalSystemPrompt } from './codinit-agent/prompts/system.js'; +import type { SystemPromptOptions } from './codinit-agent/types.js'; + +console.log('Building codinit system prompts release...'); + +const defaultOptions: SystemPromptOptions = { + enableBulkEdits: true, + includeTemplate: true, + openaiProxyEnabled: true, + usingOpenAi: true, + usingGoogle: true, + resendProxyEnabled: true, + enableResend: true, +}; + +let output: string = `# Codinit System Prompts\n`; +output += `Generated on: ${new Date().toISOString()}\n`; +output += `========================================\n\n`; +output += `This file contains the system prompts sent to Codinit.\n\n`; + +output += `## System Message 1: ROLE_SYSTEM_PROMPT\n\n`; +output += ROLE_SYSTEM_PROMPT + '\n\n'; +output += `---\n\n`; + +output += `## System Message 2: General System Prompt\n\n`; +try { + const generalPromptContent = generalSystemPrompt(defaultOptions); + output += generalPromptContent + '\n\n'; + output += `---\n\n`; +} catch (error: unknown) { + const errorMessage: string = error instanceof Error ? error.message : String(error); + console.log(`Could not generate general system prompt: ${errorMessage}`); +} + +writeFileSync('codinit-system-prompts.txt', output); +console.log('✅ Built codinit-system-prompts.txt'); diff --git a/codinit-agent/ChatContextManager.test.ts b/codinit-agent/ChatContextManager.test.ts new file mode 100644 index 00000000..98944906 --- /dev/null +++ b/codinit-agent/ChatContextManager.test.ts @@ -0,0 +1,281 @@ +import { describe, expect, test } from 'vitest'; +import { ChatContextManager } from './ChatContextManager.js'; +import type { UIMessage } from 'ai'; + +describe('ChatContextManager', () => { + const mockGetCurrentDocument = () => undefined; + const mockGetFiles = () => ({}); + const mockGetUserWrites = () => new Map(); + + const createManager = () => { + return new ChatContextManager(mockGetCurrentDocument, mockGetFiles, mockGetUserWrites); + }; + + const createMessage = (role: 'user' | 'assistant', parts: UIMessage['parts']): UIMessage => ({ + id: '1', + role, + content: '', + parts, + }); + + const maxCollapsedMessagesSize = 1000; + const relevantFilesMessage = createMessage('user', [ + { + type: 'text', + text: ` +{"name": "test"} +`, + }, + ]); + const emptyRelevantFilesMessage = createMessage('user', [ + { + type: 'text', + text: ` + +`, + }, + ]); + + describe('shouldSendRelevantFiles', () => { + test('returns true for empty messages array', () => { + const manager = createManager(); + expect(manager.shouldSendRelevantFiles([], maxCollapsedMessagesSize)).toBe(true); + }); + + test('returns true when message cutoff changes', () => { + const manager = createManager(); + const messages = [ + relevantFilesMessage, + createMessage('user', [ + { + type: 'text', + text: 'A'.repeat(1000), + }, + ]), + ]; + expect(manager.shouldSendRelevantFiles(messages, maxCollapsedMessagesSize)).toBe(true); + }); + + test('returns false when previous message has non-empty file content', () => { + const manager = createManager(); + const messages = [relevantFilesMessage]; + expect(manager.shouldSendRelevantFiles(messages, maxCollapsedMessagesSize)).toBe(false); + }); + + test('returns true when previous message has empty file content', () => { + const manager = createManager(); + const messages = [ + createMessage('user', [ + { + type: 'text', + text: ` + +`, + }, + ]), + ]; + expect(manager.shouldSendRelevantFiles(messages, maxCollapsedMessagesSize)).toBe(true); + }); + + test('returns true when previous message has Relevant Files but no codinitAction', () => { + const manager = createManager(); + const messages = [ + createMessage('user', [ + { + type: 'text', + text: ` +`, + }, + ]), + ]; + expect(manager.shouldSendRelevantFiles(messages, maxCollapsedMessagesSize)).toBe(true); + }); + + test('returns true when previous message has multiple empty codinitActions', () => { + const manager = createManager(); + const messages = [emptyRelevantFilesMessage]; + expect(manager.shouldSendRelevantFiles(messages, maxCollapsedMessagesSize)).toBe(true); + }); + + test('returns false when previous message has at least one non-empty codinitAction', () => { + const manager = createManager(); + const messages = [relevantFilesMessage, emptyRelevantFilesMessage]; + expect(manager.shouldSendRelevantFiles(messages, maxCollapsedMessagesSize)).toBe(false); + }); + }); + + describe('prepareContext', () => { + test('should not collapse messages when last message is not from user', () => { + const maxCollapsedMessagesSize = 2000; + const collapsedMessagesSize = 1000; + const messages: UIMessage[] = [ + { + id: '1', + role: 'user', + content: 'A'.repeat(3000), // Create a large message + parts: [{ type: 'text', text: 'A'.repeat(3000) }], + }, + { + id: '2', + role: 'assistant', + content: 'Hi there', + parts: [{ type: 'text', text: 'Hi there' }], + }, + ]; + + const { messages: newMessages, collapsedMessages } = createManager().prepareContext( + messages, + maxCollapsedMessagesSize, + collapsedMessagesSize, + ); + expect(newMessages).toEqual(messages); + expect(collapsedMessages).toBe(false); + }); + + test('should truncate when message cutoff changes even if partIndex is equal', () => { + const maxCollapsedMessagesSize = 2000; + const collapsedMessagesSize = 1000; + const chatContextManager = createManager(); + + // First message that will establish initial cutoff + const initialMessages: UIMessage[] = [ + { + id: '1', + role: 'user', + content: 'A'.repeat(3000), // Create a large message + parts: [{ type: 'text', text: 'A'.repeat(3000) }], + }, + ]; + + // This will set the initial cutoff + const { collapsedMessages: collapsed1 } = chatContextManager.prepareContext( + initialMessages, + maxCollapsedMessagesSize, + collapsedMessagesSize, + ); + expect(collapsed1).toBe(true); + + // Now create a new message with the same size + // This will have a different messageIndex but same partIndex + initialMessages.push({ + id: '2', + role: 'user', + content: 'B'.repeat(3000), // Same size as first message + parts: [{ type: 'text', text: 'B'.repeat(3000) }], + }); + + // This should truncate even though partIndex is equal + const { messages: truncatedMessages, collapsedMessages: collapsed2 } = chatContextManager.prepareContext( + initialMessages, + maxCollapsedMessagesSize, + collapsedMessagesSize, + ); + expect(collapsed2).toBe(true); + // The last message should be kept + expect(truncatedMessages.length).toBe(1); + expect(truncatedMessages[0].id).toBe('2'); + }); + + test('should preserve collapsed messages when last message is not from user', () => { + const maxCollapsedMessagesSize = 2000; + const collapsedMessagesSize = 1000; + const chatContextManager = createManager(); + const messages: UIMessage[] = [ + { + id: '1', + role: 'user', + content: 'Hello', + parts: [{ type: 'text', text: 'Hello' }], + }, + { + id: '2', + role: 'assistant', + content: 'Hi there', + parts: [{ type: 'text', text: 'Hi there' }], + }, + { + id: '3', + role: 'user', + content: 'A'.repeat(3000), // Create a large message + parts: [{ type: 'text', text: 'A'.repeat(3000) }], + }, + ]; + + const { messages: newMessages, collapsedMessages } = chatContextManager.prepareContext( + messages, + maxCollapsedMessagesSize, + collapsedMessagesSize, + ); + expect(newMessages.length).toBe(1); + // The last message is the only one that should be kept + expect(newMessages[0].id).toBe('3'); + expect(collapsedMessages).toBe(true); + // Add another assistant message + messages.push({ + id: '4', + role: 'assistant', + content: 'Hi there', + parts: [{ type: 'text', text: 'Hi there' }], + }); + const { messages: newMessages2, collapsedMessages: collapsedMessages2 } = chatContextManager.prepareContext( + messages, + maxCollapsedMessagesSize, + collapsedMessagesSize, + ); + // The previously collapsed message state should be preserved + expect(newMessages2.length).toEqual(2); + expect(collapsedMessages2).toBe(false); + }); + + test('should collapse messages when size exceeds maxCollapsedMessagesSize', () => { + const maxCollapsedMessagesSize = 2000; + const collapsedMessagesSize = 1000; + const messages: UIMessage[] = [ + { + id: '1', + role: 'user', + content: 'Hello', + parts: [{ type: 'text', text: 'Hello' }], + }, + { + id: '2', + role: 'assistant', + content: 'Hi there', + parts: [{ type: 'text', text: 'Hi there' }], + }, + { + id: '3', + role: 'user', + content: 'A'.repeat(3000), // Create a large message + parts: [{ type: 'text', text: 'A'.repeat(3000) }], + }, + ]; + + const { messages: newMessages, collapsedMessages } = createManager().prepareContext( + messages, + maxCollapsedMessagesSize, + collapsedMessagesSize, + ); + expect(newMessages.length).toBe(1); + // The last message is the only one that should be kept + expect(newMessages[0].id).toBe('3'); + expect(collapsedMessages).toBe(true); + + // Should not collapse with another smaller message + newMessages.push({ + id: '4', + role: 'user', + content: 'B'.repeat(100), + parts: [], + }); + const { messages: newMessages2, collapsedMessages: collapsedMessages2 } = createManager().prepareContext( + newMessages, + maxCollapsedMessagesSize, + collapsedMessagesSize, + ); + expect(newMessages2.length).toEqual(2); + // TODO do we want it to omit the too big message? Probably. But we can fix later. + // expect(collapsedMessages2).toBe(false); + }); + }); +}); diff --git a/codinit-agent/ChatContextManager.ts b/codinit-agent/ChatContextManager.ts new file mode 100644 index 00000000..8b0ca545 --- /dev/null +++ b/codinit-agent/ChatContextManager.ts @@ -0,0 +1,482 @@ +import { type ToolInvocation, type UIMessage } from 'ai'; +import { type AbsolutePath, getAbsolutePath } from './utils/workDir.js'; +import { type Dirent, type EditorDocument, type FileMap } from './types.js'; +import { PREWARM_PATHS, WORK_DIR } from './constants.js'; +import { renderFile } from './utils/renderFile.js'; +import { StreamingMessageParser } from './message-parser.js'; +import { makePartId, type PartId } from './partId.js'; +import { viewParameters } from './tools/view.js'; +import { editToolParameters } from './tools/edit.js'; +import { loggingSafeParse } from './utils/zodUtil.js'; +import { npmInstallToolParameters } from './tools/npmInstall.js'; +import { path } from './utils/path.js'; + +const MAX_RELEVANT_FILES = 16; + +type UIMessagePart = UIMessage['parts'][number]; + +export type PromptCharacterCounts = { + messageHistoryChars: number; + currentTurnChars: number; + totalPromptChars: number; +}; + +type ParsedAssistantMessage = { + filesTouched: Map; +}; + +export class ChatContextManager { + assistantMessageCache: WeakMap = new WeakMap(); + messageSizeCache: WeakMap = new WeakMap(); + partSizeCache: WeakMap = new WeakMap(); + messageIndex: number = -1; + partIndex: number = -1; + + constructor( + private getCurrentDocument: () => EditorDocument | undefined, + private getFiles: () => FileMap, + private getUserWrites: () => Map, + ) { } + + /** + * Reset the context manager state. This should be called when switching + * between subchats to prevent stale message indices from causing errors. + */ + reset(): void { + this.assistantMessageCache = new WeakMap(); + this.messageSizeCache = new WeakMap(); + this.partSizeCache = new WeakMap(); + this.messageIndex = -1; + this.partIndex = -1; + } + + /** + * Our request context has a few sections: + * + * 1. The CodinIT guidelines, which are filled in by the server and + * set to be cached by Anthropic (~15k tokens). + * 2. Some relevant project files, which are filled in from the file + * cache based on LRU, up to maxRelevantFilesSize. + * 3. A potentially collapsed segment of the chat history followed + * by the full fidelity recent chat history, up to maxCollapsedMessagesSize. + */ + prepareContext( + messages: UIMessage[], + maxCollapsedMessagesSize: number, + minCollapsedMessagesSize: number, + ): { messages: UIMessage[]; collapsedMessages: boolean; promptCharacterCounts?: PromptCharacterCounts } { + // If the last message is a user message this is the first LLM call that includes that user message. + // Only update the relevant files and the message cutoff indices if the last message is a user message to avoid clearing the cache as the agent makes changes. + let collapsedMessages = false; + if (messages[messages.length - 1].role === 'user') { + const [messageIndex, partIndex] = this.messagePartCutoff(messages, maxCollapsedMessagesSize); + if (messageIndex == this.messageIndex && partIndex == this.partIndex) { + return { messages, collapsedMessages }; + } + if (messageIndex >= this.messageIndex && partIndex >= this.partIndex) { + // Truncate more than just the `maxCollapsedMessagesSize` limit because we want to get some cache hits before needing to truncate again. + // If we only truncate to the `maxCollapsedMessagesSize` limit, we'll keep truncating on each new message, which means cache misses. + const [newMessageIndex, newPartIndex] = this.messagePartCutoff(messages, minCollapsedMessagesSize); + this.messageIndex = newMessageIndex; + this.partIndex = newPartIndex; + collapsedMessages = true; + } + } + messages = this.collapseMessages(messages); + return { messages, collapsedMessages }; + } + + /** + * Calculate character counts for different parts of the prompt + */ + calculatePromptCharacterCounts(messages: UIMessage[], systemPrompts?: string[]): PromptCharacterCounts { + // Calculate message history character count (excluding current turn) + let messageHistoryChars = 0; + const lastMessage = messages[messages.length - 1]; + const isLastMessageUser = lastMessage?.role === 'user'; + + for (let i = 0; i < messages.length; i++) { + const message = messages[i]; + // Skip the current turn (last message if it's from user) + if (isLastMessageUser && i === messages.length - 1) { + continue; + } + messageHistoryChars += this.messageSize(message); + } + + // Calculate current turn character count + let currentTurnChars = 0; + if (isLastMessageUser) { + currentTurnChars = this.messageSize(lastMessage); + } + + // Calculate system prompts character count (if provided) + let systemPromptsChars = 0; + if (systemPrompts) { + systemPromptsChars = systemPrompts.reduce((sum, prompt) => sum + prompt.length, 0); + } + + const totalPromptChars = messageHistoryChars + currentTurnChars + systemPromptsChars; + + return { + messageHistoryChars, + currentTurnChars, + totalPromptChars, + }; + } + + private messageSize(message: UIMessage): number { + const cached = this.messageSizeCache.get(message); + if (cached !== undefined) { + return cached; + } + + let size = message.content.length; + for (const part of message.parts) { + size += this.partSize(part); + } + + this.messageSizeCache.set(message, size); + return size; + } + + relevantFiles(messages: UIMessage[], id: string, maxRelevantFilesSize: number): UIMessage { + const currentDocument = this.getCurrentDocument(); + const cache = this.getFiles(); + const allPaths = Object.keys(cache).sort(); + + const lastUsed: Map = new Map(); + for (const path of PREWARM_PATHS) { + const absPath = path as AbsolutePath; + const entry = cache[absPath]; + if (!entry) { + continue; + } + lastUsed.set(absPath, 0); + } + + let partCounter = 0; + for (const message of messages) { + const createdAt = message.createdAt?.getTime(); + const parsed = this.parsedAssistantMessage(message); + if (!parsed) { + continue; + } + for (const [absPath, partIndex] of parsed.filesTouched.entries()) { + const entry = cache[absPath]; + if (!entry || entry.type !== 'file') { + continue; + } + const lastUsedTime = (createdAt ?? partCounter) + partIndex; + lastUsed.set(absPath, lastUsedTime); + } + partCounter += message.parts.length; + } + + for (const [path, lastUsedTime] of this.getUserWrites().entries()) { + const existing = lastUsed.get(path) ?? 0; + lastUsed.set(path, Math.max(existing, lastUsedTime)); + } + + if (currentDocument) { + lastUsed.delete(currentDocument.filePath); + } + + const sortedByLastUsed = Array.from(lastUsed.entries()).sort((a, b) => b[1] - a[1]); + let sizeEstimate = 0; + const fileActions: string[] = []; + let numFiles = 0; + + for (const [path] of sortedByLastUsed) { + if (sizeEstimate > maxRelevantFilesSize) { + break; + } + if (numFiles >= MAX_RELEVANT_FILES) { + break; + } + const entry = cache[path]; + if (!entry) { + continue; + } + if (entry.type === 'file') { + const content = renderFile(entry.content); + fileActions.push(`${content}`); + const size = estimateSize(entry); + sizeEstimate += size; + numFiles++; + } + } + + if (currentDocument) { + const content = renderFile(currentDocument.value); + fileActions.push(`${content}`); + } + + // Compose a single message with all relevant files + if (allPaths.length > 0) { + fileActions.push(`Here are all the paths in the project:\n${allPaths.map((p) => ` - ${p}`).join('\n')}\n\n`); + } + if (fileActions.length === 0) { + return { + id, + content: '', + role: 'user', + parts: [], + }; + } + return makeUserMessage(fileActions, id); + } + + private collapseMessages(messages: UIMessage[]): UIMessage[] { + const fullMessages = []; + for (let i = 0; i < messages.length; i++) { + const message = messages[i]; + if (i < this.messageIndex) { + continue; + } else if (i === this.messageIndex) { + const filteredParts = message.parts.filter((p, j) => { + if (p.type !== 'tool-invocation' || p.toolInvocation.state !== 'result') { + return true; + } + return j > this.partIndex; + }); + const remainingMessage = { + ...message, + content: StreamingMessageParser.stripArtifacts(message.content), + parts: filteredParts, + }; + fullMessages.push(remainingMessage); + } else { + fullMessages.push(message); + } + } + const result: UIMessage[] = []; + result.push(...fullMessages); + return result; + } + + shouldSendRelevantFiles(messages: UIMessage[], maxCollapsedMessagesSize: number): boolean { + // Always send files on the first message + if (messages.length === 0) { + return true; + } + + // Check if we are going to collapse messages, if so, send new files + const [messageIndex, partIndex] = this.messagePartCutoff(messages, maxCollapsedMessagesSize); + if (messageIndex != this.messageIndex || partIndex != this.partIndex) { + return true; + } + + // Check if any previous messages contain file artifacts with non-empty content + for (const message of messages) { + if (message.role === 'user') { + for (const part of message.parts) { + if (part.type === 'text' && part.text.includes('title="Relevant Files"')) { + // Check if there's actual content between the codinitAction tags + // We used to strip out the file content when serializing messages to store in CodinIT + const hasContent = + part.text.includes(']*><\/codinitAction>/); + if (hasContent) { + // Only return false if we found a message with actual file content + return false; + } + } + } + } + } + return true; + } + + private messagePartCutoff(messages: UIMessage[], maxCollapsedMessagesSize: number): [number, number] { + let remaining = maxCollapsedMessagesSize; + for (let messageIndex = messages.length - 1; messageIndex >= 0; messageIndex--) { + const message = messages[messageIndex]; + for (let partIndex = message.parts.length - 1; partIndex >= 0; partIndex--) { + const part = message.parts[partIndex]; + if (part.type === 'tool-invocation' && part.toolInvocation.state !== 'result') { + continue; + } + const size = this.partSize(part); + if (size > remaining) { + return [messageIndex, partIndex]; + } + remaining -= size; + } + } + return [-1, -1]; + } + + private parsedAssistantMessage(message: UIMessage): ParsedAssistantMessage | null { + if (message.role !== 'assistant') { + return null; + } + const cached = this.assistantMessageCache.get(message); + if (cached) { + return cached; + } + + const filesTouched = new Map(); + for (const file of extractFileArtifacts(makePartId(message.id, 0), message.content)) { + filesTouched.set(getAbsolutePath(file), 0); + } + for (let j = 0; j < message.parts.length; j++) { + const part = message.parts[j]; + if (part.type === 'text') { + const files = extractFileArtifacts(makePartId(message.id, j), part.text); + for (const file of files) { + filesTouched.set(getAbsolutePath(file), j); + } + } + if ( + part.type == 'tool-invocation' && + part.toolInvocation.toolName == 'view' && + part.toolInvocation.state !== 'partial-call' + ) { + const args = loggingSafeParse(viewParameters, part.toolInvocation.args); + if (args.success) { + filesTouched.set(getAbsolutePath(args.data.path), j); + } + } + if ( + part.type == 'tool-invocation' && + part.toolInvocation.toolName == 'edit' && + part.toolInvocation.state !== 'partial-call' + ) { + const args = loggingSafeParse(editToolParameters, part.toolInvocation.args); + if (args.success) { + filesTouched.set(getAbsolutePath(args.data.path), j); + } + } + } + const result = { + filesTouched, + }; + this.assistantMessageCache.set(message, result); + return result; + } + + private partSize(part: UIMessagePart) { + const cached = this.partSizeCache.get(part); + if (cached) { + return cached; + } + let result = 0; + switch (part.type) { + case 'text': + result = part.text.length; + break; + case 'file': + result += part.data.length; + result += part.mimeType.length; + break; + case 'reasoning': + result += part.reasoning.length; + break; + case 'tool-invocation': + result += JSON.stringify(part.toolInvocation.args).length; + if (part.toolInvocation.state === 'result') { + result += JSON.stringify(part.toolInvocation.result).length; + } + break; + case 'source': + result += (part.source.title ?? '').length; + result += part.source.url.length; + break; + case 'step-start': + break; + default: + throw new Error(`Unknown part type: ${JSON.stringify(part)}`); + } + this.partSizeCache.set(part, result); + return result; + } +} + +function makeUserMessage(content: string[], id: string): UIMessage { + const parts: UIMessagePart[] = content.map((c) => ({ + type: 'text', + // N.B. Do not change this title "Relevant Files" without also updating `extractUrlHintAndDescription`. It's super jank + text: ` +${c} +`, + })); + return { + id, + content: '', + role: 'user', + parts, + }; +} + +function estimateSize(entry: Dirent): number { + if (entry.type === 'file') { + return 4 + entry.content.length; + } else { + return 6; + } +} + +function abbreviateToolInvocation(toolInvocation: ToolInvocation): string { + if (toolInvocation.state !== 'result') { + throw new Error(`Invalid tool invocation state: ${toolInvocation.state}`); + } + const wasError = toolInvocation.result.startsWith('Error:'); + let toolCall: string; + switch (toolInvocation.toolName) { + case 'view': { + const args = loggingSafeParse(viewParameters, toolInvocation.args); + let verb = 'viewed'; + if (toolInvocation.result.startsWith('Directory:')) { + verb = 'listed'; + } + toolCall = `${verb} ${args?.data?.path || 'unknown file'}`; + break; + } + case 'deploy': { + toolCall = `deployed the app`; + break; + } + case 'npmInstall': { + const args = loggingSafeParse(npmInstallToolParameters, toolInvocation.args); + if (args.success) { + toolCall = `installed the dependencies ${args.data.packages}`; + } else { + toolCall = `attempted to install dependencies`; + } + break; + } + case 'edit': { + const args = loggingSafeParse(editToolParameters, toolInvocation.args); + if (args.success) { + toolCall = `edited the file ${args.data.path}`; + } else { + toolCall = `attempted to edit a file`; + } + break; + } + case 'getCodinitDeploymentName': { + toolCall = `retrieved the CodinIT deployment name`; + break; + } + default: + throw new Error(`Unknown tool name: ${toolInvocation.toolName}`); + } + return `The assistant ${toolCall} ${wasError ? 'and got an error' : 'successfully'}.`; +} + +function extractFileArtifacts(partId: PartId, content: string) { + const filesTouched: Set = new Set(); + const parser = new StreamingMessageParser({ + callbacks: { + onActionClose: (data) => { + if (data.action.type === 'file') { + const relPath = data.action.filePath; + const absPath = path.join(WORK_DIR, relPath); + filesTouched.add(absPath); + } + }, + }, + }); + parser.parse(partId, content); + return Array.from(filesTouched); +} diff --git a/codinit-agent/__snapshots__/message-parser.spec.ts.snap b/codinit-agent/__snapshots__/message-parser.spec.ts.snap new file mode 100644 index 00000000..8766d7cc --- /dev/null +++ b/codinit-agent/__snapshots__/message-parser.spec.ts.snap @@ -0,0 +1,238 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (0) > onActionClose 1`] = ` +{ + "action": { + "content": "npm install", + "type": "shell", + }, + "actionId": "0", + "artifactId": "artifact_1", + "partId": "message_1-0", +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (0) > onActionOpen 1`] = ` +{ + "action": { + "content": "", + "type": "shell", + }, + "actionId": "0", + "artifactId": "artifact_1", + "partId": "message_1-0", +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (0) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (0) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (1) > onActionClose 1`] = ` +{ + "action": { + "content": "npm install", + "type": "shell", + }, + "actionId": "0", + "artifactId": "artifact_1", + "partId": "message_1-0", +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (1) > onActionClose 2`] = ` +{ + "action": { + "content": "some content +", + "filePath": "index.js", + "type": "file", + }, + "actionId": "1", + "artifactId": "artifact_1", + "partId": "message_1-0", +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (1) > onActionOpen 1`] = ` +{ + "action": { + "content": "", + "type": "shell", + }, + "actionId": "0", + "artifactId": "artifact_1", + "partId": "message_1-0", +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (1) > onActionOpen 2`] = ` +{ + "action": { + "content": "", + "filePath": "index.js", + "type": "file", + }, + "actionId": "1", + "artifactId": "artifact_1", + "partId": "message_1-0", +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (1) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts with actions > should correctly parse chunks and strip out codinit artifacts (1) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (0) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (0) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (1) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": "bundled", +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (1) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": "bundled", +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (2) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (2) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (3) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (3) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (4) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (4) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (5) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (5) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (6) > onArtifactClose 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; + +exports[`StreamingMessageParser > valid artifacts without actions > should correctly parse chunks and strip out codinit artifacts (6) > onArtifactOpen 1`] = ` +{ + "id": "artifact_1", + "partId": "message_1-0", + "title": "Some title", + "type": undefined, +} +`; diff --git a/codinit-agent/cleanupAssistantMessages.ts b/codinit-agent/cleanupAssistantMessages.ts new file mode 100644 index 00000000..398ddcbf --- /dev/null +++ b/codinit-agent/cleanupAssistantMessages.ts @@ -0,0 +1,42 @@ +import { convertToCoreMessages } from 'ai'; +import type { Message } from 'ai'; +import { EXCLUDED_FILE_PATHS } from './constants.js'; + +export function cleanupAssistantMessages(messages: Message[]) { + let processedMessages = messages.map((message) => { + if (message.role == 'assistant') { + let content = cleanMessage(message.content); + let parts = message.parts?.map((part) => { + if (part.type === 'text') { + part.text = cleanMessage(part.text); + } + return part; + }); + return { ...message, content, parts }; + } else { + return message; + } + }); + // Filter out empty messages and messages with empty parts + processedMessages = processedMessages.filter( + (message) => + message.content.trim() !== '' || + (message.parts && + message.parts.filter((part) => part.type === 'text' || part.type === 'tool-invocation').length > 0), + ); + return convertToCoreMessages(processedMessages).filter((message) => message.content.length > 0); +} + +function cleanMessage(message: string) { + message = message.replace(/
.*?<\/div>/s, ''); + message = message.replace(/.*?<\/think>/s, ''); + // We prevent the LLM from modifying a list of files + for (const excludedPath of EXCLUDED_FILE_PATHS) { + const escapedPath = excludedPath.replace(/\//g, '\\/'); + message = message.replace( + new RegExp(`]*>[\\s\\S]*?<\\/codinitAction>`, 'g'), + `You tried to modify \`${excludedPath}\` but this is not allowed. Please modify a different file.`, + ); + } + return message; +} diff --git a/codinit-agent/codinitAuth.ts b/codinit-agent/codinitAuth.ts new file mode 100644 index 00000000..448386d6 --- /dev/null +++ b/codinit-agent/codinitAuth.ts @@ -0,0 +1,43 @@ +import { generateKeyPair, exportPKCS8, exportJWK } from 'jose'; +import type { CodinitProject } from './types.js'; +import { queryEnvVariableWithRetries, setEnvVariablesWithRetries } from './codinitEnvVariables.js'; +import { logger } from './utils/logger.js'; + +export async function initializeCodinitAuth(project: CodinitProject) { + const SITE_URL = await queryEnvVariableWithRetries(project, 'SITE_URL'); + const JWKS = await queryEnvVariableWithRetries(project, 'JWKS'); + const JWT_PRIVATE_KEY = await queryEnvVariableWithRetries(project, 'JWT_PRIVATE_KEY'); + + const newEnv: Record = {}; + + if (SITE_URL && SITE_URL !== 'http://127.0.0.1:5173') { + console.warn('SITE_URL is not http://127.0.0.1:5173'); + } + if (!SITE_URL) { + newEnv.SITE_URL = 'http://127.0.0.1:5173'; + } + + if (!JWKS || !JWT_PRIVATE_KEY) { + const keys = await generateKeys(); + newEnv.JWKS = JSON.stringify(keys.JWKS); + newEnv.JWT_PRIVATE_KEY = keys.JWT_PRIVATE_KEY; + } + if (!SITE_URL) { + newEnv.SITE_URL = 'http://127.0.0.1:5173'; + } + if (Object.entries(newEnv).length > 0) { + await setEnvVariablesWithRetries(project, newEnv); + } + logger.info('✅ CodinIT Auth setup!'); +} + +async function generateKeys() { + const keys = await generateKeyPair('RS256', { extractable: true }); + const privateKey = await exportPKCS8(keys.privateKey); + const publicKey = await exportJWK(keys.publicKey); + const jwks = { keys: [{ use: 'sig', ...publicKey }] }; + return { + JWT_PRIVATE_KEY: `${privateKey.trimEnd().replace(/\n/g, ' ')}`, + JWKS: jwks, + }; +} diff --git a/codinit-agent/codinitEnvVariables.ts b/codinit-agent/codinitEnvVariables.ts new file mode 100644 index 00000000..f53d3acb --- /dev/null +++ b/codinit-agent/codinitEnvVariables.ts @@ -0,0 +1,65 @@ +import type { CodinitProject } from './types.js'; + +async function withRetries(operation: () => Promise, maxRetries: number = 3, retryDelay: number = 500) { + for (let i = 0; i < maxRetries; i++) { + try { + return await operation(); + } catch (error) { + if (i === maxRetries - 1) { + throw error; + } + await new Promise((resolve) => setTimeout(resolve, retryDelay)); + } + } +} + +export async function queryEnvVariableWithRetries(project: CodinitProject, name: string) { + return withRetries(() => queryEnvVariable(project, name)); +} + +async function queryEnvVariable(project: CodinitProject, name: string): Promise { + const response = await fetch(`${project.deploymentUrl}/api/query`, { + method: 'POST', + body: JSON.stringify({ + path: '_system/cli/queryEnvironmentVariables:get', + format: 'codinit_encoded_json', + args: [{ name }], + }), + headers: { + 'Content-Type': 'application/json', + Authorization: `CodinIT ${project.token}`, + }, + }); + if (!response.ok) { + throw new Error('Failed to query environment variables'); + } + const respJSON: any = await response.json(); + if (respJSON.status !== 'success') { + throw new Error(`Failed to query environment variables: ${JSON.stringify(respJSON)}`); + } + const udfResult = respJSON.value; + return udfResult && udfResult.value; +} + +export async function setEnvVariablesWithRetries(project: CodinitProject, values: Record) { + return withRetries(() => setEnvVariables(project, values)); +} + +async function setEnvVariables(project: CodinitProject, values: Record) { + const response = await fetch(`${project.deploymentUrl}/api/update_environment_variables`, { + method: 'POST', + body: JSON.stringify({ + changes: Object.entries(values).map(([name, value]) => ({ + name, + value, + })), + }), + headers: { + 'Content-Type': 'application/json', + Authorization: `CodinIT ${project.token}`, + }, + }); + if (!response.ok) { + throw new Error(`Failed to set environment variables: ${await response.text()}`); + } +} diff --git a/codinit-agent/constants.ts b/codinit-agent/constants.ts new file mode 100644 index 00000000..557fa429 --- /dev/null +++ b/codinit-agent/constants.ts @@ -0,0 +1,73 @@ +export const SUGGESTIONS = [ + { + title: 'Slack clone', + prompt: `Build an app similar to Slack with the following features: + +- Has a channels panel on the left with a button to create new channels +- Has a message pane on the right and a message posting box at the bottom +- Each message has a name and avatar next to it for the author +- Has an "edit profile" tab for uploading a profile photo to CodinIT storage and changing your name +- Only the messages are scrollable, with message box and channel selector fixed like the header +- Automatically scrolls to the bottom when new messages are sent +- Includes a search bar at the top that queries all messages`, + }, + { + title: 'Instagram clone', + prompt: `Build an app similar to Instagram with a global shared image stream that has these features: + +- Has a drag and drop box for uploading images to CodinIT storage +- Has a "Stream" tab for viewing the global image stream +- Has a "My Photos" tab for viewing and deleting your own images +- Allows liking images in the "Stream" tab +- Shows like count for each image`, + }, + { + title: 'Splitwise clone', + prompt: `Build a group shared expenses app that has the following features: + +- Has users, groups, expenses, payments, and reimbursements +- Represents members in a group via a table rather than an array +- Users can create groups and invite other users to join +- Group members can add expenses to a group, which get shared among all members in the group +- Shows a list of members in the group and a list of expenses along with who paid them +- Shows how much every member has been paid and reimbursed +- Each member should be able to record a payment to another member, which adds to how much they have paid and adds to how much the recipient has been reimbursed +- Members should record payments so that every member in the group has the same net balance`, + }, + { + title: 'Notion clone', + prompt: `Make a collaborative text editor like Notion with these features: +- Real-time collaboration where multiple users can edit the same document +- Presence functionality for each document with a facepile +- Document Organization: +- Private documents (only visible to the creator) +- Public documents (visible to all users) +- Simple sidebar navigation between documents +- Full text search over document titles +- Interface: +- Clean, minimal design with lots of white space and a neutral color palette (soft grays and whites) +- Focus on readable text and minimal distractions`, + }, +]; + +export const WORK_DIR_NAME = 'project'; +export const WORK_DIR = `/home/${WORK_DIR_NAME}`; + +export const PREWARM_PATHS = [ + `${WORK_DIR}/package.json`, + `${WORK_DIR}/codinit/schema.ts`, + `${WORK_DIR}/src/App.tsx`, + `${WORK_DIR}/src/index.css`, + `${WORK_DIR}/src/tailwind.config.js`, +]; + +// A list of files that we block the LLM from modifying +export const EXCLUDED_FILE_PATHS = [ + 'codinit/auth.ts', + 'codinit/http.ts', + 'src/main.tsx', + 'src/SignInForm.tsx', + 'src/SignOutButton.tsx', + 'vite.config.ts', + 'package.json', +]; diff --git a/app/lib/runtime/message-parser.spec.ts b/codinit-agent/message-parser.spec.ts similarity index 86% rename from app/lib/runtime/message-parser.spec.ts rename to codinit-agent/message-parser.spec.ts index 91bec1b8..0371094e 100644 --- a/app/lib/runtime/message-parser.spec.ts +++ b/codinit-agent/message-parser.spec.ts @@ -1,5 +1,6 @@ -import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'; -import { StreamingMessageParser, type ActionCallback, type ArtifactCallback } from './message-parser'; +import { describe, expect, it, vi } from 'vitest'; +import { StreamingMessageParser, type ActionCallback, type ArtifactCallback } from './message-parser.js'; +import { makePartId } from './partId.js'; interface ExpectedResult { output: string; @@ -12,24 +13,16 @@ interface ExpectedResult { } describe('StreamingMessageParser', () => { - beforeEach(() => { - vi.spyOn(console, 'log').mockImplementation(vi.fn()); - vi.spyOn(console, 'error').mockImplementation(vi.fn()); - vi.spyOn(console, 'warn').mockImplementation(vi.fn()); - }); - - afterEach(() => { - vi.restoreAllMocks(); - }); - it('should pass through normal text', () => { const parser = new StreamingMessageParser(); - expect(parser.parse('test_id', 'Hello, world!')).toBe('Hello, world!'); + expect(parser.parse(makePartId('test_id', 0), 'Hello, world!')).toBe('Hello, world!'); }); it('should allow normal HTML tags', () => { const parser = new StreamingMessageParser(); - expect(parser.parse('test_id', 'Hello world!')).toBe('Hello world!'); + expect(parser.parse(makePartId('test_id', 0), 'Hello world!')).toBe( + 'Hello world!', + ); }); describe('no artifacts', () => { @@ -46,10 +39,10 @@ describe('StreamingMessageParser', () => { describe('invalid or incomplete artifacts', () => { it.each<[string | string[], ExpectedResult | string]>([ ['Foo bar ', 'Foo bar '], ['Before foo After', 'Before foo After'], @@ -82,9 +75,8 @@ describe('StreamingMessageParser', () => { [ [ 'Some text before ', 'foo Some more text', ], @@ -197,17 +189,9 @@ function runTest(input: string | string[], outputOrExpectedResult: string | Expe callbacks, }); - let message = ''; - - let result = ''; - - const chunks = Array.isArray(input) ? input : input.split(''); + const fullMessage = Array.isArray(input) ? input.join('') : input; - for (const chunk of chunks) { - message += chunk; - - result += parser.parse('message_1', message); - } + const result = parser.parse(makePartId('message_1', 0), fullMessage); for (const name in expected.callbacks) { const callbackName = name; diff --git a/codinit-agent/message-parser.ts b/codinit-agent/message-parser.ts new file mode 100644 index 00000000..5c8f84d6 --- /dev/null +++ b/codinit-agent/message-parser.ts @@ -0,0 +1,370 @@ +import type { PartId } from './partId.js'; +import type { CodinitAction, CodinitArtifactData, ActionType, FileAction } from './types.js'; +import { createScopedLogger } from './utils/logger.js'; +import { getRelativePath } from './utils/workDir.js'; +import { unreachable } from './utils/unreachable.js'; + +const ARTIFACT_TAG_OPEN_CODINIT = ' void; +export type ActionCallback = (data: ActionCallbackData) => void; + +interface ParserCallbacks { + onArtifactOpen?: ArtifactCallback; + onArtifactClose?: ArtifactCallback; + onActionOpen?: ActionCallback; + onActionStream?: ActionCallback; + onActionClose?: ActionCallback; +} + +interface ElementFactoryProps { + partId: PartId; +} + +type ElementFactory = (props: ElementFactoryProps) => string; + +interface StreamingMessageParserOptions { + callbacks?: ParserCallbacks; + artifactElement?: ElementFactory; +} + +interface MessageState { + position: number; + insideArtifact: boolean; + insideAction: boolean; + currentArtifact?: CodinitArtifactData; + currentAction: CodinitAction | null; + actionId: number; + hasCreatedArtifact: boolean; + artifactTagName?: string; // 'codinitArtifact' +} + +export class StreamingMessageParser { + #messages = new Map(); + + constructor(private _options: StreamingMessageParserOptions = {}) { } + + static stripArtifacts(content: string): string { + // Strip codinit artifacts + let result = content; + result = result.replace(/]*>[\s\S]*?<\/codinitArtifact>/g, ''); + return result; + } + + parse(partId: PartId, input: string) { + let state = this.#messages.get(partId); + + if (!state) { + state = { + position: 0, + insideAction: false, + insideArtifact: false, + currentAction: null, + actionId: 0, + hasCreatedArtifact: false, + }; + + this.#messages.set(partId, state); + } + + let output = ''; + let i = state.position; + let earlyBreak = false; + + while (i < input.length) { + if (state.insideArtifact) { + const currentArtifact = state.currentArtifact; + + if (currentArtifact === undefined) { + unreachable('Artifact not initialized'); + } + + const closeTag = ARTIFACT_TAG_CLOSE_CODINIT; + const actionOpenTag = ARTIFACT_ACTION_TAG_OPEN_CODINIT; + const actionCloseTag = ARTIFACT_ACTION_TAG_CLOSE_CODINIT; + + if (state.insideAction) { + if (!state.currentAction) { + unreachable('Action not initialized'); + } + + const closeIndex = input.indexOf(actionCloseTag, i); + + const currentAction = state.currentAction; + + if (closeIndex !== -1) { + const actionContent = input.slice(i, closeIndex); + + let content = actionContent.trim(); + + if (currentAction && currentAction.type === 'file') { + // Remove markdown code block syntax if present and file is not markdown + if (!currentAction.filePath.endsWith('.md')) { + content = cleanoutMarkdownSyntax(content); + content = cleanEscapedTags(content); + } + + content += '\n'; + } + + currentAction.content = content; + + this._options.callbacks?.onActionClose?.({ + artifactId: currentArtifact.id, + partId, + actionId: String(state.actionId - 1), + action: currentAction as CodinitAction, + }); + + state.insideAction = false; + state.currentAction = null; + + i = closeIndex + actionCloseTag.length; + } else { + if (currentAction && currentAction.type === 'file') { + let content = input.slice(i); + + if (!currentAction.filePath.endsWith('.md')) { + content = cleanoutMarkdownSyntax(content); + content = cleanEscapedTags(content); + } + + this._options.callbacks?.onActionStream?.({ + artifactId: currentArtifact.id, + partId, + actionId: String(state.actionId - 1), + action: { + ...(currentAction as FileAction), + content, + filePath: currentAction.filePath, + }, + }); + } + + break; + } + } else { + const actionOpenIndex = input.indexOf(actionOpenTag, i); + const artifactCloseIndex = input.indexOf(closeTag, i); + + if (actionOpenIndex !== -1 && (artifactCloseIndex === -1 || actionOpenIndex < artifactCloseIndex)) { + const actionEndIndex = input.indexOf('>', actionOpenIndex); + + if (actionEndIndex !== -1) { + state.insideAction = true; + + state.currentAction = this.#parseActionTag(input, actionOpenIndex, actionEndIndex); + + this._options.callbacks?.onActionOpen?.({ + artifactId: currentArtifact.id, + partId, + actionId: String(state.actionId++), + action: state.currentAction as CodinitAction, + }); + + i = actionEndIndex + 1; + } else { + break; + } + } else if (artifactCloseIndex !== -1) { + this._options.callbacks?.onArtifactClose?.({ partId, ...currentArtifact }); + + state.insideArtifact = false; + state.currentArtifact = undefined; + state.artifactTagName = undefined; + + i = artifactCloseIndex + closeTag.length; + } else { + break; + } + } + } else if (input[i] === '<' && input[i + 1] !== '/') { + let j = i; + let potentialTag = ''; + let processed = false; + + while (j < input.length) { + potentialTag += input[j]; + + // Check if it matches any tag exactly + const matchedTag = ARTIFACT_TAGS_OPEN.find(t => t === potentialTag); + + if (matchedTag) { + const nextChar = input[j + 1]; + + if (nextChar && nextChar !== '>' && nextChar !== ' ') { + output += input.slice(i, j + 1); + i = j + 1; + processed = true; + break; + } + + const openTagEnd = input.indexOf('>', j); + + if (openTagEnd !== -1) { + const artifactTag = input.slice(i, openTagEnd + 1); + + const artifactTitle = this.#extractAttribute(artifactTag, 'title') as string; + const type = this.#extractAttribute(artifactTag, 'type') as string; + const artifactId = this.#extractAttribute(artifactTag, 'id') as string; + + if (!artifactTitle) { + logger.warn('Artifact title missing'); + } + + if (!artifactId) { + logger.warn('Artifact id missing'); + } + + state.insideArtifact = true; + state.artifactTagName = 'codinitArtifact'; + + const currentArtifact = { + id: artifactId, + title: artifactTitle, + type, + } satisfies CodinitArtifactData; + + state.currentArtifact = currentArtifact; + + this._options.callbacks?.onArtifactOpen?.({ partId, ...currentArtifact }); + + if (!state.hasCreatedArtifact) { + const artifactFactory = this._options.artifactElement ?? createArtifactElement; + output += artifactFactory({ partId }); + state.hasCreatedArtifact = true; + } + + i = openTagEnd + 1; + processed = true; + } else { + earlyBreak = true; + } + + break; + } else if (!ARTIFACT_TAGS_OPEN.some(t => t.startsWith(potentialTag))) { + // Not a prefix of ANY tag + output += input.slice(i, j + 1); + i = j + 1; + processed = true; + break; + } + + j++; + } + + if (processed) { + if (earlyBreak) { + break; + } + continue; + } else { + // Partial match at end of input - check if it's a potential artifact tag + const isPartialArtifactTag = ARTIFACT_TAGS_OPEN.some(t => t.startsWith(potentialTag)); + if (isPartialArtifactTag) { + // Strip partial artifact tags at end of input - don't add to output + i = input.length; // Skip to end + } else { + // Not an artifact tag, include it in output + output += input.slice(i); + i = input.length; + } + break; + } + } else { + output += input[i]; + i++; + } + + if (earlyBreak) { + break; + } + } + + state.position = i; + + return output; + } + + reset() { + this.#messages.clear(); + } + + #parseActionTag(input: string, actionOpenIndex: number, actionEndIndex: number) { + const actionTag = input.slice(actionOpenIndex, actionEndIndex + 1); + + const actionType = this.#extractAttribute(actionTag, 'type') as ActionType; + + const actionAttributes = { + type: actionType, + content: '', + }; + + if (actionType === 'file') { + const filePath = this.#extractAttribute(actionTag, 'filePath') as string; + + if (!filePath) { + logger.debug('File path not specified'); + } + + (actionAttributes as FileAction).filePath = getRelativePath(filePath); + } else { + logger.warn(`Unknown action type '${actionType}'`); + } + + return actionAttributes as FileAction; + } + + #extractAttribute(tag: string, attributeName: string): string | undefined { + const match = tag.match(new RegExp(`${attributeName}="([^"]*)"`, 'i')); + return match ? match[1] : undefined; + } +} + +const createArtifactElement: ElementFactory = (props) => { + const elementProps = [ + 'class="__codinitArtifact__"', + ...Object.entries(props).map(([key, value]) => { + return `data-${camelToDashCase(key)}=${JSON.stringify(value)}`; + }), + ]; + + return `
`; +}; + +function camelToDashCase(input: string) { + return input.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); +} + +function cleanoutMarkdownSyntax(content: string) { + const codeBlockRegex = /^\s*```\w*\n([\s\S]*?)\n\s*```\s*$/; + const match = content.match(codeBlockRegex); + + if (match) { + return match[1]; // Remove common leading 4-space indent + } else { + return content; + } +} + +function cleanEscapedTags(content: string) { + return content.replace(/</g, '<').replace(/>/g, '>'); +} \ No newline at end of file diff --git a/codinit-agent/package.json b/codinit-agent/package.json new file mode 100644 index 00000000..8637cd28 --- /dev/null +++ b/codinit-agent/package.json @@ -0,0 +1,23 @@ +{ + "name": "codinit-agent", + "version": "0.1.0", + "type": "module", + "scripts": { + "test": "vitest run", + "test:watch": "vitest", + "typecheck": "tsc" + }, + "dependencies": { + "ai": "^4.3.2", + "jose": "^5.9.6", + "path-browserify": "^1.0.1", + "typescript": "^5.4.2", + "zod": "^3.24.1" + }, + "devDependencies": { + "@types/node": "^20.17.30", + "@types/path-browserify": "^1.0.3", + "vitest": "^2.1.9" + }, + "packageManager": "pnpm@9.5.0" +} \ No newline at end of file diff --git a/codinit-agent/partId.ts b/codinit-agent/partId.ts new file mode 100644 index 00000000..18b72820 --- /dev/null +++ b/codinit-agent/partId.ts @@ -0,0 +1,16 @@ +export type MessageId = string & { __isMessageId: true }; + +export type PartId = `${MessageId}-${number}`; + +export function makePartId(messageId: string, index: number): PartId { + return `${messageId as MessageId}-${index}`; +} + +export function makeMessageId(id: string): MessageId { + return id as MessageId; +} + +export function parsePartId(partId: PartId): { messageId: MessageId; index: number } { + const [messageId, index] = partId.split('-'); + return { messageId: makeMessageId(messageId), index: parseInt(index) }; +} diff --git a/codinit-agent/prompts/codinitGuidelines.ts b/codinit-agent/prompts/codinitGuidelines.ts new file mode 100644 index 00000000..37a6cfba --- /dev/null +++ b/codinit-agent/prompts/codinitGuidelines.ts @@ -0,0 +1,957 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; + +export function codinitGuidelines(options: SystemPromptOptions) { + return stripIndents`# CodinIT guidelines + +## Function guidelines + +### New function syntax + +- ALWAYS use the new function syntax for CodinIT functions. For example: + +\`\`\`ts +import { query } from "./_generated/server"; +import { v } from "codinit/values"; +export const f = query({ + args: {}, + handler: async (ctx, args) => { + // Function body + }, +}); +\` + +### Http endpoint syntax + +- HTTP endpoints are defined in \`codinit/http.ts\` and require an \`httpAction\` decorator. For example: + +\`\`\`ts +import { httpRouter } from "codinit/server"; +import { httpAction } from "./_generated/server"; +const http = httpRouter(); +http.route({ + path: "/echo", + method: "POST", + handler: httpAction(async (ctx, req) => { + const body = await req.bytes(); + return new Response(body, { status: 200 }); + }), +}); +\`\`\` + +- HTTP endpoints are always registered at the exact path you specify in the \`path\` field. For example, +if you specify \`/api/someRoute\`, the endpoint will be registered at \`/api/someRoute\`. + +### Validators + +- Here are the valid CodinIT types along with their respective validators: + CodinIT Type | TS/JS type | Example Usage | Validator for argument validation and schemas | Notes + | +| ----------- | ------------| -----------------------| -----------------------------------------------| ------------------------------------------------------------------------------------------------------------------------ +------------------------------------------------------------------------------| +| Id | string | \`doc._id\` | \`v.id(tableName)\` | + | +| Null | null | \`null\` | \`v.null()\` | JavaScript's \`undefined\` is not a valid CodinIT value. Functions the return \`undefined\` or do not return will return \`null\` when called from a client. Use \`null\` instead. | +| Int64 | bigint | \`3n\` | \`v.int64()\` | Int64s only support BigInts between -2^63 and 2^63-1. CodinIT supports \`bigint\`s in most modern browsers. + | +| Float64 | number | \`3.1\` | \`v.number()\` | CodinIT supports all IEEE-754 double-precision floating point numbers (such as NaNs). Inf and NaN are JSON serialized as +strings. | +| Boolean | boolean | \`true\` | \`v.boolean()\` | +| String | string | \`"abc"\` | \`v.string()\` | Strings are stored as UTF-8 and must be valid Unicode sequences. Strings must be smaller than the 1MB total size limit w +hen encoded as UTF-8. | +| Bytes | ArrayBuffer | \`new ArrayBuffer(8)\` | \`v.bytes()\` | CodinIT supports first class bytestrings, passed in as \`ArrayBuffer\`s. Bytestrings must be smaller than the 1MB total siz +e limit for CodinIT types. | +| Array | Array] | \`[1, 3.2, "abc"]\` | \`v.array(values)\` | Arrays can have at most 8192 values. + | +| Object | Object | \`{a: "abc"}\` | \`v.object({property: value})\` | CodinIT only supports "plain old JavaScript objects" (objects that do not have a custom prototype). Objects can have at most 1024 entries. Field names must be ASCII characters, nonempty, and not start with "$" or "_". | +| Record | Record | \`{"a": "1", "b": "2"}\` | \`v.record(keys, values)\` | Records are objects at runtime, but can have dynamic keys. Keys must be only ASCII characters, nonempty, and not start with "$" or "_". + +- \`v.object()\`, \`v.array()\`, \`v.boolean()\`, \`v.number()\`, \`v.string()\`, \`v.id()\`, and \`v.null()\` are the most common + validators you'll need. Do NOT use any other validators. In particular, \`v.map()\` and \`v.set()\` are not supported. + +- Below is an example of an array validator: + +\`\`\`ts +import { mutation } from "./_generated/server"; +import { v } from "codinit/values"; + +export default mutation({ + args: { + simpleArray: v.array(v.union(v.string(), v.number())), + }, + handler: async (ctx, args) => { + //... + }, +}); +\`\`\` + +- Below is an example of a schema with validators that codify a discriminated union type: +\`\`\`ts +import { defineSchema, defineTable } from "codinit/server"; +import { v } from "codinit/values"; + +export default defineSchema({ + results: defineTable( + v.union( + v.object({ + kind: v.literal("error"), + errorMessage: v.string(), + }), + v.object({ + kind: v.literal("success"), + value: v.number(), + }), + ), + ) +}); +\`\`\` + +- ALWAYS use argument validators. For example: + +\`\`\`ts +import { mutation } from "./_generated/server"; +import { v } from "codinit/values"; + +export default mutation({ + args: { + simpleArray: v.array(v.union(v.string(), v.number())), + }, + handler: async (ctx, args) => { + //... + }, +}); +\`\`\` + +- NEVER use return validators when getting started writing an app. For example: + +\`\`\`ts +import { mutation } from "./_generated/server"; +import { v } from "codinit/values"; + +export default mutation({ + args: { + simpleArray: v.array(v.union(v.string(), v.number())), + }, + // Do NOT include a return validator with the \`returns\` field. + // returns: v.number(), + handler: async (ctx, args) => { + //... + return 100; + }, +}); +\`\`\` + +### Function registration + +- Use \`internalQuery\`, \`internalMutation\`, and \`internalAction\` to register internal functions. These functions are private and aren't part of an app's API. They can only be called by other CodinIT functions. These functions are always imported from \`./_generated/server\`. +- Use \`query\`, \`mutation\`, and \`action\` to register public functions. These functions are part of the public API and are exposed to the public Internet. Do NOT use \`query\`, \`mutation\`, or \`action\` to register sensitive internal functions that should be kept private. +- You CANNOT register a function through the \`api\` or \`internal\` objects. +- ALWAYS include argument validators for all CodinIT functions. This includes all of \`query\`, \`internalQuery\`, \`mutation\`, \`internalMutation\`, \`action\`, and \`internalAction\`. +- If the JavaScript implementation of a CodinIT function doesn't have a return value, it implicitly returns \`null\`. + +### Function calling + +- Use \`ctx.runQuery\` to call a query from a query, mutation, or action. +- Use \`ctx.runMutation\` to call a mutation from a mutation or action. +- Use \`ctx.runAction\` to call an action from an action. +- ONLY call an action from another action if you need to cross runtimes (e.g. from V8 to Node). Otherwise, pull out the shared code into a helper async function and call that directly instead. +- Try to use as few calls from actions to queries and mutations as possible. Queries and mutations are transactions, so splitting logic up into multiple calls introduces the risk of race conditions. +- All of these calls take in a \`FunctionReference\`. Do NOT try to pass the callee function directly into one of these calls. +- When using \`ctx.runQuery\`, \`ctx.runMutation\`, or \`ctx.runAction\` to call a function in the same file, specify a type annotation on the return value to work around TypeScript circularity limitations. For example, + +\`\`\`ts +export const f = query({ + args: { name: v.string() }, + handler: async (ctx, args) => { + return "Hello " + args.name; + }, +}); + +export const g = query({ + args: {}, + handler: async (ctx, args) => { + const result: string = await ctx.runQuery(api.example.f, { name: "Bob" }); + return null; + }, +}); +\`\`\` + +### Function references + +- Function references are pointers to registered CodinIT functions. +- ALWAYS use the \`api\` object defined by the framework in \`codinit/_generated/api.ts\` to call public functions registered with \`query\`, \`mutation\`, or \`action\`. You must import the \`api\` object in the same file when using it and it looks like: + +\`\`\`ts +import { api } from "./_generated/api"; +\`\`\` + +- ALWAYS use the \`internal\` object defined by the framework in \`codinit/_generated/api.ts\` to call internal (or private) functions registered with \`internalQuery\`, \`internalMutation\`, or \`internalAction\`. You must import the \`internal\` object in the same file when using it and it looks like: + +\`\`\`ts +import { internal } from "./_generated/api"; +\`\`\` + +- CodinIT uses file-based routing, so a public function defined in \`codinit/example.ts\` named \`f\` has a function reference of \`api.example.f\`. +- A private function defined in \`codinit/example.ts\` named \`g\` has a function reference of \`internal.example.g\`. +- Functions can also registered within directories nested within the \`codinit/\` folder. For example, a public function \`h\` defined in \`codinit/messages/access.ts\` has a function reference of \`api.messages.access.h\`. + +### Api design + +- CodinIT uses file-based routing, so thoughtfully organize files with public query, mutation, or action functions within the \`codinit/\` directory. +- Use \`query\`, \`mutation\`, and \`action\` to define public functions. +- Use \`internalQuery\`, \`internalMutation\`, and \`internalAction\` to define private, internal functions. + +### Limits + +To keep performance fast, CodinIT puts limits on function calls and database records: + +- Queries, mutations, and actions can take in at most 8 MiB of data as arguments. +- Queries, mutations, and actions can return at most 8 MiB of data as their return value. + +- Arrays in arguments, database records, and return values can have at most 8192 elements. +- Objects in function arguments and return values must be valid CodinIT objects, so they can + only contain ASCII field names. ALWAYS remap non-ASCII characters like emoji to an + ASCII code before storing them in an object synced to codinit. +- Objects and arrays can only be nested up to depth 16. +- Database records must be smaller than 1MiB. + +- Queries and mutations can read up to 8MiB of data from the database. +- Queries and mutations can read up to 16384 documents from the database. +- Mutations can write up to 8MiB of data to the database. +- Mutations can write up to 8192 documents to the database. + +- Queries and mutations can execute for at most 1 second. +- Actions and HTTP actions can execute for at most 10 minutes. + +- HTTP actions have no limit on request body size but can stream out at most 20MiB of data. + +IMPORTANT: Hitting any of these limits will cause a function call to fail with an error. You +MUST design your application to avoid hitting these limits. For example, if you are building +a stock ticker app, you can't store a database record for each stock ticker's price at a +point in time. Instead, download the data as JSON, save it to file storage, and have the app +download the JSON file into the browser and render it client-side. + +### Environment variables + +CodinIT supports environment variables within function calls via \`process.env\`. Environment +variables are useful for storing secrets like API keys and other per-deployment configuration. + +You can read environment variables from all functions, including queries, mutations, actions, +and HTTP actions. For example: + +\`\`\`ts +import { action } from "./_generated/server"; +import OpenAI from "openai"; + +const openai = new OpenAI({ + apiKey: process.env.OPENAI_API_KEY, +}); + +export const helloWorld = action({ + args: {}, + handler: async (ctx, args) => { + const completion = await openai.chat.completions.create({ + model: "gpt-4o-mini", + messages: [{ role: "user", content: "Hello, world!" }], + }); + return completion.choices[0].message.content; + }, +}); +\`\`\` + +### Pagination + +- Paginated queries are queries that return a list of results in incremental pages. +- You can define pagination using the following syntax: + +\`\`\`ts +import { v } from "codinit/values"; +import { query, mutation } from "./_generated/server"; +import { paginationOptsValidator } from "codinit/server"; + +export const listWithExtraArg = query({ + args: { paginationOpts: paginationOptsValidator, author: v.string() }, + handler: async (ctx, args) => { + return await ctx.db + .query("messages") + .withIndex("by_author", (q) => q.eq("author", args.author)) + .order("desc") + .paginate(args.paginationOpts); + }, +}); +\`\`\` + +Note: \`paginationOpts\` is an object with the following properties: +- \`numItems\`: the maximum number of documents to return (the validator is \`v.number()\`) +- \`cursor\`: the cursor to use to fetch the next page of documents (the validator is \`v.union(v.string(), v.null())\`) + +- A query that ends in \`.paginate()\` returns an object that has the following properties: - page (contains an array of documents that you fetches) - isDone (a boolean that represents whether or not this is the last page of documents) - continueCursor (a string that represents the cursor to use to fetch the next page of documents) + +## Schema guidelines + +- Always define your schema in \`codinit/schema.ts\`. +- Always import the schema definition functions from \`codinit/server\`: +- System fields are automatically added to all documents and are prefixed with an underscore. The + two system fields that are automatically added to all documents are \`_creationTime\` which has + the validator \`v.number()\` and \`_id\` which has the validator \`v.id(tableName)\`. + +### Index definitions + +- Index names must be unique within a table. +- The system provides two built-in indexes: "by_id" and "by_creation_time." Never add these to the + schema definition of a table! They're automatic and adding them to will be an error. You cannot + use either of these names for your own indexes. \`.index("by_creation_time", ["_creationTime"])\` + is ALWAYS wrong. +- CodinIT automatically includes \`_creationTime\` as the final column in all indexes. +- Do NOT under any circumstances include \`_creationTime\` as the last column in any index you define. This will result in an error. + \`.index("by_author_and_creation_time", ["author", "_creationTime"])\` is ALWAYS wrong. +- Always include all index fields in the index name. For example, if an index is defined as + \`["field1", "field2"]\`, the index name should be "by_field1_and_field2". +- Index fields must be queried in the same order they are defined. If you want to be able to + query by "field1" then "field2" and by "field2" then "field1", you must create separate indexes. +- Index definitions MUST be nonempty. \`.index("by_creation_time", [])\` is ALWAYS wrong. + +Here's an example of correctly using the built-in \`by_creation_time\` index: +Path: \`codinit/schema.ts\` +\`\`\`ts +import { defineSchema } from "codinit/server"; + +export default defineSchema({ + // IMPORTANT: No explicit \`.index("by_creation_time", ["_creationTime"]) \` is needed. + messages: defineTable({ + name: v.string(), + body: v.string(), + }) + // IMPORTANT: This index sorts by \`(name, _creationTime)\`. + .index("by_name", ["name"]), +}); +\`\`\` +Path: \`codinit/messages.ts\` +\`\`\`ts +import { query } from "./_generated/server"; + +export const exampleQuery = query({ + args: {}, + handler: async (ctx) => { + // This is automatically in ascending \`_creationTime\` order. + const recentMessages = await ctx.db.query("messages") + .withIndex("by_creation_time", (q) => q.gt("_creationTime", Date.now() - 60 * 60 * 1000)) + .collect(); + + // This is automatically in \`_creationTime\` order. + const allMessages = await ctx.db.query("messages").order("desc").collect(); + + // This query uses the index to filter by the name field and then implicitly + // orders by \`_creationTime\`. + const byName = await ctx.db.query("messages") + .withIndex("by_name", (q) => q.eq("name", "Alice")) + .order("asc") + .collect(); + }, +}); +\`\`\` + +## Typescript guidelines + +- You can use the helper typescript type \`Id\` imported from './_generated/dataModel' to get the type of the id for a given table. For example if there is a table called 'users' you can use \`Id<'users'>\` to get the type of the id for that table. +- If you need to define a \`Record\` make sure that you correctly provide the type of the key and value in the type. For example a validator \`v.record(v.id('users'), v.string())\` would have the type \`Record, string>\`. Below is an example of using \`Record\` with an \`Id\` type in a query: + +\`\`\`ts +import { query } from "./_generated/server"; +import { Doc, Id } from "./_generated/dataModel"; + +export const exampleQuery = query({ + args: { userIds: v.array(v.id("users")) }, + handler: async (ctx, args) => { + const idToUsername: Record, string> = {}; + for (const userId of args.userIds) { + const user = await ctx.db.get(userId); + if (user) { + users[user._id] = user.username; + } + } + + return idToUsername; + }, +}); +\`\`\` + +- Be strict with types, particularly around id's of documents. For example, if a function takes in an id for a document in the 'users' table, take in \`Id<'users'>\` rather than \`string\`. +- Always use \`as const\` for string literals in discriminated union types. +- When using the \`Array\` type, make sure to always define your arrays as \`const array: Array = [...];\` +- When using the \`Record\` type, make sure to always define your records as \`const record: Record = {...};\` +- Always add \`@types/node\` to your \`package.json\` when using any Node.js built-in modules. + +## Full text search guidelines + +### Defining a search index +To use full text search, you need to define a search index in the schema. +Every search index definition consists of: + +1. A name. + - Must be unique per table. +2. A \`searchField\` + - This is the field which will be indexed for full text search. + - It must be of type \`string\`. +3. [Optional] A list of \`filterField\`s + - These are additional fields that are indexed for fast equality filtering + within your search index. + +Here's an example of how to define a search index: +\`\`\`ts +import { defineSchema, defineTable } from "codinit/server"; +import { v } from "codinit/values"; + +export default defineSchema({ + messages: defineTable({ + body: v.string(), + channel: v.string(), + }).searchIndex("search_body", { + searchField: "body", + filterFields: ["channel"], + }), +}); +\`\`\` +You can specify search and filter fields on nested documents by using a dot-separated path like properties.name. + +### Querying with full text search + +- A query for "10 messages in channel '#general' that best match the query 'hello hi' in their body" would look like: + +\`\`\`ts +const messages = await ctx.db + .query("messages") + .withSearchIndex("search_body", (q) => + q.search("body", "hello hi").eq("channel", "#general"), + ) + .take(10); +\`\`\` + +## Query guidelines + +- Do NOT use \`filter\` in queries. Instead, define an index in the schema and use \`withIndex\` instead. +- CodinIT queries do NOT support \`.delete()\`. Instead, \`.collect()\` the results, iterate over them, and call \`ctx.db.delete(row._id)\` on each result. +- Use \`.unique()\` to get a single document from a query. This method will throw an error if there are multiple documents that match the query. +- When using async iteration, don't use \`.collect()\` or \`.take(n)\` on the result of a query. Instead, use the \`for await (const row of query)\` syntax. + +### Ordering + +- By default CodinIT always returns documents in ascending \`_creationTime\` order. +- You can use \`.order('asc')\` or \`.order('desc')\` to pick whether a query is in ascending or descending order. If the order isn't specified, it defaults to ascending. +- Document queries that use indexes will be ordered based on the columns in the index and can avoid slow table scans. + +## Mutation guidelines + +- Use \`ctx.db.replace\` to fully replace an existing document. This method will throw an error if the document does not exist. +- Use \`ctx.db.patch\` to shallow merge updates into an existing document. This method will throw an error if the document does not exist. + +## Action guidelines + +- Always add \`"use node";\` to the top of files containing actions that use Node.js built-in modules. +- Files that contain \`"use node";\` should NEVER contain mutations or queries, only actions. Node actions can only be called from the client or from other actions. +- Never use \`ctx.db\` inside of an action. Actions don't have access to the database. +- Below is an example of the syntax for an action: + +\`\`\`ts +import { action } from "./_generated/server"; + +export const exampleAction = action({ + args: {}, + handler: async (ctx, args) => { + console.log("This action does not return anything"); + return null; + }, +}); +\`\`\` + +## Scheduling guidelines + +### Cron guidelines + +- Only use the \`crons.interval\` or \`crons.cron\` methods to schedule cron jobs. Do NOT use the \`crons.hourly\`, \`crons.daily\`, or \`crons.weekly\` helpers. +- Both cron methods take in a FunctionReference. Do NOT try to pass the function directly into one of these methods. +- Define crons by declaring the top-level \`crons\` object, calling some methods on it, and then exporting it as default. For example, + +\`\`\`ts +import { cronJobs } from "codinit/server"; +import { internal } from "./_generated/api"; +import { internalAction } from "./_generated/server"; + +const empty = internalAction({ + args: {}, + handler: async (ctx, args) => { + console.log("empty"); + }, +}); + +const crons = cronJobs(); + +// Run \`internal.crons.empty\` every two hours. +crons.interval("delete inactive users", { hours: 2 }, internal.crons.empty, {}); + +export default crons; +\`\`\` + +- You can register CodinIT functions within \`crons.ts\` just like any other file. +- If a cron calls an internal function, always import the \`internal\` object from \`_generated/api\`, even if the internal function is registered in the same file. + +### Scheduler guidelines + +You can schedule a mutation or action to run in the future by calling +\`ctx.scheduler.runAfter(delay, functionReference, args)\` from a +mutation or action. Enqueuing a job to the scheduler is transactional +from within a mutation. + +You MUST use a function reference for the first argument to \`runAfter\`, +not a string or the function itself. + +Auth state does not propagate to scheduled jobs, so \`getAuthUserId()\` and +\`ctx.getUserIdentity()\` will ALWAYS return \`null\` from within a scheduled +job. Prefer using internal, privileged functions for scheduled jobs that don't +need to do access checks. + +Scheduled jobs should be used sparingly and never called in a tight loop. Scheduled functions should not be scheduled more +than once every 10 seconds. Especially in things like a game simulation or something similar that needs many updates +in a short period of time. + +## File storage guidelines + +- CodinIT includes file storage for large files like images, videos, and PDFs. +- The \`ctx.storage.getUrl()\` method returns a signed URL for a given file. It returns \`null\` if the file doesn't exist. +- Do NOT use the deprecated \`ctx.storage.getMetadata\` call for loading a file's metadata. +- Do NOT store file urls in the database. Instead, store the file id in the database and query the \`_storage\` system table to get the url. +- Images are stored as CodinIT storage IDs. Do NOT directly as image URLs. Instead, fetch the signed URL for each image from codinit + storage and use that as the image source. +- Make sure to ALWAYS use the \`_storage\` system table to get the signed URL for a given file. + +Instead, query the \`_storage\` system table. For example, you can use \`ctx.db.system.get\` to get an \`Id<"_storage">\`. + +\`\`\`ts +import { query } from "./_generated/server"; +import { Id } from "./_generated/dataModel"; + +type FileMetadata = { + _id: Id<"_storage">; + _creationTime: number; + contentType?: string; + sha256: string; + size: number; +} + +export const exampleQuery = query({ + args: { fileId: v.id("_storage") }, + handler: async (ctx, args) => { + const metadata: FileMetadata | null = await ctx.db.system.get(args.fileId); + console.log(metadata); + return null; + }, +}); +\`\`\` + +- CodinIT storage stores items as \`Blob\` objects. You must convert all items to/from a \`Blob\` when using CodinIT storage. + +# Examples +## Example of using CodinIT storage within a chat app + +This example creates a mutation to generate a short-lived upload URL and a mutation to save an image message to the database. This mutation is called from the client, which uses the generated upload URL to upload an image to CodinIT storage. Then, +it gets the storage id from the response of the upload and saves it to the database with the \`sendImage\` mutation. On the frontend, it uses the \`list\` query to get the messages from the database and display them in the UI. In this query, the +backend grabs the url from the storage system table and returns it to the client which shows the images in the UI. You should use this pattern for any file upload. To keep track of files, you should save the storage id in the database. + +Path: \`codinit/messages.ts\` +\`\`\`ts +import { v } from "codinit/values"; +import { query } from "./_generated/server"; + +export const list = query({ + args: {}, + handler: async (ctx) => { + const messages = await ctx.db.query("messages").collect(); + return Promise.all( + messages.map(async (message) => ({ + ...message, + // If the message is an "image" its "body" is an \`Id<"_storage">\` + ...(message.format === "image" + ? { url: await ctx.storage.getUrl(message.body) } + : {}), + })), + ); + }, +}); + +import { mutation } from "./_generated/server"; + +export const generateUploadUrl = mutation({ + handler: async (ctx) => { + return await ctx.storage.generateUploadUrl(); + }, +}); + +export const sendImage = mutation({ + args: { storageId: v.id("_storage"), author: v.string() }, + handler: async (ctx, args) => { + await ctx.db.insert("messages", { + body: args.storageId, + author: args.author, + format: "image", + }); + }, +}); + +export const sendMessage = mutation({ + args: { body: v.string(), author: v.string() }, + handler: async (ctx, args) => { + const { body, author } = args; + await ctx.db.insert("messages", { body, author, format: "text" }); + }, +}); +\`\`\` + +Path: \`src/App.tsx\` +\`\`\`ts +import { FormEvent, useRef, useState } from "react"; +import { useMutation, useQuery } from "codinit/react"; +import { api } from "../codinit/_generated/api"; + +export default function App() { + const messages = useQuery(api.messages.list) || []; + + const [newMessageText, setNewMessageText] = useState(""); + const sendMessage = useMutation(api.messages.sendMessage); + + const [name] = useState(() => "User " + Math.floor(Math.random() * 10000)); + async function handleSendMessage(event: FormEvent) { + event.preventDefault(); + if (newMessageText) { + await sendMessage({ body: newMessageText, author: name }); + } + setNewMessageText(""); + } + + const generateUploadUrl = useMutation(api.messages.generateUploadUrl); + const sendImage = useMutation(api.messages.sendImage); + + const imageInput = useRef(null); + const [selectedImage, setSelectedImage] = useState(null); + + async function handleSendImage(event: FormEvent) { + event.preventDefault(); + + // Step 1: Get a short-lived upload URL + const postUrl = await generateUploadUrl(); + // Step 2: POST the file to the URL + const result = await fetch(postUrl, { + method: "POST", + headers: { "Content-Type": selectedImage!.type }, + body: selectedImage, + }); + const json = await result.json(); + if (!result.ok) { + throw new Error(\`Upload failed: \${JSON.stringify(json)}\`); + } + const { storageId } = json; + // Step 3: Save the newly allocated storage id to the database + await sendImage({ storageId, author: name }); + + setSelectedImage(null); + imageInput.current!.value = ""; + } + + return ( +
+

CodinIT Chat

+

+ {name} +

+
    + {messages.map((message) => ( +
  • + {message.author}: + {message.format === "image" ? ( + + ) : ( + {message.body} + )} + {new Date(message._creationTime).toLocaleTimeString()} +
    • + ))} +
+
+ setNewMessageText(event.target.value)} + placeholder="Write a message…" + /> + +
+
+ setSelectedImage(event.target.files![0])} + className="ms-2 btn btn-primary" + disabled={selectedImage !== null} + /> + +
+
+ ); +} + +function Image({ message }: { message: { url: string } }) { + return ; +} +\`\`\` + +## Example of a real-time chat application with AI responses + +Path: \`codinit/functions.ts\` +\`\`\`ts +import { + query, + mutation, + internalQuery, + internalMutation, + internalAction, +} from "./_generated/server"; +import { v } from "codinit/values"; +import OpenAI from "openai"; +import { internal } from "./_generated/api"; +import { getAuthUserId } from "@codinit-dev/auth/server"; + +async function getLoggedInUser(ctx: QueryCtx) { + const userId = await getAuthUserId(ctx); + if (!userId) { + throw new Error("User not found"); + } + const user = await ctx.db.get(userId); + if (!user) { + throw new Error("User not found"); + } + return user; +} + +/** + * Create a channel with a given name. + */ +export const createChannel = mutation({ + args: { + name: v.string(), + }, + handler: async (ctx, args) => { + await getLoggedInUser(ctx); + return await ctx.db.insert("channels", { name: args.name }); + }, +}); + +/** + * List the 10 most recent messages from a channel in descending creation order. + */ +export const listMessages = query({ + args: { + channelId: v.id("channels"), + }, + handler: async (ctx, args) => { + await getLoggedInUser(ctx); + const messages = await ctx.db + .query("messages") + .withIndex("by_channel_and_author", (q) => q.eq("channelId", args.channelId).eq("authorId", args.authorId)) + .order("desc") + .take(10); + return messages; + }, +}); + +/** + List the 10 most recent messages from a specific user within a specific channel + */ +export const listMessagesByUser = query({ + args: { + channelId: v.id("channels"), + authorId: v.id("users"), + }, + handler: async (ctx, args) => { + await getLoggedInUser(ctx); + const messages = await ctx.db + .query("messages") + .withIndex("by_channel_and_author", (q) => q.eq("channelId", args.channelId).eq("authorId", args.authorId)) + .order("desc") + .take(10); + return messages; + }, +}); + +/** + * Send a message to a channel and schedule a response from the AI. + */ +export const sendMessage = mutation({ + args: { + channelId: v.id("channels"), + authorId: v.id("users"), + content: v.string(), + }, + handler: async (ctx, args) => { + await getLoggedInUser(ctx); + const channel = await ctx.db.get(args.channelId); + if (!channel) { + throw new Error("Channel not found"); + } + const user = await ctx.db.get(args.authorId); + if (!user) { + throw new Error("User not found"); + } + await ctx.db.insert("messages", { + channelId: args.channelId, + authorId: args.authorId, + content: args.content, + }); + await ctx.scheduler.runAfter(0, internal.functions.generateResponse, { + channelId: args.channelId, + }); + return null; + }, +}); + +const openai = new OpenAI(); + +export const generateResponse = internalAction({ + args: { + channelId: v.id("channels"), + }, + handler: async (ctx, args) => { + // IMPORTANT: Auth isn't available in \`generateResponse\` since + // it's called by the scheduler. + const context = await ctx.runQuery(internal.functions.loadContext, { + channelId: args.channelId, + }); + const response = await openai.chat.completions.create({ + model: "gpt-4o-mini", + messages: context, + }); + const content = response.choices[0].message.content; + if (!content) { + throw new Error("No content in response"); + } + await ctx.runMutation(internal.functions.writeAgentResponse, { + channelId: args.channelId, + content, + }); + return null; + }, +}); + +export const loadContext = internalQuery({ + args: { + channelId: v.id("channels"), + }, + handler: async (ctx, args) => { + const channel = await ctx.db.get(args.channelId); + if (!channel) { + throw new Error("Channel not found"); + } + const messages = await ctx.db + .query("messages") + .withIndex("by_channel_and_author", (q) => q.eq("channelId", args.channelId).eq("authorId", args.authorId)) + .order("desc") + .take(10); + + const result = []; + for (const message of messages) { + if (message.authorId) { + const user = await ctx.db.get(message.authorId); + if (!user) { + throw new Error("User not found"); + } + result.push({ + role: "user" as const, + content: \`\${user.name}: \${message.content}\`, + }); + } else { + result.push({ role: "assistant" as const, content: message.content }); + } + } + return result; + }, +}); + +export const writeAgentResponse = internalMutation({ + args: { + channelId: v.id("channels"), + content: v.string(), + }, + handler: async (ctx, args) => { + await ctx.db.insert("messages", { + channelId: args.channelId, + content: args.content, + }); + return null; + }, +}); +\`\`\` + +Path: \`codinit/schema.ts\` +\`\`\`ts +import { defineSchema, defineTable } from "codinit/server"; +import { v } from "codinit/values"; +import { authTables } from "@codinit-dev/auth/server"; + +const applicationTables = { + channels: defineTable({ + name: v.string(), + }), + + messages: defineTable({ + channelId: v.id("channels"), + authorId: v.optional(v.id("users")), + content: v.string(), + }).index("by_channel_and_author", ["channelId", "authorId"]), +}; + +export default defineSchema({ + ...authTables, + ...applicationTables, +}); +\`\`\` + +# CodinIT Components +CodinIT Components package up code and data in a sandbox that allows you to confidently and quickly add new features to your backend. +CodinIT Components are like mini self-contained CodinIT backends, and installing them is always safe. They can't read your app's tables or call your app's functions unless you pass them in explicitly. +Each component is installed as its own independent library from NPM. You also need to add a \`codinit.config.ts\` file that includes the component. +ALWAYS prefer using a component for a feature than writing the code yourself, unless the component is not yet supported. +ALWAYS use the \`lookupDocs\` tool to lookup documentation for a component before trying to use the \`npmInstall\` tool to install the relevant dependencies. +You DO NOT need to deploy a component to use it. You can use it after you've installed it. You can use multiple components in the same project. + +CodinIT has the following components: +- \`proseMirror\`: A collaborative text editor component. +- \`presence\`: A component for managing presence functionality, i.e., a live-updating list of users in a "room" including their status for when they were last online. +${options.enableResend ? resendComponent : ''} + +CodinIT has but does not support the following components in Codinit: +DO NOT use the \`lookupDocs\` tool to lookup documentation for these or install them. +Codinit does not have documentation for them. Tell the user that they are unsupported now but will be supported in the future. +- Workflow +- AI Agent +- Persistent Text Streaming +- Workpool +- Crons +- Action Retrier +- Sharded Counter +- Migrations +- Aggregate +- Geospatial +- Cloudflare R2 +- Expo push notifications +- Twilio SMS +- LaunchDarkly feature flags +- Polar +- OSS stats +- Rate limiter +- Action cache +`; +} + +const resendComponent = `- \`resend\`: A component for sending emails.`; diff --git a/codinit-agent/prompts/components/presence.ts b/codinit-agent/prompts/components/presence.ts new file mode 100644 index 00000000..e6220f70 --- /dev/null +++ b/codinit-agent/prompts/components/presence.ts @@ -0,0 +1,139 @@ +export const presenceComponentReadmePrompt = ` +# CodinIT PresenceComponent + +A CodinIT component for managing presence functionality, i.e., a live-updating +list of users in a "room" including their status for when they were last online. + +It can be tricky to implement presence efficiently, without any polling and +without re-running queries every time a user sends a heartbeat message. This +component implements presence via CodinIT scheduled functions such that clients +only receive updates when a user joins or leaves the room. + +The most common use case for this component is via the usePresence hook, which +takes care of sending heartbeart messages to the server and gracefully +disconnecting a user when the tab is closed. + +See \`example\` for an example of how to incorporate this hook into your +application. + +## Installation + +\`\`\`bash +npm install @codinit-dev/presence +\`\`\` + +## Usage + +First, add the component to your CodinIT app: + +\`codinit/codinit.config.ts\` + +\`\`\`ts +import { defineApp } from "codinit/server"; +import presence from "@codinit-dev/presence/codinit.config"; + +const app = defineApp(); +app.use(presence); +export default app; +\`\`\` + +\`codinit/presence.ts\` + +\`\`\`ts +import { mutation, query } from "./_generated/server"; +import { components } from "./_generated/api"; +import { v } from "codinit/values"; +import { Presence } from "@codinit-dev/presence"; +import { getAuthUserId } from "@codinit-dev/auth/server"; + +export const presence = new Presence(components.presence); + +export const getUserId = query({ + args: {}, + returns: v.union(v.string(), v.null()), + handler: async (ctx) => { + return await getAuthUserId(ctx); + }, +}); + +export const heartbeat = mutation({ + args: { roomId: v.string(), userId: v.string(), sessionId: v.string(), interval: v.number() }, + handler: async (ctx, { roomId, userId, sessionId, interval }) => { + const authUserId = await getAuthUserId(ctx); + if (!authUserId) { + throw new Error("Not authenticated"); + } + return await presence.heartbeat(ctx, roomId, authUserId, sessionId, interval); + }, +}); + +export const list = query({ + args: { roomToken: v.string() }, + handler: async (ctx, { roomToken }) => { + const presenceList = await presence.list(ctx, roomToken); + const listWithUserInfo = await Promise.all( + presenceList.map(async (entry) => { + const user = await ctx.db.get(entry.userId as Id<"users">); + if (!user) { + return entry; + } + return { + ...entry, + name: user?.name, + image: user?.image, + }; + }) + ); + return listWithUserInfo; + }, +}); + +export const disconnect = mutation({ + args: { sessionToken: v.string() }, + handler: async (ctx, { sessionToken }) => { + return await presence.disconnect(ctx, sessionToken); + }, +}); +\`\`\` + +A \`Presence\` React component can be instantiated from your client code like this: + +\`src/App.tsx\` + +\`\`\`tsx +import { api } from "../codinit/_generated/api"; +import usePresence from "@codinit-dev/presence/react"; +import FacePile from "@codinit-dev/presence/facepile"; + +export default function App(): React.ReactElement { + const userId = useQuery(api.presence.getUserId); + + return ( +
+ {userId && } +
+ ); +} + +function PresenceIndicator({ userId }: { userId: string }) { + const presenceState = usePresence(api.presence, "my-chat-room", userId); + return ; +} +\`\`\` + +This is the function signature for the \`usePresence\` hook: + +\`\`\`ts +export default function usePresence( + presence: PresenceAPI, + roomId: string, + userId: string, + interval: number = 10000, + codinitUrl?: string +): PresenceState[] | undefined +\`\`\` + +ALWAYS use the \`FacePile\` UI component included with this package unless the user +explicitly requests to use a custom presence UI. You can copy this code and use the +\`usePresence\` hook directly to implement your own styling. +`; diff --git a/codinit-agent/prompts/components/proseMirror.ts b/codinit-agent/prompts/components/proseMirror.ts new file mode 100644 index 00000000..46c5bcee --- /dev/null +++ b/codinit-agent/prompts/components/proseMirror.ts @@ -0,0 +1,394 @@ +export const proseMirrorComponentReadmePrompt = ` + + +# codinit ProseMirror Component + +[![npm version](https://badge.fury.io/js/@codinit-dev%2Fprosemirror-sync.svg)](https://badge.fury.io/js/@codinit-dev%2Fprosemirror-sync) + +This is a [codinit Component](https://codinit.dev/components) that syncs a +[ProseMirror](https://prosemirror.net/) document between clients via a +[Tiptap](https://tiptap.dev/) extension (that also works with +[BlockNote](https://blocknotejs.org/)). + +Add a collaborative editor that syncs to the cloud. With this component, users +can edit the same document in multiple tabs or devices, and the changes will be +synced to the cloud. The data lives in your codinit database, and can be stored +alongside the rest of your app's data. + +Just configure your editor features, add this component to your codinit backend, +and use the provided sync React hook. + +Example usage, see [below](#usage) for more details: + +\`\`\`tsx +function CollaborativeEditor() { + const sync = useBlockNoteSync(api.prosemirrorSync, "some-id"); + return sync.isLoading ? ( +

Loading...

+ ) : sync.editor ? ( + + ) : ( + + ); +} +\`\`\` + +## Installation + +Install the component package: + +\`\`\`ts +npm install @codinit-dev/prosemirror-sync +\`\`\` + +Create a \`codinit.config.ts\` file in your app's \`codinit/\` folder and install the component by calling \`use\`: + +\`\`\`ts +// codinit/codinit.config.ts +import { defineApp } from 'codinit/server'; +import prosemirrorSync from '@codinit-dev/prosemirror-sync/codinit.config'; + +const app = defineApp(); +app.use(prosemirrorSync); + +export default app; +\`\`\` + +You do NOT need to add component tables to your \`schema.ts\`. The component tables are only read and written to from the component functions. + +Component functions are only accessible by \`components..\` imported from \`./_generated/api\` like +\`import { components } from "./_generated/api";\` after code is initially pushed. + +## Usage + +To use the component, you expose the API in a file in your \`codinit/\` folder, and +use the editor-specific sync React hook, passing in a reference to +the API you defined. For this example, we'll create the API in +\`codinit/example.ts\`. + +\`\`\`ts +// codinit/example.ts +import { components } from './_generated/api'; +import { ProsemirrorSync } from '@codinit-dev/prosemirror-sync'; + +const prosemirrorSync = new ProsemirrorSync(components.prosemirrorSync); +export const { getSnapshot, submitSnapshot, latestVersion, getSteps, submitSteps } = prosemirrorSync.syncApi({ + // ... +}); +\`\`\` + +DO NOT use any other component functions outside the functions exposed by \`prosemirrorSync.syncApi\`. + +/\*\* + +- Expose the sync API to the client for use with the \`useBlockNoteSync\` hook. +- If you export these in \`codinit/prosemirror.ts\`, pass \`api.prosemirror\` +- to the \`useBlockNoteSync\` hook. +- +- It allows you to define optional read and write permissions, along with +- a callback when new snapshots are available. +- +- You can pass the optional type argument \`\` to have the \`ctx\` +- parameter specific to your tables. +- +- \`\`\`ts + + \`\`\` + +- import { DataModel } from "./codinit/\_generated/dataModel"; +- import { GenericQueryCtx } from 'codinit/server'; +- // ... +- export const { ... } = prosemirrorSync.syncApi({...}); +- \`\`\` + + \`\`\` + +- +- To define just one function to use for both, you can define it like this: +- \`\`\`ts + + \`\`\` + +- async function checkPermissions(ctx: GenericQueryCtx, id: string) { +- const user = await getAuthUser(ctx); +- if (!user || !(await canUserAccessDocument(user, id))) { +- throw new Error("Unauthorized"); +- } +- } +- \`\`\` + + \`\`\` + + Id in the following type definition extends the string type. Pass ids as strings into the functions. + + export class ProsemirrorSync { + +- @param opts - Optional callbacks. +- @returns functions to export, so the \`useBlockNoteSync\` hook can use them. + \*/ + syncApi(opts?: { + /\*\* + - Optional callback to check read permissions. + - Throw an error if the user is not authorized to read the document. + - @param ctx - A codinit query context. + - @param id - The document ID. + \*/ + checkRead?: ( + ctx: GenericQueryCtx, + id: Id + ) => void | Promise; + /\*\* + - Optional callback to check write permissions. + - Throw an error if the user is not authorized to write to the document. + - @param ctx - A codinit mutation context. + - @param id - The document ID. + \*/ + checkWrite?: ( + ctx: GenericMutationCtx, + id: Id + ) => void | Promise; + /\*\* + - Optional callback to run when a new snapshot is available. + - Version 1 is the initial content. + - @param ctx - A codinit mutation context. + - @param id - The document ID. + - @param snapshot - The snapshot content, as stringified ProseMirror JSON. + - @param version - The version this snapshot represents. + \*/ + onSnapshot?: ( + ctx: GenericMutationCtx, + id: Id, + snapshot: string, + version: number + ) => void | Promise; + ... + } + +In your React components, you can then use the editor-specific hook to fetch the +document and keep it in sync via a Tiptap extension. **Note**: This requires a +[\`codinitProvider\`](https://docs.codinit.dev/quickstart/react#:~:text=Connect%20the%20app%20to%20your%20backend) +to be in the component tree. + +### BlockNote editor + +\`\`\`tsx +// src/MyComponent.tsx +import { useBlockNoteSync } from '@codinit-dev/prosemirror-sync/blocknote'; +import '@blocknote/core/fonts/inter.css'; +import { BlockNoteView } from '@blocknote/mantine'; +import '@blocknote/mantine/style.css'; +import { api } from '../codinit/_generated/api'; +import { BlockNoteEditor } from '@blocknote/core'; + +function MyComponent({ id }: { id: string }) { + const sync = useBlockNoteSync(api.example, id); + return sync.isLoading ? ( +

Loading...

+ ) : sync.editor ? ( + + ) : ( + + ); +} + +export function MyComponentWrapper({ id }: { id: string }) { + return ; +} +\`\`\` + +The \`MyComponentWrapper\` component is a wrapper that ensures the editor is re-rendered when the \`id\` prop changes. +This is a workaround for a bug where \`useBlockNoteSync\` doesn't reinitialize the editor when the \`id\` prop changes. + +sync.create accepts an argument with \`JSONContent\` type. DO NOT pass it a string, it must be an object that matches \`JSONContent\` type: + +\`\`\` +export type JSONContent = { + type?: string; + attrs?: Record; + content?: JSONContent[]; + marks?: { + type: string; + attrs?: Record; + [key: string]: any; + }[]; + text?: string; + [key: string]: any; +}; +\`\`\` + +Here is the source code for the \`useBlockNoteSync\` hook. + +\`\`\`ts +import { useMemo } from "react"; +import type { SyncApi } from "../client"; +import { type UseSyncOptions, useTiptapSync } from "../tiptap"; +import { + type Block, + BlockNoteEditor, + type BlockNoteEditorOptions, + nodeToBlock, +} from "@blocknote/core"; +import { JSONContent } from "@tiptap/core"; + +export type BlockNoteSyncOptions = UseSyncOptions & { + /** + * If you pass options into the editor, you should pass them here, to ensure + * the initialContent is parsed with the correct schema. + */ + editorOptions?: Partial< + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Omit, "initialContent"> + >; + /** + * @deprecated Do \`useBlockNoteSync\` instead. + * + */ + BlockNoteEditor?: Editor; +}; + +/** + * A hook to sync a BlockNote editor with a codinit document. + * + * Usually used like: + * + * \`\`\`tsx + * const sync = useBlockNoteSync(api.example, "some-id"); + * \`\`\` + * + * If you see an error like: + * \`\`\` + * Property 'options' is protected but type 'BlockNoteEditor' is not a class derived from 'BlockNoteEditor'. + * \`\`\` + * You can pass your own BlockNoteEditor like: + * \`\`\`tsx + * import { BlockNoteEditor } from "@blocknote/core"; + * //... + * const sync = useBlockNoteSync(api.example, "some-id"); + * \`\`\` + * This is a workaround for the types of your editor not matching the editor + * version used by prosemirror-sync. + * + * @param syncApi Wherever you exposed the sync api, e.g. \`api.example\`. + * @param id The document ID. + * @param opts Options to pass to the underlying BlockNoteEditor and sync opts. + * @returns The editor, loading state, and fn to create the initial document. + */ +export function useBlockNoteSync( + syncApi: SyncApi, + id: string, + opts?: BlockNoteSyncOptions +): + | { + editor: null; + isLoading: true; + create?: (content: JSONContent) => Promise; + } + | { + editor: null; + isLoading: false; + create: (content: JSONContent) => Promise; + } + | { + editor: Editor; + isLoading: false; + } { + const sync = useTiptapSync(syncApi, id, opts); + const editor = useMemo(() => { + if (sync.initialContent === null) return null; + const editor = BlockNoteEditor.create({ + ...opts?.editorOptions, + _headless: true, + }); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const blocks: Block[] = []; + + // Convert the prosemirror document to BlockNote blocks. + // inspired by https://github.com/TypeCellOS/BlockNote/blob/main/packages/server-util/src/context/ServerBlockNoteEditor.ts#L42 + const pmNode = editor.pmSchema.nodeFromJSON(sync.initialContent); + if (pmNode.firstChild) { + pmNode.firstChild.descendants((node) => { + blocks.push(nodeToBlock(node, editor.pmSchema)); + return false; + }); + } + return BlockNoteEditor.create({ + ...opts?.editorOptions, + _tiptapOptions: { + ...opts?.editorOptions?._tiptapOptions, + extensions: [ + ...(opts?.editorOptions?._tiptapOptions?.extensions ?? []), + sync.extension, + ], + }, + initialContent: blocks.length > 0 ? blocks : undefined, + }); + }, [sync.initialContent]); + + if (sync.isLoading) { + return { + editor: null, + isLoading: true, + /** + * Create the document without waiting to hear from the server. + * Warning: Only call this if you just created the document id. + * It's safer to wait until loading is false. + * It's also best practice to pass in the same initial content everywhere, + * so if two clients create the same document id, they'll both end up + * with the same initial content. Otherwise the second client will + * throw an exception on the snapshot creation. + */ + create: sync.create, + } as const; + } + if (!editor) { + return { + editor: null, + isLoading: false, + create: sync.create!, + } as const; + } + return { + editor: editor as unknown as Editor, + isLoading: false, + } as const; +} + +\`\`\` + +## Notes + +### Configuring the snapshot debounce interval + +The snapshot debounce interval is set to one second by default. +You can specify a different interval with the \`snapshotDebounceMs\` option when +calling \`useBlockNoteSync\`. + +A snapshot won't be sent until both of these are true: + +- The document has been idle for the debounce interval. +- The current user was the last to make a change. + +There can be races, but since each client will submit the snapshot for their +own change, they won't conflict with each other and are safe to apply. + +### Creating a new document + +You can create a new document from the client by calling \`sync.create(content)\`, or on the server by calling \`prosemirrorSync.create(ctx, id, content)\`. + +The content should be a JSON object matching the +[Schema](https://tiptap.dev/docs/editor/core-concepts/schema). If you're using +BlockNote, it needs to be the ProseMirror JSON representation of the BlockNote +blocks. Look at the value stored in the \`snapshots\` table in your database for +an example. Both can use this value: \`{ type: "doc", content: [] }\` + +For client-side document creation: + +- While it's safest to wait until the server confirms the document doesn't exist + yet (\`!sync.isLoading\`), you can choose to call it while offline with a newly + created ID to start editing a new document before you reconnect. +- When the client next connects and syncs the document, it will submit the + initial version and all local changes as steps. +- If multiple clients create the same document, it will fail if they submit + different initial content. +- Note: if you don't open that document while online, it won't sync. +`; diff --git a/codinit-agent/prompts/components/resend.ts b/codinit-agent/prompts/components/resend.ts new file mode 100644 index 00000000..83034f9f --- /dev/null +++ b/codinit-agent/prompts/components/resend.ts @@ -0,0 +1,188 @@ +export const resendComponentReadmePrompt = ` +# Resend CodinIT Component (Beta) + +[![npm version](https://badge.fury.io/js/@codinit-dev%2Fresend.svg)](https://badge.fury.io/js/@codinit-dev%2Fresend) + +This component is the official way to integrate the Resend email service +with your CodinIT project. + +Features: + +- Queueing: Send as many emails as you want, as fast as you want—they'll all be delivered (eventually). +- Batching: Automatically batches large groups of emails and sends them to Resend efficiently. +- Durable execution: Uses CodinIT workpools to ensure emails are eventually delivered, even in the face of temporary failures or network outages. +- Idempotency: Manages Resend idempotency keys to guarantee emails are delivered exactly once, preventing accidental spamming from retries. +- Rate limiting: Honors API rate limits established by Resend. + +See [example](./example) for a demo of how to incorporate this hook into your +application. + +## Installation + +\`\`\`bash +npm install @codinit-dev/resend +\`\`\` + +## Get Started +First, you'll need to get a Resend account [here](https://resend.com). +You'll need a registered domain to send emails from. +Set one up in the Resend dashboard [here](https://resend.com/domains). +Grab an API key [here](https://resend.com/api-keys) +Use the addEnvironmentVariables tool to add \`RESEND_API_KEY\` and \`RESEND_DOMAIN\` to your deployment. + +Next, add the component to your CodinIT app via \`codinit/codinit.config.ts\`: + +\`\`\`ts +import { defineApp } from "codinit/server"; +import resend from "@codinit-dev/resend/codinit.config"; + +const app = defineApp(); +app.use(resend); + +export default app; +\`\`\` + +Then you can use it, as we see in \`codinit/sendEmails.ts\`: + +\`\`\`ts +import { components } from "./_generated/api"; +import { Resend } from "@codinit-dev/resend"; +import { internalMutation } from "./_generated/server"; + +export const resend: Resend = new Resend(components.resend, {}); + +export const sendTestEmail = internalMutation({ + handler: async (ctx) => { + await resend.sendEmail( + ctx, + "Me ", + "Resend ", + "Hi there", + "This is a test email" + ); + }, +}); +\`\`\` + +Then, calling \`sendTestEmail\` from anywhere in your app will send this test email. +You must configure it to send emails from the \`RESEND_DOMAIN\` environment variable, otherwise you will see an unverified domain error. + +If you want to send emails to real addresses, you need to disable \`testMode\`. +You can do this in \`ResendOptions\`, [as detailed below](#resend-component-options-and-going-into-production). + +While the setup we have so far will reliably send emails, you don't have any feedback +on anything delivering, bouncing, or triggering spam complaints. For that, we need +to set up a webhook! + +On the CodinITside, we need to mount an http endpoint to our project to route it to +the Resend component in \`codinit/http.ts\`: + +\`\`\`ts +import { httpRouter } from "codinit/server"; +import { httpAction } from "./_generated/server"; +import { resend } from "./sendEmails"; + +const http = httpRouter(); + +http.route({ + path: "/resend-webhook", + method: "POST", + handler: httpAction(async (ctx, req) => { + return await resend.handleResendEventWebhook(ctx, req); + }), +}); + +export default http; +\`\`\` + + +If you include the http endpoint, you MUST give the users instructions on how to create the resend webhook. The webhook setup is required. + +If our CodinITdeployment is happy-leopard-123, we now have an API for a Resend webhook at +\`https://happy-leopard-123.codinit.site/resend-webhook\`. +Use the getcodinitDeploymentName tool to get the deployment name and print the correct URL for the user to copy and paste. + +Navigate to the Resend dashboard and create a new webhook at that URL. Make sure +to enable all the \`email.*\` events; the other event types will be ignored. + +Finally, copy the webhook secret out of the Resend dashboard and +use the addEnvironmentVariables tool to add \`RESEND_WEBHOOK_SECRET\` to your deployment. + +You should now be seeing email status updates as Resend makes progress on your +batches! + +Speaking of... + +### Registering an email status event handler. + +If you have your webhook established, you can also register an event handler in your +apps you get notifications when email statuses change. + +Update your \`sendEmails.ts\` to look something like this: + +\`\`\`ts +import { components, internal } from "./_generated/api"; +import { Resend } from "@codinit-dev/resend"; +import { internalMutation } from "./_generated/server"; +import { vEmailId, vEmailEvent, Resend } from "@codinit-dev/resend"; + +export const resend: Resend = new Resend(components.resend, { + onEmailEvent: internal.example.handleEmailEvent, +}); + +export const handleEmailEvent = internalMutation({ + args: { + id: vEmailId, + event: vEmailEvent, + }, + handler: async (ctx, args) => { + console.log("Got called back!", args.id, args.event); + // Probably do something with the event if you care about deliverability! + }, +}); + +/* ... existing email sending code ... */ +\`\`\` + +Check out the \`example/\` project in this repo for a full demo. + +### Resend component options, and going into production + +There is a \`ResendOptions\` argument to the component constructor to help customize +it's behavior. + +Check out the [docstrings](./src/client/index.ts), but notable options include: + +- \`apiKey\`: Provide the Resend API key instead of having it read from the environment + variable. +- \`webhookSecret\`: Same thing, but for the webhook secret. +- \`testMode\`: Only allow delivery to test addresses. To + your project, \`testMode\` is default **true**. You need to explicitly set this to + \`false\` for the component to allow you to enqueue emails to artibrary addresses. +- \`onEmailEvent\`: Your email event callback, as outlined above! + Check out the [docstrings](./src/client/index.ts) for details on the events that + are emitted. + +### Optional email sending parameters + +In addition to basic from/to/subject and html/plain text bodies, the \`sendEmail\` method +allows you to provide a list of \`replyTo\` addresses, and other email headers. + +### Tracking, getting status, and cancelling emails + +The \`sendEmail\` method returns a branded type, \`EmailId\`. You can use this +for a few things: + +- To reassociate the original email during status changes in your email event handler. +- To check on the status any time using \`resend.status(ctx, emailId)\`. +- To cancel the email using \`resend.cancelEmail(ctx, emailId)\`. + +If the email has already been sent to the Resend API, it cannot be cancelled. Cancellations +do not trigger an email event. + +### Data retention + +This component retains "finalized" (delivered, cancelled, bounced) emails for seven days +so you can check on the status of them. Then, a background job clears out those emails +and their bodies to reclaim database space. +`; diff --git a/codinit-agent/prompts/exampleDataInstructions.ts b/codinit-agent/prompts/exampleDataInstructions.ts new file mode 100644 index 00000000..75dedfd4 --- /dev/null +++ b/codinit-agent/prompts/exampleDataInstructions.ts @@ -0,0 +1,25 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; + +export function exampleDataInstructions(_options: SystemPromptOptions) { + return stripIndents` + + If the user asks you to make an app that requires data, use some example data to populate the + UI but ONLY include it the Vite app. + + IMPORTANT: Do NOT write example data to the database. + IMPORTANT: You MUST also tell the user that the data is example data and not authoritative. + + Then, decide on an API service for providing the data and ask the user to configure its API key. + + For example, if the user asks you to make a weather app: + 1. Fill in the UI with example data, tell them explicitly that the data is just for rendering the + UI, and then suggest an API service for getting real data. Pick a service that's easy to sign + up for, has a free tier, and is easy to call from an action. + 2. Instruct the user to set up the API key as an environment variable (see \`\`). + 3. Then, after the user confirms they've set the environment variable, set up the API call in an action, + write the data to the database (if appropriate), remove the example data from the UI, and update the + app to load the real data. + +`; +} diff --git a/codinit-agent/prompts/formattingInstructions.ts b/codinit-agent/prompts/formattingInstructions.ts new file mode 100644 index 00000000..a94f2f94 --- /dev/null +++ b/codinit-agent/prompts/formattingInstructions.ts @@ -0,0 +1,68 @@ +import type { SystemPromptOptions } from '../types.js'; +import { stripIndents } from '../utils/stripIndent.js'; + +export const allowedHTMLElements = [ + 'a', + 'b', + 'blockquote', + 'br', + 'code', + 'dd', + 'del', + 'details', + 'div', + 'dl', + 'dt', + 'em', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'hr', + 'i', + 'ins', + 'kbd', + 'li', + 'ol', + 'p', + 'pre', + 'q', + 'rp', + 'rt', + 'ruby', + 's', + 'samp', + 'source', + 'span', + 'strike', + 'strong', + 'sub', + 'summary', + 'sup', + 'table', + 'tbody', + 'td', + 'tfoot', + 'th', + 'thead', + 'tr', + 'ul', + 'var', + 'think', +]; + +export function formattingInstructions(_options: SystemPromptOptions) { + return stripIndents` + + + Use 2 spaces for code indentation. + + + You can make text output pretty by using Markdown or the following available HTML elements: + ${allowedHTMLElements.map((tagName) => `<${tagName}>`).join(', ')} + + + `; +} diff --git a/codinit-agent/prompts/google.ts b/codinit-agent/prompts/google.ts new file mode 100644 index 00000000..1885291c --- /dev/null +++ b/codinit-agent/prompts/google.ts @@ -0,0 +1,28 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; + +export function google(options: SystemPromptOptions) { + if (!options.usingGoogle) { + return ''; + } + + return stripIndents` + This is the workflow you must follow to complete your task: + 1. Think: Think deeply about the problem and how to solve it. + 2. Plan: Plan out a step-by-step approach to solve the problem. + 3. Execute: Write the a complete frontend and backend to solve the problem. + 4. Deploy: Deploy the code. + 5. Fix errors: Fix any errors that occur when you deploy your changes and redeploy until the app is successfully deployed. + 6. Do not add any features that are not part of the original prompt. + + + - You MUST use the deploy tool to deploy your changes. + - You MUST fix any errors that occur when you deploy your changes. + - You MUST write the whole frontend and backend. + - You MUST end every turn with a tool call to deploy your changes. + - You can use the deploy tool as many times as you need to. + - Do NOT write your code directly in the output. Stuff like \`\`\`tsx\`\`\` is not allowed. + - Use \`...\<\/codinitAction\>\` and \`...\<\/codinitArtifact\>\` tags to write your code. + + `; +} diff --git a/codinit-agent/prompts/openAi.ts b/codinit-agent/prompts/openAi.ts new file mode 100644 index 00000000..e5d7b60c --- /dev/null +++ b/codinit-agent/prompts/openAi.ts @@ -0,0 +1,56 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; + +export function openAi(options: SystemPromptOptions) { + if (!options.usingOpenAi) { + return ''; + } + + return stripIndents` + + Your goal is to help the user build and deploy a fully-functional web application. You MUST make sure that + the application is deployed at the end of your turn or else they won't be able to see your changes, and you + will fail to complete your task. Do NOT end before deploying the code you've written. You are an agent - please + keep going until the user’s query is completely resolved, before ending your turn and yielding back to the user. + Only terminate your turn when you are sure that the problem is solved. + + You MUST iterate and keep going until you have created a fully-functional application with a working frontend and backend that has been deployed. Only terminate your turn when you are sure + that the problem is solved and you have deployed your changes. NEVER end your turn without deploying your changes, and when you say you are going + to make a tool call, make sure you ACTUALLY make the tool call, instead of ending your turn. NEVER prematurely end your turn without deploying your changes. + + + # All of these are EXTREMELY important instructions + - You are NOT done until you have updated the relevant code and deployed it successfully. + - Make sure you ALWAYS deploy after make changes/edits to files. + - NEVER under any circumstances end your turn without deploying the frontend and backend using a tool call. + - NEVER under any circumstances end your turn without writing the whole frontend and backend. + - End EVERY turn with a tool call to deploy your changes. + - You CANNOT terminate without making a tool call to deploy your changes. + - You MUST fix any errors that occur when you deploy your changes. + - Do NOT ask the user about feedback until you have deployed your changes. + + + # BEFORE YOU RESPOND, REMEMBER THE FOLLOWING WHICH ARE ABSOLUTELY CRITICAL: + + - The function calls you make will be used to update a UI, so pay close attention to their use, otherwise it may + cause user confusion. Don't mention them in your response. + + + - ALL applications you make must have a working frontend and backend with authentication. + - ALWAYS create a frontend without prompting the user for any input. + - ALWAYS create the frontend and backend in the same turn. + - ALWAYS complete the task you were given before responding to the user. + - If you get an error from typechecking, you MUST fix it. Be persistent. DO NOT end your turn until the error is fixed. + - NEVER end writing code without typechecking your changes. + - DO NOT change the authentication code unless you are sure it is absolutely necessary. + - Make the code as simple as possible, but don't sacrifice functionality. Do NOT use complex patterns. + - ALWAYS break up your code into smaller files and components. + - ALWAYS break up components for the frontend into different files. + - DO NOT make files longer than 300 lines. + - DO NOT change the authentication code in \`src/App.tsx\`, \`src/SignInForm.tsx\`, or \`src/SignOutButton.tsx\`, only update the styling. + - DO NOT use invalid JSX syntax like <, >, or &. Use <, >, and & instead. + + + + `; +} diff --git a/codinit-agent/prompts/openaiProxyGuidelines.ts b/codinit-agent/prompts/openaiProxyGuidelines.ts new file mode 100644 index 00000000..c2604e4d --- /dev/null +++ b/codinit-agent/prompts/openaiProxyGuidelines.ts @@ -0,0 +1,51 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; + +export function openaiProxyGuidelines(options: SystemPromptOptions) { + if (!options.openaiProxyEnabled) { + return ''; + } + return stripIndents` + + Apps in the Codinit environment come with a small amount of gpt-4.1-nano + and gpt-4o-mini tokens to use for building apps! Prefer using gpt-4.1-nano + but let the user know that gpt-4o-mini is also available. + + Use this model in creative ways. + + The environment provides the \`codinit_OPENAI_API_KEY\` and + \`codinit_OPENAI_BASE_URL\` environment variables. Install the + \`openai\` NPM package, and use them in an action like this: + + \`\`\`ts + import OpenAI from "openai"; + import { action } from "./_generated/server"; + + const openai = new OpenAI({ + baseURL: process.env.codinit_OPENAI_BASE_URL, + apiKey: process.env.codinit_OPENAI_API_KEY, + }); + + export const exampleAction = action({ + args: { + prompt: v.string(), + }, + handler: async (ctx, args) => { + const resp = await openai.chat.completions.create({ + model: "gpt-4.1-nano", + messages: [{ role: "user", content: args.prompt }], + }); + return resp.choices[0].message.content; + }, + }); + \`\`\` + + You can ONLY use the chat completions API, and gpt-4.1-nano and gpt-4o-mini + are the ONLY supported models. If you need different APIs or models, ask + the user to set up their own OpenAI API key. + + If the user has already set up their own OpenAI API key, prefer using + that over the builtin CodinIT one. + + `; +} diff --git a/codinit-agent/prompts/outputInstructions.ts b/codinit-agent/prompts/outputInstructions.ts new file mode 100644 index 00000000..732c766e --- /dev/null +++ b/codinit-agent/prompts/outputInstructions.ts @@ -0,0 +1,270 @@ +import type { SystemPromptOptions } from '../types.js'; +import { stripIndents } from '../utils/stripIndent.js'; + +export function outputInstructions(options: SystemPromptOptions) { + return stripIndents` + + + Your main goal is to help the user build and tweak their app. Before providing a solution, + especially on your first response, BRIEFLY outline your implementation steps. This helps + you communicate your thought process to the user clearly. Your planning should: + - List concrete steps you'll take + - Identify key components needed + - Note potential challenges + - Be concise (2-4 lines maximum) + + Example responses: + + User: "Create a collaborative todo list app" + Assistant: "Sure. I'll start by: + 1. Update the Vite template to render the TODO app with dummy data. + 2. Create a 'todos' table in the codinit schema. + 3. Implement queries and mutations to add, edit, list, and delete todos. + 4. Update the React app to use the codinit functions. + + Let's start now. + + [Write files to the filesystem using artifacts] + [Deploy the app and get type errors] + [Fix the type errors] + [Deploy the app again and get more type errors] + [Fix the type errors] + [Deploy the app again and get more type errors] + [Fix the type errors] + [Deploy the app again and get more type errors] + [Fix the type errors] + [Deploy the app again and get more type errors] + [Fix the type errors] + [Deploy the app successfully] + + Now you can use the collaborative to-do list app by adding and completing tasks. + + ULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important. + + + ${options.enableBulkEdits ? artifactInstructions(options) : ''} + + ${toolsInstructions(options)} + + + `; +} + +function artifactInstructions(_options: SystemPromptOptions) { + return stripIndents` + + CRITICAL: Artifacts should ONLY be used for: + 1. Creating new files + 2. Making large changes that affect multiple files + 3. Completely rewriting a file + + NEVER use artifacts for: + 1. Small changes to existing files + 2. Adding new functions or methods + 3. Updating specific parts of a file + + For ALL of the above cases, use the \`edit\` tool instead. + + If you're not using the \`edit\` tool, you can write code to the WebContainer by specifying + a \`\` tag in your response with many \`\` tags inside. + + IMPORTANT: Write as many files as possible in a single artifact. Do NOT split up the creation of different + files across multiple artifacts unless absolutely necessary. + + IMPORTANT: Always rewrite the entire file in the artifact. Do not use placeholders like "// rest of the code remains the same..." or "<- leave original code here ->". + + IMPORTANT: Never write empty files. This will cause the old version of the file to be deleted. + + CRITICAL: Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means: + + - Consider ALL relevant files in the project + - Analyze the entire project context and dependencies + - Anticipate potential impacts on other parts of the system + + This holistic approach is ABSOLUTELY ESSENTIAL for creating coherent and effective solutions. + + You must output the FULL content of the new file within an artifact. If you're modifying an existing file, you MUST know its + latest contents before outputting a new version. + + Wrap the content in opening and closing \`\` tags. These tags contain more specific \`\` elements. + + Add a unique identifier to the \`id\` attribute of the of the opening \`\`. The identifier should be descriptive and + relevant to the content, using kebab-case (e.g., "example-code-snippet"). + + Add a title for the artifact to the \`title\` attribute of the opening \`\`. + + Use \`\` tags to write to specific files. For each file, add a \`filePath\` attribute to the + opening \`\` tag to specify the file path. The content of the file artifact is the file contents. All + file paths MUST BE relative to the current working directory. + + CRITICAL: Always provide the FULL, updated content of the artifact. This means: + - Include ALL code, even if parts are unchanged + - NEVER use placeholders like "// rest of the code remains the same..." or "<- leave original code here ->" + - ALWAYS show the complete, up-to-date file contents when updating files + - Avoid any form of truncation or summarization + + NEVER use the word "artifact". For example: + - DO NOT SAY: "This artifact sets up a simple Snake game using codinit." + - INSTEAD SAY: "We set up a simple Snake game using codinit." + + Here are some examples of correct usage of artifacts: + + + Write a codinit function that computes the factorial of a number. + + Certainly, I can help you create a query that calculates the factorial of a number. + + function factorial(n) { + ... + } + ... + + + + + + Build a multiplayer snake game + + Certainly! I'd be happy to help you build a snake game using codinit and HTML5 Canvas. This will be a basic implementation + that you can later expand upon. Let's create the game step by step. + + ... + ... + ... + ... + + Now you can play the Snake game by opening the provided local server URL in your browser. Use the arrow keys to control the + snake. Eat the red food to grow and increase your score. The game ends if you hit the wall or your own tail. + + + + + `; +} + +function toolsInstructions(options: SystemPromptOptions) { + return stripIndents` + + + NEVER reference "tools" in your responses. For example: + - DO NOT SAY: "This artifact uses the \`npmInstall\` tool to install the dependencies." + - INSTEAD SAY: "We installed the dependencies." + + + + Once you've used an artifact to write files to the filesystem, you MUST deploy the changes to the codinit backend + using the deploy tool. This tool call will execute a few steps: + 1. Deploy the \`codinit/\` folder to the codinit backend. If this fails, you MUST fix the errors with another artifact + and then try again. + 2. Start the Vite development server and open a preview for the user. + + This tool call is the ONLY way to deploy changes and start a development server. The environment automatically + provisions a codinit deployment for the app and sets up codinit Auth, so you can assume these are all ready to go. + + If you have modified the \`codinit/schema.ts\` file, deploys may fail if the new schema does not match the + existing data in the database. If this happens, you have two options: + 1. You can ask the user to clear the existing data. Tell them exactly which table to clear, and be sure to + warn them that this will delete all existing data in the table. They can clear a table by opening the + "Database" tab, clicking on the "Data" view (with a table icon), selecting the table, clicking the + "..." button in the top-right, and then clicking "Clear Table". + 2. You can also make the schema more permissive to do an in-place migration. For example, if you're adding + a new field, you can make the field optional, and existing data will match the new schema. + + For example, if you're adding a new \`tags\` field to the \`messages\` table, you can modify the schema like: + \`\`\`ts + const messages = defineTable({ + ... + tags: v.optional(v.array(v.string())), + }) + \`\`\` + + If the deploy tool fails, do NOT overly apologize, be sycophantic, or repeatedly say the same message. Instead, + SUCCINCTLY explain the issue and how you intend to fix it in one sentence. + + + + You can install additional dependencies for the project with npm using the \`npmInstall\` tool. + + This tool should not be used to install dependencies that are already listed in the \`package.json\` file + as they are already installed. + + + + You can lookup documentation for a list of components using the \`lookupDocs\` tool. Always use this tool to + lookup documentation for a component before using the \`npmInstall\` tool to install dependencies. + + + + You can prompt the user to add environment variables to their codinit deployment using the \`addEnvironmentVariables\` + tool, which will open the dashboard to the "Environment Variables" tab with the environment variable names prepopulated. + The user needs to fill in the values for the environment variables and then click "Save". Always call this toolcall at the end of a + message so that the user has time to add the environment variables before the next message. + + + ${preciseToolInstructions()} + + `; +} + +function preciseToolInstructions() { + return stripIndents` + + The environment automatically provides relevant files, but you can ask to see particular files by using the view + tool. Use this tool especially when you're modifying existing files or when debugging an issue. + + + + CRITICAL: For small, targeted changes to existing files, ALWAYS use the \`edit\` tool instead of artifacts. + The \`edit\` tool is specifically designed for: + - Fixing bugs + - Making small changes to existing code + - Adding new functions or methods to existing files + - Updating specific parts of a file + + IMPORTANT: The edit tool has specific requirements: + - The text to replace must be less than 1024 characters + - The new text must be less than 1024 characters + - The text to replace must appear exactly once in the file + - You must know the file's current contents before using it. Use the view tool if the file is not in the current context. + - If the file edit toolcall fails, ALWAYS use the view tool to see the current contents of the file and then try again. + + Here are examples of correct edit tool usage: + + Example 1: Adding a new function + \`\`\`typescript + // Before: + export function existingFunction() { + // ... + } + + // After using edit tool: + export function existingFunction() { + // ... + } + + export function newFunction() { + // ... + } + \`\`\` + The edit tool would replace the exact string "export function existingFunction() {" with "export function existingFunction() {\n\n export function newFunction() {" + + Example 2: Fixing a bug + \`\`\`typescript + // Before: + if (value > 10) { + return true; + } + + // After using edit tool: + if (value >= 10) { + return true; + } + \`\`\` + The edit tool would replace the exact string "if (value > 10) {" with "if (value >= 10) {" + + + CRITICAL: Always use the view tool first to see the exact content of the file before using the edit tool. + This ensures you can provide the exact text to replace. + + `; +} diff --git a/codinit-agent/prompts/resendProxyGuidelines.ts b/codinit-agent/prompts/resendProxyGuidelines.ts new file mode 100644 index 00000000..c5c37f99 --- /dev/null +++ b/codinit-agent/prompts/resendProxyGuidelines.ts @@ -0,0 +1,66 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; + +export function resendProxyGuidelines(options: SystemPromptOptions) { + if (!options.resendProxyEnabled) { + return ''; + } + return stripIndents` + + Apps in the Codinit environment come with a small number of emails + to send via the Resend API! The Codinit environment ONLY supports + sending emails to a user's verified email address. For example, + if a developer signs into Codinit with a GitHub account with email + test@example.com, their apps built on Codinit can only use the + CodinIT Resend proxy to send emails to test@example.com. Sending + to any other email address will result in an error. + + Emails from the Resend proxy will always come from "Codinit Notifications + <{DEPLOYMENT_NAME}@codinit.app>". The Resend SDK still requires + a "from" field, however, so put something sensible in there for when + the user sets up their own Resend API key. + + The environment provides the \`CODINIT_RESEND_API_KEY\` and + \`RESEND_BASE_URL\` environment variables. Install the + \`resend\` NPM package, and use it in an action like this: + + \`\`\`ts + import { action } from "./_generated/server"; + import { Resend } from "resend"; + + export const sendReport = action({ + args: { + reportId: v.id('reports'), + to: v.string(), + }, + handler: async (ctx, args) => { + const fancyReport = await ctx.runQuery(internal.reports.getReport, { + reportId: args.reportId, + }); + const resend = new Resend(process.env.CODINIT_RESEND_API_KEY); + const { data, error } = await resend.emails.send({ + from: "Report Generator ", + to: args.to, + subject: "Your report is ready", + html: fancyReport, + }); + if (error) { + throw new Error('Failed to send email: ' + JSON.stringify(error)); + } + return data; + }, + }); + \`\`\` + + You can ONLY use the emails API, and the environment provides the + \`CODINIT_RESEND_API_KEY\` and \`RESEND_BASE_URL\` environment variables. + If you need different APIs, ask the user to set up their own + Resend API key. + + If the user has already set up their own Resend API key, prefer using + that over the builtin CodinIT one. You may need to tell them to remove + the "RESEND_BASE_URL" environment variable to have the Resend SDK not + use the CodinIT proxy. + + `; +} diff --git a/codinit-agent/prompts/secretsInstructions.ts b/codinit-agent/prompts/secretsInstructions.ts new file mode 100644 index 00000000..2ffc6d17 --- /dev/null +++ b/codinit-agent/prompts/secretsInstructions.ts @@ -0,0 +1,19 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; + +export function secretsInstructions(_options: SystemPromptOptions) { + return stripIndents` + + If you need to use a secret to call into an API, instruct the user to set up the secret as an + environment variable in their CodinIT deployment. + + 1. Tell the user to setup the secret as an environment variable, and tell them exactly what + name to use (e.g. \`OPENAI_API_KEY\`). + 2. Give the user clear instructions for how to set the environment variable. They can do so + by opening the "Database" tab, clicking on "Settings" (with the gear icon), clicking on + "Environment variables", and then setting the variable. + 3. After the user confirms they've set the environment variable, you can use the secret in your + code. + +`; +} diff --git a/codinit-agent/prompts/solutionConstraints.ts b/codinit-agent/prompts/solutionConstraints.ts new file mode 100644 index 00000000..a9de2cea --- /dev/null +++ b/codinit-agent/prompts/solutionConstraints.ts @@ -0,0 +1,242 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; +import { codinitGuidelines } from './codinitGuidelines.js'; + +export function solutionConstraints(options: SystemPromptOptions) { + return stripIndents` + + + ${options.includeTemplate ? templateInfo() : ''} + + + You MUST use CodinIT for the database, realtime, file storage, functions, scheduling, HTTP handlers, + and search functionality. CodinIT is realtime, by default, so you never need to manually refresh + subscriptions. Here are some guidelines, documentation, and best practices for using CodinIT effectively: + + ${codinitGuidelines(options)} + + + - All user-defined HTTP endpoints are defined in \`codinit/router.ts\` and require an \`httpAction\` decorator. + - The \`codinit/http.ts\` file contains the authentication handler for CodinIT Auth. Do NOT modify this file because it is locked. Instead define all new http actions in \`codinit/router.ts\`. + + + + Here are some guidelines for using the template's auth within the app: + + When writing CodinIT handlers, use the 'getAuthUserId' function to get the logged in user's ID. You + can then pass this to 'ctx.db.get' in queries or mutations to get the user's data. But, you can only + do this within the \`codinit/\` directory. For example: + \`\`\`ts "codinit/users.ts" + import { getAuthUserId } from "@codinit-dev/auth/server"; + + export const currentLoggedInUser = query({ + handler: async (ctx) => { + const userId = await getAuthUserId(ctx); + if (!userId) { + return null; + } + const user = await ctx.db.get(userId); + if (!user) { + return null; + } + console.log("User", user.name, user.image, user.email); + return user; + } + }) + \`\`\` + + If you want to get the current logged in user's data on the frontend, you should use the following function + that is defined in \`codinit/auth.ts\`: + + \`\`\`ts "codinit/auth.ts" + export const loggedInUser = query({ + handler: async (ctx) => { + const userId = await getAuthUserId(ctx); + if (!userId) { + return null; + } + const user = await ctx.db.get(userId); + if (!user) { + return null; + } + return user; + }, + }); + \`\`\` + + Then, you can use the \`loggedInUser\` query in your React component like this: + + \`\`\`tsx "src/App.tsx" + const user = useQuery(api.auth.loggedInUser); + \`\`\` + + The "users" table within 'authTables' has a schema that looks like: + \`\`\`ts + const users = defineTable({ + name: v.optional(v.string()), + image: v.optional(v.string()), + email: v.optional(v.string()), + emailVerificationTime: v.optional(v.number()), + phone: v.optional(v.string()), + phoneVerificationTime: v.optional(v.number()), + isAnonymous: v.optional(v.boolean()), + }) + .index("email", ["email"]) + .index("phone", ["phone"]); + \`\`\` + + + + Here is an example of using CodinIT from a React app: + \`\`\`tsx + import React, { useState } from "react"; + import { useMutation, useQuery } from "codinit/react"; + import { api } from "../codinit/_generated/api"; + + export default function App() { + const messages = useQuery(api.messages.list) || []; + + const [newMessageText, setNewMessageText] = useState(""); + const sendMessage = useMutation(api.messages.send); + + const [name] = useState(() => "User " + Math.floor(Math.random() * 10000)); + async function handleSendMessage(event) { + event.preventDefault(); + await sendMessage({ body: newMessageText, author: name }); + setNewMessageText(""); + } + return ( +
+

CodinIT Chat

+

+ {name} +

+
    + {messages.map((message) => ( +
  • + {message.author}: + {message.body} + {new Date(message._creationTime).toLocaleTimeString()} +
    • + ))} +
+
+ setNewMessageText(event.target.value)} + placeholder="Write a message…" + /> + +
+
+ ); + } + \`\`\` + + The \`useQuery()\` hook is live-updating! It causes the React component is it used in to rerender, so CodinIT is a + perfect fix for collaborative, live-updating websites. + + NEVER use \`useQuery()\` or other \`use\` hooks conditionally. The following example is invalid: + + \`\`\`tsx + const avatarUrl = profile?.avatarId ? useQuery(api.profiles.getAvatarUrl, { storageId: profile.avatarId }) : null; + \`\`\` + + You should do this instead: + + \`\`\`tsx + const avatarUrl = useQuery( + api.profiles.getAvatarUrl, + profile?.avatarId ? { storageId: profile.avatarId } : "skip" + ); + \`\`\` + + If you want to use a UI element, you MUST create it. DO NOT use external libraries like Shadcn/UI. + + When writing a UI component and you want to use a CodinIT function, you MUST import the \`api\` object. For example: + + \`\`\`tsx + import { api } from "../codinit/_generated/api"; + \`\`\` + + You can use the \`api\` object to call any public CodinIT function. + + Do not use \`sharp\` for image compression, always use \`canvas\` for image compression. + + Always make sure your UIs work well with anonymous users. + + Always make sure the functions you are calling are defined in the \`codinit/\` directory and use the \`api\` or \`internal\` object to call them. + + Always make sure you are using the correct arguments for CodinIT functions. If arguments are not optional, make sure they are not null. + + + + `; +} + +function templateInfo() { + return stripIndents` + + The Codinit WebContainer environment starts with a full-stack app template fully loaded at '/home/project', + the current working directory. Its dependencies are specified in the 'package.json' file and already + installed in the 'node_modules' directory. You MUST use this template. This template uses the following + technologies: + - Vite + React for the frontend + - TailwindCSS for styling + - CodinIT for the database, functions, scheduling, HTTP handlers, and search. + - CodinIT Auth for authentication. + + Here are some important files within the template: + + + The 'codinit/' directory contains the code deployed to the CodinIT backend. + + + + The 'auth.config.ts' file links CodinIT Auth to the CodinIT deployment. + IMPORTANT: Do NOT modify the \`codinit/auth.config.ts\` file under any circumstances. + + + + This code configures CodinIT Auth to use just a username/password login method. Do NOT modify this + file. If the user asks to support other login methods, tell them that this isn't currently possible + within Codinit. They can download the code and do it themselves. + IMPORTANT: Do NOT modify the \`codinit/auth.ts\`, \`src/SignInForm.tsx\`, or \`src/SignOutButton.tsx\` files under any circumstances. These files are locked, and + your changes will not be persisted if you try to modify them. + + + + This file contains the HTTP handlers for the CodinIT backend. It starts with just the single + handler for CodinIT Auth, but if the user's app needs other HTTP handlers, you can add them to this + file. DO NOT modify the \`codinit/http.ts\` file under any circumstances unless explicitly instructed to do so. + DO NOT modify the \`codinit/http.ts\` for file storage. Use an action instead. + + + + This file contains the schema for the CodinIT backend. It starts with just 'authTables' for setting + up authentication. ONLY modify the 'applicationTables' object in this file: Do NOT modify the + 'authTables' object. Always include \`...authTables\` in the \`defineSchema\` call when modifying + this file. The \`authTables\` object is imported with \`import { authTables } from "@codinit-dev/auth/server";\`. + + + + This is the main React component for the app. It starts with a simple login form and a button to add a + random number to a list. It uses "src/SignInForm.tsx" and "src/SignOutButton.tsx" for the login and + logout functionality. Add new React components to their own files in the 'src' directory to avoid + cluttering the main file. + + + + This file is the entry point for the app and sets up the 'CodinitAuthProvider'. + + IMPORTANT: Do NOT modify the \`src/main.tsx\` file under any circumstances. + + + + This file is the entry point for Vite and includes the and tags. + + + `; +} diff --git a/codinit-agent/prompts/system.ts b/codinit-agent/prompts/system.ts new file mode 100644 index 00000000..c1ef3d5c --- /dev/null +++ b/codinit-agent/prompts/system.ts @@ -0,0 +1,44 @@ +import { stripIndents } from '../utils/stripIndent.js'; +import type { SystemPromptOptions } from '../types.js'; +import { solutionConstraints } from './solutionConstraints.js'; +import { formattingInstructions } from './formattingInstructions.js'; +import { exampleDataInstructions } from './exampleDataInstructions.js'; +import { secretsInstructions } from './secretsInstructions.js'; +import { outputInstructions } from './outputInstructions.js'; +import { openaiProxyGuidelines } from './openaiProxyGuidelines.js'; +import { openAi } from './openAi.js'; +import { google } from './google.js'; +import { resendProxyGuidelines } from './resendProxyGuidelines.js'; + +// This is the very first part of the system prompt that tells the model what +// role to play. +export const ROLE_SYSTEM_PROMPT = stripIndents` +You are CodinIT, an expert AI assistant and exceptional senior software developer with vast +knowledge across computer science, programming languages, frameworks, and best practices. +You are helping the user develop and deploy a full-stack web application using CodinIT for +the backend. CodinIT is a reactive database with real-time updates. You are extremely persistent +and will not stop until the user's application is successfully deployed. You are concise. +`; +export const GENERAL_SYSTEM_PROMPT_PRELUDE = 'Here are important guidelines for working with Codinit:'; + +// This system prompt explains how to work within the WebContainer environment and Codinit. It +// doesn't contain any details specific to the current session. +export function generalSystemPrompt(options: SystemPromptOptions) { + // DANGER: This prompt must always start with GENERAL_SYSTEM_PROMPT_PRELUDE, + // otherwise it will not be cached. We assume this string is the *last* message we want to cache. + // See app/lib/.server/llm/provider.ts + const result = stripIndents`${GENERAL_SYSTEM_PROMPT_PRELUDE} + ${openAi(options)} + ${google(options)} + ${solutionConstraints(options)} + ${formattingInstructions(options)} + ${exampleDataInstructions(options)} + ${secretsInstructions(options)} + ${openaiProxyGuidelines(options)} + ${resendProxyGuidelines(options)} + ${outputInstructions(options)} + ${openAi(options)} + ${google(options)} + `; + return result; +} diff --git a/codinit-agent/prompts/types.d.ts b/codinit-agent/prompts/types.d.ts new file mode 100644 index 00000000..9dbabb50 --- /dev/null +++ b/codinit-agent/prompts/types.d.ts @@ -0,0 +1,4 @@ +declare module '*.md?raw' { + const content: string; + export default content; +} diff --git a/codinit-agent/tools/addEnvironmentVariables.ts b/codinit-agent/tools/addEnvironmentVariables.ts new file mode 100644 index 00000000..393cc6f0 --- /dev/null +++ b/codinit-agent/tools/addEnvironmentVariables.ts @@ -0,0 +1,13 @@ +import type { Tool } from 'ai'; +import { z } from 'zod'; + +export const addEnvironmentVariablesParameters = z.object({ + envVarNames: z.array(z.string()).describe('List of environment variable names to add to the project.'), +}); + +export function addEnvironmentVariablesTool(): Tool { + return { + description: `Add environment variables to the CodinIT deployment. The user still needs to manually add the values in the CodinIT dashboard page this tool opens.`, + parameters: addEnvironmentVariablesParameters, + }; +} diff --git a/codinit-agent/tools/deploy.ts b/codinit-agent/tools/deploy.ts new file mode 100644 index 00000000..02cb3e9e --- /dev/null +++ b/codinit-agent/tools/deploy.ts @@ -0,0 +1,24 @@ +import type { Tool } from 'ai'; +import { z } from 'zod'; + +export const deployToolDescription = ` +Deploy the app to CodinIT and start the Vite development server (if not already running). + +Execute this tool call after you've used an artifact to write files to the filesystem +and the app is complete. Do NOT execute this tool if the app isn't in a working state. + +After initially writing the app, you MUST execute this tool after making any changes +to the filesystem. + +If this tool call fails with esbuild bundler errors, a library that requires Node.js +apis may be being used. Isolating those dependencies into a codinit file of only actions +with "use node" at the top is the only way to fix this. The files with "use node" at the +top can only contain actions. They can NEVER contains queries or mutations. +`; + +export const deployTool: Tool = { + description: deployToolDescription, + parameters: z.object({}), +}; + +export const deployToolParameters = z.object({}); diff --git a/codinit-agent/tools/edit.ts b/codinit-agent/tools/edit.ts new file mode 100644 index 00000000..d6beb0e8 --- /dev/null +++ b/codinit-agent/tools/edit.ts @@ -0,0 +1,24 @@ +import type { Tool } from 'ai'; +import { z } from 'zod'; + +const editToolDescription = ` +Replace a string of text that appears exactly once in a file with a +new string of text. Use this tool when fixing a bug or making a +small tweak to a file. + +You MUST know a file's current contents before using this tool. This may +either be from context or previous use of the \`view\` tool. + +The \`old\` and \`new\` parameters must be less than 1024 characters each. +`; + +export const editToolParameters = z.object({ + path: z.string().describe('The absolute path to the file to edit.'), + old: z.string().describe('The fragment of text to replace. Must be less than 1024 characters.'), + new: z.string().describe('The new fragment of text to replace it with. Must be less than 1024 characters.'), +}); + +export const editTool: Tool = { + description: editToolDescription, + parameters: editToolParameters, +}; diff --git a/codinit-agent/tools/getCodinitDeploymentName.ts b/codinit-agent/tools/getCodinitDeploymentName.ts new file mode 100644 index 00000000..4833c35c --- /dev/null +++ b/codinit-agent/tools/getCodinitDeploymentName.ts @@ -0,0 +1,17 @@ +import type { Tool } from 'ai'; +import { z } from 'zod'; + +export const getCodinitDeploymentNameDescription = ` +Get the name of the CodinIT deployment this project is using. This tool returns the deployment name that is used +to identify in the dashboard and for deployment operations. + +The deployment name is a unique identifier and can be used to access the CodinIT dashboard: +https://dashboard.codinit.dev/d/{deploymentName}. +`; + +export const getCodinitDeploymentNameParameters = z.object({}); + +export const getCodinitDeploymentNameTool: Tool = { + description: getCodinitDeploymentNameDescription, + parameters: getCodinitDeploymentNameParameters, +}; diff --git a/codinit-agent/tools/lookupDocs.ts b/codinit-agent/tools/lookupDocs.ts new file mode 100644 index 00000000..b5df3b9f --- /dev/null +++ b/codinit-agent/tools/lookupDocs.ts @@ -0,0 +1,31 @@ +import type { Tool } from 'ai'; +import { presenceComponentReadmePrompt } from 'codinit-agent/prompts/components/presence.js'; +import { proseMirrorComponentReadmePrompt } from 'codinit-agent/prompts/components/proseMirror.js'; +import { z } from 'zod'; +import { resendComponentReadmePrompt } from 'codinit-agent/prompts/components/resend.js'; + +export const lookupDocsParameters = z.object({ + docs: z + .array(z.string()) + .describe( + 'List of features to look up in the documentation. You should look up all the docs for the features you are implementing.', + ), +}); + +export function lookupDocsTool(): Tool { + return { + description: `Lookup documentation for a list of features. Valid features to lookup are: \`proseMirror\` and \`presence\``, + parameters: lookupDocsParameters, + }; +} + +export type LookupDocsParameters = z.infer; + +// Documentation content that can be looked up +export const docs = { + proseMirror: proseMirrorComponentReadmePrompt, + presence: presenceComponentReadmePrompt, + resend: resendComponentReadmePrompt, +} as const; + +export type DocKey = keyof typeof docs; diff --git a/codinit-agent/tools/npmInstall.ts b/codinit-agent/tools/npmInstall.ts new file mode 100644 index 00000000..bea5a289 --- /dev/null +++ b/codinit-agent/tools/npmInstall.ts @@ -0,0 +1,27 @@ +import type { Tool } from 'ai'; +import { z } from 'zod'; + +export const npmInstallToolDescription = ` +Install additional dependencies for the project with NPM. + +Choose high quality, flexible libraries that are well-maintained and have +significant adoption. Always use libraries that have TypeScript definitions. +`; + +const packagesDescription = ` +Space separated list of NPM packages to install. This will be passed directly to \`npm install\`. + +Examples: +- 'date-fns' +- 'chart.js react-chartjs-2' +- 'motion' +`; + +export const npmInstallToolParameters = z.object({ + packages: z.string().describe(packagesDescription), +}); + +export const npmInstallTool: Tool = { + description: npmInstallToolDescription, + parameters: npmInstallToolParameters, +}; diff --git a/codinit-agent/tools/view.ts b/codinit-agent/tools/view.ts new file mode 100644 index 00000000..110382ce --- /dev/null +++ b/codinit-agent/tools/view.ts @@ -0,0 +1,25 @@ +import type { Tool } from 'ai'; +import { z } from 'zod'; + +const viewRangeDescription = ` +An optional array of two numbers specifying the inclusive start and exclusive end line numbers to view. +Line numbers are 1-indexed, and -1 for the end line means read to the end of the file. This parameter +can only be used when reading files, not when listing directories. +`; + +const viewDescription = ` +Read the contents of a file or list a directory. Be sure to use this tool when you're editing a file +and aren't sure what its contents are. + +The file contents are returned as a string with 1-indexed line numbers. +`; + +export const viewParameters = z.object({ + path: z.string().describe('The absolute path to the file to read.'), + view_range: z.array(z.number()).nullable().describe(viewRangeDescription), +}); + +export const viewTool: Tool = { + description: viewDescription, + parameters: viewParameters, +}; diff --git a/codinit-agent/tsconfig.json b/codinit-agent/tsconfig.json new file mode 100644 index 00000000..6e8ccb41 --- /dev/null +++ b/codinit-agent/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "NodeNext", + "moduleResolution": "nodenext", + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "types": ["node"] + }, + "include": ["./**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/codinit-agent/types.ts b/codinit-agent/types.ts new file mode 100644 index 00000000..4d9a407b --- /dev/null +++ b/codinit-agent/types.ts @@ -0,0 +1,118 @@ +import type { ToolInvocation } from 'ai'; +import type { AbsolutePath, RelativePath } from './utils/workDir.js'; +import type { Tool } from 'ai'; +import type { npmInstallToolParameters } from './tools/npmInstall.js'; +import type { editToolParameters } from './tools/edit.js'; +import type { viewParameters } from './tools/view.js'; +import type { lookupDocsParameters } from './tools/lookupDocs.js'; +import type { z } from 'zod'; +import type { addEnvironmentVariablesParameters } from './tools/addEnvironmentVariables.js'; +import type { getCodinitDeploymentNameParameters } from './tools/getCodinitDeploymentName.js'; + +export type CodinitProject = { + token: string; + deploymentName: string; + deploymentUrl: string; + projectSlug: string; + teamSlug: string; +}; + +export interface SystemPromptOptions { + enableBulkEdits: boolean; + includeTemplate: boolean; + openaiProxyEnabled: boolean; + usingOpenAi: boolean; + usingGoogle: boolean; + resendProxyEnabled: boolean; + enableResend: boolean; +} + +export interface CodinitArtifactData { + id: string; + title: string; + type?: string | undefined; +} + +export type ActionType = 'file' | 'toolUse' | 'shell' | 'start' | 'build' | 'supabase'; + +export interface FileAction { + type: 'file'; + filePath: RelativePath; + isEdit?: boolean; + content: string; +} + +export interface ToolUseAction { + type: 'toolUse'; + toolName: string; + parsedContent: ToolInvocation; + // Serialized content to use for de-duping + content: string; +} + +export interface BaseAction { + content: string; +} + +export interface ShellAction extends BaseAction { + type: 'shell'; +} + +export interface StartAction extends BaseAction { + type: 'start'; +} + +export interface BuildAction extends BaseAction { + type: 'build'; +} + +export interface SupabaseAction extends BaseAction { + type: 'supabase'; + operation: 'migration' | 'query'; + filePath?: string; + projectId?: string; +} + +export type CodinitAction = FileAction | ToolUseAction | ShellAction | StartAction | BuildAction | SupabaseAction; + +export type CodinitActionData = CodinitAction; + +export interface EditorDocument { + value: string; + isBinary: boolean; + filePath: AbsolutePath; + scroll?: ScrollPosition; +} + +export interface ScrollPosition { + top: number; + left: number; +} + +export interface File { + type: 'file'; + content: string; + isBinary: boolean; +} + +export interface Folder { + type: 'folder'; +} + +export type EmptyArgs = z.ZodObject>; + +export type CodinitToolSet = { + deploy: Tool; + npmInstall: Tool; + lookupDocs: Tool; + addEnvironmentVariables?: Tool; + view?: Tool; + edit?: Tool; + getCodinitDeploymentName: Tool; +}; + +export type CodinitToolName = keyof CodinitToolSet; + +export type Dirent = File | Folder; + +export type FileMap = Record; diff --git a/codinit-agent/utils/codinitDebug.ts b/codinit-agent/utils/codinitDebug.ts new file mode 100644 index 00000000..94cb6616 --- /dev/null +++ b/codinit-agent/utils/codinitDebug.ts @@ -0,0 +1,20 @@ +import type { WebContainer } from '@webcontainer/api'; +import type { Message } from 'ai'; + +type CodinitDebug = { + messages?: Message[]; + parsedMessages?: Message[]; + webcontainer?: WebContainer; + setLogLevel?: (level: any) => void; + chatInitialId?: string; + sessionId?: string; +}; + +export function setCodinitDebugProperty(key: keyof CodinitDebug, value: CodinitDebug[keyof CodinitDebug]) { + if (typeof window === 'undefined') { + console.warn('setCodinitDebugProperty called on server, ignoring'); + return; + } + (window as any).__CHEF_DEBUG = (window as any).__CHEF_DEBUG || {}; + (window as any).__CHEF_DEBUG[key] = value; +} diff --git a/codinit-agent/utils/logger.ts b/codinit-agent/utils/logger.ts new file mode 100644 index 00000000..ae624d16 --- /dev/null +++ b/codinit-agent/utils/logger.ts @@ -0,0 +1,66 @@ +import { setCodinitDebugProperty } from './codinitDebug.js'; + +const levelOrder = ['trace', 'debug', 'info', 'warn', 'error'] as const; +type DebugLevel = (typeof levelOrder)[number]; + +type LoggerFunction = (...messages: any[]) => void; + +interface Logger { + trace: LoggerFunction; + debug: LoggerFunction; + info: LoggerFunction; + warn: LoggerFunction; + error: LoggerFunction; +} + +let currentLevel: DebugLevel = 'warn'; + +export const logger: Logger = { + trace: (...messages: any[]) => log('trace', undefined, messages), + debug: (...messages: any[]) => log('debug', undefined, messages), + info: (...messages: any[]) => log('info', undefined, messages), + warn: (...messages: any[]) => log('warn', undefined, messages), + error: (...messages: any[]) => log('error', undefined, messages), +}; + +export function createScopedLogger(scope: string): Logger { + return { + trace: (...messages: any[]) => log('trace', scope, messages), + debug: (...messages: any[]) => log('debug', scope, messages), + info: (...messages: any[]) => log('info', scope, messages), + warn: (...messages: any[]) => log('warn', scope, messages), + error: (...messages: any[]) => log('error', scope, messages), + }; +} + +export function codinitSetLogLevel(level: DebugLevel) { + if (!levelOrder.includes(level)) { + throw new Error('bad log level'); + } + + currentLevel = level; +} + +if (typeof window !== 'undefined') { + // Global debugging interface, allowed in production. + setCodinitDebugProperty('setLogLevel', codinitSetLogLevel); +} + +function log(level: DebugLevel, scope: string | undefined, messages: any[]) { + if (levelOrder.indexOf(level) < levelOrder.indexOf(currentLevel)) { + return; + } + + let labelText = `[${level.toUpperCase()}] `; + if (scope) { + labelText = `${labelText}[${scope}] `; + } + + if (typeof window !== 'undefined') { + console.log(labelText, ...messages); + } else { + console.log(labelText, ...messages); + } +} + +export const renderLogger = createScopedLogger('Render'); diff --git a/codinit-agent/utils/path.ts b/codinit-agent/utils/path.ts new file mode 100644 index 00000000..1b891a50 --- /dev/null +++ b/codinit-agent/utils/path.ts @@ -0,0 +1,19 @@ +// Browser-compatible path utilities +import type { ParsedPath } from 'path'; +import pathBrowserify from 'path-browserify'; + +/** + * A browser-compatible path utility that mimics Node's path module + * Using path-browserify for consistent behavior in browser environments + */ +export const path = { + join: (...paths: string[]): string => pathBrowserify.join(...paths), + dirname: (path: string): string => pathBrowserify.dirname(path), + basename: (path: string, ext?: string): string => pathBrowserify.basename(path, ext), + extname: (path: string): string => pathBrowserify.extname(path), + relative: (from: string, to: string): string => pathBrowserify.relative(from, to), + isAbsolute: (path: string): boolean => pathBrowserify.isAbsolute(path), + normalize: (path: string): string => pathBrowserify.normalize(path), + parse: (path: string): ParsedPath => pathBrowserify.parse(path), + format: (pathObject: ParsedPath): string => pathBrowserify.format(pathObject), +} as const; diff --git a/codinit-agent/utils/renderDirectory.ts b/codinit-agent/utils/renderDirectory.ts new file mode 100644 index 00000000..b96ea0fd --- /dev/null +++ b/codinit-agent/utils/renderDirectory.ts @@ -0,0 +1,9 @@ +interface DirEnt { + name: T; + isFile(): boolean; + isDirectory(): boolean; +} + +export function renderDirectory(children: DirEnt[]) { + return `Directory:\n${children.map((child) => `- ${child.name} (${child.isDirectory() ? 'dir' : 'file'})`).join('\n')}`; +} diff --git a/codinit-agent/utils/renderFile.ts b/codinit-agent/utils/renderFile.ts new file mode 100644 index 00000000..30a2ab8b --- /dev/null +++ b/codinit-agent/utils/renderFile.ts @@ -0,0 +1,23 @@ +export function renderFile(content: string, viewRange?: [number, number]) { + let lines = content.split('\n').map((line, index) => `${index + 1}: ${line}`); + if (viewRange) { + // An array of two integers specifying the start and end line numbers + // to view. Line numbers are 1-indexed, and -1 for the end line means + // read to the end of the file. This parameter only applies when + // viewing files, not directories. + const [start, end] = viewRange; + if (start < 1) { + throw new Error('Invalid range: start must be greater than 0'); + } + if (end === -1) { + lines = lines.slice(start - 1); + } else { + lines = lines.slice(start - 1, end); + } + } + // The view tool result includes file contents with line numbers prepended to each line + // (e.g., “1: def is_prime(n):”). Line numbers are not required, but they are essential + // for successfully using the view_range parameter to examine specific sections of files + // and the insert_line parameter to add content at precise locations. + return lines.join('\n'); +} diff --git a/codinit-agent/utils/shell.ts b/codinit-agent/utils/shell.ts new file mode 100644 index 00000000..1d2292e7 --- /dev/null +++ b/codinit-agent/utils/shell.ts @@ -0,0 +1,104 @@ +/** + * Cleans and formats terminal output while preserving structure and paths + * Handles ANSI, OSC, and various terminal control sequences + */ +export function cleanTerminalOutput(input: string): string { + // Step 1: Remove OSC sequences (including those with parameters) + const removeOsc = input + .replace(/\x1b\](\d+;[^\x07\x1b]*|\d+[^\x07\x1b]*)\x07/g, '') + .replace(/\](\d+;[^\n]*|\d+[^\n]*)/g, ''); + + // Step 2: Remove ANSI escape sequences and color codes more thoroughly + const removeAnsi = removeOsc + // Remove all escape sequences with parameters + .replace(/\u001b\[[\?]?[0-9;]*[a-zA-Z]/g, '') + .replace(/\x1b\[[\?]?[0-9;]*[a-zA-Z]/g, '') + // Remove color codes + .replace(/\u001b\[[0-9;]*m/g, '') + .replace(/\x1b\[[0-9;]*m/g, '') + // Clean up any remaining escape characters + .replace(/\u001b/g, '') + .replace(/\x1b/g, ''); + + // Step 3: Clean up carriage returns and newlines + const cleanNewlines = removeAnsi + .replace(/\r\n/g, '\n') + .replace(/\r/g, '\n') + .replace(/\n{3,}/g, '\n\n'); + + // Step 4: Add newlines at key breakpoints while preserving paths + const formatOutput = cleanNewlines + // Preserve prompt line + .replace(/^([~\/][^\n❯]+)❯/m, '$1\n❯') + // Add newline before command output indicators + .replace(/(?/g, '\n>') + // Add newline before error keywords without breaking paths + .replace(/(? line.trim()) + .filter((line) => line.length > 0) + .join('\n'); + + // Step 6: Final cleanup + return cleanSpaces + .replace(/\n{3,}/g, '\n\n') // Replace multiple newlines with double newlines + .replace(/:\s+/g, ': ') // Normalize spacing after colons + .replace(/\s{2,}/g, ' ') // Remove multiple spaces + .replace(/^\s+|\s+$/g, '') // Trim start and end + .replace(/\u0000/g, ''); // Remove null characters +} + +const BANNED_LINES = ['transforming (', 'computing gzip size', 'idealTree buildDeps', 'timing reify:unpack']; + +// Taken from https://github.com/sindresorhus/cli-spinners +const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']; + +// Cleaning terminal output helps the agent focus on the important parts and +// not waste input tokens. +export function cleanCodinitOutput(output: string) { + output = cleanTerminalOutput(output); + const normalizedNewlines = output.replace('\r\n', '\n').replace('\r', '\n'); + const rawLines = normalizedNewlines.split('\n'); + let lastSpinnerLine: string | null = null; + let lines = []; + for (const line of rawLines) { + if (BANNED_LINES.some((bannedLine) => line.includes(bannedLine))) { + continue; + } + if (SPINNER_FRAMES.some((spinnerFrame) => line.startsWith(spinnerFrame))) { + const lineWithoutSpinner = line.slice(1).trim(); + if (lineWithoutSpinner === lastSpinnerLine) { + continue; + } + lastSpinnerLine = lineWithoutSpinner; + lines.push(lineWithoutSpinner); + continue; + } + lines.push(line); + } + + // Remove all esbuild "could not resolve" errors except the last one + const firstEsbuildNodeErrror = lines.findIndex((line) => line.includes('[ERROR] Could not resolve')); + if (firstEsbuildNodeErrror !== -1) { + const lastEsbuildNodeError = lines.findLastIndex((line) => line.includes('[ERROR] Could not resolve')); + if (lastEsbuildNodeError !== -1) { + // just keep the last one + lines = [...lines.slice(0, firstEsbuildNodeErrror), ...lines.slice(lastEsbuildNodeError)]; + } + } + + const result = lines.join('\n'); + if (output !== result) { + console.log(`Sanitized output: ${output.length} -> ${result.length}`); + } + return result; +} diff --git a/codinit-agent/utils/stripIndent.ts b/codinit-agent/utils/stripIndent.ts new file mode 100644 index 00000000..5baa0524 --- /dev/null +++ b/codinit-agent/utils/stripIndent.ts @@ -0,0 +1,34 @@ +export function stripIndents(value: string): string; +export function stripIndents(strings: TemplateStringsArray, ...values: any[]): string; +export function stripIndents(arg0: string | TemplateStringsArray, ...values: any[]) { + if (typeof arg0 !== 'string') { + const processedString = arg0.reduce((acc, curr, i) => { + acc += curr + (values[i] ?? ''); + return acc; + }, ''); + + return _stripIndents(processedString); + } + + return _stripIndents(arg0); +} + +function _stripIndents(value: string) { + let minIndent = Infinity; + for (const line of value.split('\n')) { + const trimmed = line.trimStart(); + if (trimmed.length === 0) { + continue; + } + minIndent = Math.min(minIndent, line.length - trimmed.length); + } + if (minIndent === Infinity) { + return value; + } + return value + .split('\n') + .map((line) => line.slice(minIndent).trimEnd()) + .filter((line) => line.length > 0) + .join('\n') + .replace(/[\r\n]$/, ''); +} diff --git a/codinit-agent/utils/unreachable.ts b/codinit-agent/utils/unreachable.ts new file mode 100644 index 00000000..035c22fa --- /dev/null +++ b/codinit-agent/utils/unreachable.ts @@ -0,0 +1,3 @@ +export function unreachable(message: string): never { + throw new Error(`Unreachable: ${message}`); +} diff --git a/codinit-agent/utils/workDir.ts b/codinit-agent/utils/workDir.ts new file mode 100644 index 00000000..38e60d20 --- /dev/null +++ b/codinit-agent/utils/workDir.ts @@ -0,0 +1,21 @@ +import { WORK_DIR } from '../constants.js'; +import { path } from './path.js'; + +// Relative to `WORK_DIR` +// Relative to `WORK_DIR` +export type RelativePath = string; +export type AbsolutePath = string; + +export const getAbsolutePath = (pathString: string): AbsolutePath => { + if (pathString.startsWith(WORK_DIR)) { + return pathString as AbsolutePath; + } + return path.join(WORK_DIR, pathString) as AbsolutePath; +}; + +export const getRelativePath = (pathString: string): RelativePath => { + if (pathString.startsWith(WORK_DIR)) { + return path.relative(WORK_DIR, pathString) as RelativePath; + } + return pathString as RelativePath; +}; diff --git a/codinit-agent/utils/zodUtil.ts b/codinit-agent/utils/zodUtil.ts new file mode 100644 index 00000000..c2407319 --- /dev/null +++ b/codinit-agent/utils/zodUtil.ts @@ -0,0 +1,17 @@ +import type { z, SafeParseReturnType, ZodTypeDef } from 'zod'; + +const previouslySeen: WeakSet = new WeakSet(); + +export function loggingSafeParse( + schema: z.ZodSchema, + args: any, +): SafeParseReturnType { + const result = schema.safeParse(args); + if (!result.success && !previouslySeen.has(args)) { + if (typeof args === 'object' && args !== null) { + console.error('Failed to parse zod', args, result.error); + previouslySeen.add(args); + } + } + return result; +} diff --git a/codinit-agent/vitest.config.mts b/codinit-agent/vitest.config.mts new file mode 100644 index 00000000..94ede10e --- /dev/null +++ b/codinit-agent/vitest.config.mts @@ -0,0 +1,3 @@ +import { defineConfig } from 'vitest/config'; + +export default defineConfig({}); diff --git a/package.json b/package.json index 73716cdb..5a21e053 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "license": "MIT", "sideEffects": false, "type": "module", - "version": "1.2.3", + "version": "1.2.5", "author": { "name": "Gerome-Elassaad", "email": "contact@codinit.dev" @@ -107,10 +107,12 @@ "@remix-run/cloudflare-pages": "^2.17.1", "@remix-run/node": "^2.17.2", "@remix-run/react": "^2.17.3", + "@sentry/remix": "^10.35.0", "@tanstack/react-virtual": "^3.13.12", "@types/unist": "^3.0.3", "@uiw/codemirror-theme-vscode": "^4.25.2", "@unocss/reset": "^0.61.9", + "@vercel/functions": "^3.3.6", "@webcontainer/api": "1.6.1-internal.1", "@webcontainer/test": "^0.2.0", "@xterm/addon-fit": "^0.10.0", @@ -122,6 +124,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", + "convex": "^1.0.1", "date-fns": "^3.6.0", "diff": "^5.2.0", "dotenv": "^16.6.1", @@ -195,12 +198,12 @@ "@types/react-dom": "^18.3.7", "@types/react-window": "^1.8.8", "@vitejs/plugin-react": "^4.7.0", - "@vitest/browser": "^3.1.0", + "@vitest/browser": "^3.2.4", "baseline-browser-mapping": "^2.9.11", "concurrently": "^8.2.2", "cross-env": "^7.0.3", "electron": "^35.7.5", - "electron-builder": "^26.0.12", + "electron-builder": "^26.4.0", "eslint": "^9.38.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-prettier": "^5.5.4", @@ -230,7 +233,9 @@ "pnpm": { "overrides": { "wrangler": "^4.42.1", - "jsondiffpatch": "^0.7.2" + "jsondiffpatch": "^0.7.2", + "electron-builder-squirrel-windows": "26.4.0", + "dmg-builder": "26.4.0" }, "peerDependencyRules": { "allowedVersions": { diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml new file mode 100644 index 00000000..4a97acd1 --- /dev/null +++ b/pnpm-workspace.yaml @@ -0,0 +1,5 @@ +packages: + - 'codinit-agent' + - 'test-agent' + # You can add more workspace packages here later if needed + # - "packages/*" diff --git a/reproduce_issue.ts b/reproduce_issue.ts new file mode 100644 index 00000000..be46a255 --- /dev/null +++ b/reproduce_issue.ts @@ -0,0 +1,41 @@ + +import { StreamingMessageParser } from './codinit-agent/message-parser.js'; +import { makePartId } from './codinit-agent/partId.js'; + +const parser = new StreamingMessageParser(); + +function test(input: string) { + const partId = makePartId('test-message', Math.floor(Math.random() * 1000)); + console.log(`Input: "${input}"`); + + let message = ''; + let result = ''; + const chunks = input.split(''); // Simulate char-by-char streaming like the test + + try { + for (const chunk of chunks) { + message += chunk; + result += parser.parse(partId, message); + } + console.log(`Output: "${result}"`); + + // Expected output logic: + // If input is "Foo bar r.json() as Promise) + .then((releases) => releases.find((release: any) => release.prerelease === false)); + +const downloadBinaryMutex = new Mutex(); +const portMutex = new Mutex(); + +export interface CodinitBackend { + port: number; + siteProxyPort: number; + process: ChildProcess; + project: CodinitProject; +} + +export async function withCodinitBackend(backendDir: string, fn: (backend: CodinitBackend) => Promise): Promise { + const storageDir = path.join(backendDir, 'codinit_local_storage'); + mkdirSync(storageDir, { recursive: true }); + + const sqlitePath = path.join(backendDir, 'codinit_local_backend.sqlite3'); + const codinitBinary = await downloadCodinitBinary(); + + const { port, siteProxyPort, process } = await portMutex.runExclusive(async () => { + const port = await portfinder.getPortPromise(); + // NB: `port` is currently unused, but we want `portFinder` to pick something else. + const siteProxyPort = await portfinder.getPortPromise({ port: port + 1 }); + const args = [ + '--port', + port.toString(), + '--site-proxy-port', + siteProxyPort.toString(), + '--instance-name', + instance_name, + '--instance-secret', + instance_secret, + '--local-storage', + storageDir, + sqlitePath, + ]; + const process = spawn(codinitBinary, args, { + cwd: backendDir, + stdio: [ + null, + openSync(path.join(backendDir, 'backend.stdout.log'), 'w'), + openSync(path.join(backendDir, 'backend.stderr.log'), 'w'), + ], + }); + await healthcheck(port); + if (process.exitCode !== null) { + throw new Error(`Codinit backend exited with code ${process.exitCode}`); + } + return { port, siteProxyPort, process }; + }); + try { + const project = { + deploymentUrl: `http://localhost:${port}`, + deploymentName: instance_name, + projectSlug: 'codinit', + teamSlug: 'codinit', + token: admin_key, + }; + return await fn({ port, siteProxyPort, process, project }); + } finally { + process.kill(); + } +} + +export const deploy = wrapTraced(async function deploy(repoDir: string, backend: CodinitBackend) { + const args = ['codinit', 'dev', '--once', '--admin-key', admin_key, '--url', backend.project.deploymentUrl]; + const { stdout, stderr } = await execFile('npx', args, { cwd: repoDir }); + return cleanCodinitOutput(stdout.toString() + stderr.toString()); +}); + +export const runTypecheck = wrapTraced(async function runTypecheck(repoDir: string) { + const args = ['tsc', '--noEmit', '--project', 'tsconfig.app.json']; + const { stdout, stderr } = await execFile('npx', args, { cwd: repoDir }); + return cleanCodinitOutput(stdout.toString() + stderr.toString()); +}); + +export const npmInstall = wrapTraced(async function npmInstall(repoDir: string, packages: string[]) { + const args = ['npm', 'install', ...packages]; + const { stdout, stderr } = await execFile('npx', args, { cwd: repoDir }); + return cleanCodinitOutput(stdout.toString() + stderr.toString()); +}); + +const downloadCodinitBinary = wrapTraced(async function downloadCodinitBinary() { + const latest = await codinitRelease; + const version = latest['tag_name']; + const arch = ({ x64: 'x86_64', arm64: 'aarch64' } as Record)[os.arch()]; + if (!arch) { + throw new Error(`Unsupported architecture: ${os.arch()}`); + } + const tripleOs = { + darwin: 'apple-darwin', + linux: 'unknown-linux-gnu', + win32: 'pc-windows-msvc', + }[os.platform() as string]; + if (!tripleOs) { + throw new Error(`Unsupported platform: ${os.platform()}`); + } + + const targetPattern = `codinit-local-backend-${arch}-${tripleOs}`; + const matchingAsset = latest['assets'].find((asset: any) => asset['name'].includes(targetPattern)); + if (!matchingAsset) { + throw new Error(`Could not find matching asset for ${targetPattern}`); + } + + const binaryDir = path.join(os.homedir(), '.codinit-evals', 'releases'); + mkdirSync(binaryDir, { recursive: true }); + + // Include version in binary name + const binaryName = `codinit-local-backend-${version}${os.platform() === 'win32' ? '.exe' : ''}`; + const binaryPath = path.join(binaryDir, binaryName); + + return await downloadBinaryMutex.runExclusive(async () => { + if (existsSync(binaryPath)) { + return binaryPath; + } + + logger.info('Latest release:', version); + const url = matchingAsset['browser_download_url']; + logger.info('Downloading:', url); + + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Failed to download: ${response.statusText}`); + } + + const zipBuffer = await response.arrayBuffer(); + const zip = await JSZip.loadAsync(zipBuffer); + + // Extract the binary + const extractedBinary = await zip.file('codinit-local-backend')?.async('nodebuffer'); + if (!extractedBinary) { + throw new Error('Could not find binary in zip file'); + } + + // Write the binary to disk + mkdirSync(path.dirname(binaryPath), { recursive: true }); + writeFileSync(binaryPath, extractedBinary); + + // Make the binary executable on Unix systems + if (os.platform() !== 'win32') { + chmodSync(binaryPath, 0o755); + } + + logger.info('Extracted binary to:', binaryPath); + return binaryPath; + }); +}); + +const healthcheck = wrapTraced(async function healthcheck(port: number) { + const deadline = Date.now() + 10000; + let numAttempts = 0; + while (true) { + try { + const response = await fetch(`http://localhost:${port}/version`); + if (response.ok) { + return true; + } + } catch (e) { + const remaining = deadline - Date.now(); + if (remaining < 0) { + throw e; + } + await new Promise((resolve) => setTimeout(resolve, Math.min(0.1 * 2 ** numAttempts, remaining))); + numAttempts++; + } + } +}); diff --git a/test-agent/codinitScorer.ts b/test-agent/codinitScorer.ts new file mode 100644 index 00000000..32e8256a --- /dev/null +++ b/test-agent/codinitScorer.ts @@ -0,0 +1,12 @@ +import * as braintrust from 'braintrust'; +import type { CodinitResult } from './types.js'; + +export async function codinitScorer(props: braintrust.EvalScorerArgs) { + return [ + { + name: '1/Deploys', + score: props.output.success ? 1 / Math.max(1, props.output.numDeploys) : 0, + }, + { name: 'isSuccess', score: props.output.success ? 1 : 0 }, + ]; +} diff --git a/test-agent/codinitTask.ts b/test-agent/codinitTask.ts new file mode 100644 index 00000000..a984a489 --- /dev/null +++ b/test-agent/codinitTask.ts @@ -0,0 +1,452 @@ +import { type CoreMessage, generateText, type LanguageModelUsage } from 'ai'; +import * as walkdir from 'walkdir'; +import { path } from 'codinit-agent/utils/path'; +import type { CodinitResult, CodinitModel } from './types'; +import { copyFileSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'fs'; +import { execFileSync } from 'child_process'; +import { ChatContextManager } from 'codinit-agent/ChatContextManager'; +import type { UIMessage } from 'ai'; +import { deploy, npmInstall, runTypecheck } from './codinitBackend'; +import { StreamingMessageParser } from 'codinit-agent/message-parser'; +import { withCodinitBackend } from './codinitBackend'; +import { initializeCodinitAuth } from 'codinit-agent/codinitAuth'; +import { deployTool } from 'codinit-agent/tools/deploy'; +import { ROLE_SYSTEM_PROMPT } from 'codinit-agent/prompts/system'; +import { generateId } from 'ai'; +import type { CodinitToolSet, SystemPromptOptions } from 'codinit-agent/types'; +import { npmInstallTool, npmInstallToolParameters } from 'codinit-agent/tools/npmInstall'; +import { lookupDocsTool } from 'codinit-agent/tools/lookupDocs'; +import { getCodinitDeploymentNameTool } from 'codinit-agent/tools/getCodinitDeploymentName'; +import { cleanupAssistantMessages } from 'codinit-agent/cleanupAssistantMessages'; +import { generalSystemPrompt } from 'codinit-agent/prompts/system'; +import { makePartId } from 'codinit-agent/partId'; +import { logger } from 'codinit-agent/utils/logger'; +import { traced, wrapTraced } from 'braintrust'; +import { viewTool } from 'codinit-agent/tools/view'; +import { editTool, editToolParameters } from 'codinit-agent/tools/edit'; +import { renderFile } from 'codinit-agent/utils/renderFile'; +import { renderDirectory } from 'codinit-agent/utils/renderDirectory'; +import { viewParameters } from 'codinit-agent/tools/view'; +import { lookupDocsParameters, docs, type DocKey } from 'codinit-agent/tools/lookupDocs'; + +const MAX_STEPS = 32; +const MAX_DEPLOYS = 10; +const OUTPUT_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.json']; +const IGNORED_FILENAMES = [ + '.gitignore', + 'node_modules', + 'package-lock.json', + 'tsconfig.node.json', + 'tailwind.config.js', + 'tsconfig.app.json', + 'tsconfig.json', + 'components.json', + 'vite.config.ts', + 'vite-env.d.ts', +]; + +const TEMPLATE_DIR = '../template'; + +export async function codinitTask(model: CodinitModel, outputDir: string, userMessage: string): Promise { + if (!path.isAbsolute(outputDir)) { + throw new Error(`outputDir ${outputDir} must be an absolute path`); + } + + const taskDir = path.join(outputDir, `task-${generateId()}`); + mkdirSync(taskDir, { recursive: true }); + + const repoDir = await setupRepoDir(taskDir); + + const backendDir = path.join(taskDir, 'backend'); + mkdirSync(backendDir, { recursive: true }); + const { numDeploys, usage, success } = await withCodinitBackend(backendDir, async (backend) => { + const contextManager = new ChatContextManager( + () => undefined, + () => ({}), + () => new Map(), + ); + + const messageParser = new StreamingMessageParser({ + callbacks: { + onActionClose: (data) => { + if (data.action.type === 'file' && !IGNORED_FILENAMES.includes(data.action.filePath)) { + const filePath = path.join(repoDir, data.action.filePath); + logger.info(`Writing to ${filePath}`); + mkdirSync(path.dirname(filePath), { recursive: true }); + writeFileSync(filePath, data.action.content); + } + }, + }, + }); + + // TODO: Set up OpenAI + Resend proxies. + logger.info('Initializing codinit auth'); + await wrapTraced(initializeCodinitAuth)(backend.project); + await deploy(repoDir, backend); + + const initialUserMessage: UIMessage = { + id: generateId(), + role: 'user', + content: userMessage, + parts: [ + { + type: 'text', + text: userMessage, + }, + ], + }; + const opts: SystemPromptOptions = { + enableBulkEdits: true, + includeTemplate: true, + usingOpenAi: model.name.startsWith('gpt-'), + usingGoogle: model.name.startsWith('gemini-'), + + // TODO: We need to set up a Codinit deployment running the `codinit` + // app to setup the OpenAI and Resend proxies + manage their tokens. + // For now, we are enabling the proxies to mirror the behavior of production. These + // proxies should never be used in the test kitchen. + openaiProxyEnabled: true, + resendProxyEnabled: true, + enableResend: false, + }; + const assistantMessage: UIMessage = { + id: generateId(), + role: 'assistant', + content: '', + parts: [], + }; + let numDeploys = 0; + let success: boolean; + let lastDeploySuccess = false; + const totalUsage: LanguageModelUsage = { + promptTokens: 0, + completionTokens: 0, + totalTokens: 0, + }; + while (true) { + if (assistantMessage.parts.length >= MAX_STEPS) { + logger.error('Reached max steps, ending test.'); + success = false; + break; + } + if (numDeploys >= MAX_DEPLOYS) { + logger.error('Reached max deploys, ending test.'); + success = false; + break; + } + const messages = [initialUserMessage]; + if (assistantMessage.parts.length > 0) { + messages.push(assistantMessage); + } + const minCollapsedMessagesSize = 8192; + const maxCollapsedMessagesSize = 65536; + const { messages: context } = contextManager.prepareContext( + messages, + maxCollapsedMessagesSize, + minCollapsedMessagesSize, + ); + const start = performance.now(); + logger.info('Generating...'); + const response = await invokeGenerateText(model, opts, context); + const partId = makePartId(assistantMessage.id, assistantMessage.parts.length); + assistantMessage.content += response.text; + if (response.text) { + assistantMessage.parts.push({ + type: 'text', + text: response.text, + }); + } + const parsed = messageParser.parse(partId, response.text); + logger.info( + `Time taken: ${performance.now() - start}ms\nUsage: ${JSON.stringify(response.usage)}\nMessage: ${parsed}`, + ); + totalUsage.promptTokens += response.usage.promptTokens; + totalUsage.completionTokens += response.usage.completionTokens; + totalUsage.totalTokens += response.usage.totalTokens; + if (response.finishReason == 'stop') { + success = lastDeploySuccess; + break; + } + if (response.finishReason === 'length') { + continue; + } + if (response.finishReason != 'tool-calls') { + throw new Error(`Unknown finish reason: ${response.finishReason}`); + } + if (response.toolCalls.length < 1) { + throw new Error('Expected at least one tool call'); + } + for (const toolCall of response.toolCalls) { + if (!toolCall) { + throw new Error('Expected tool call to be non-null'); + } + + let toolCallResult: string; + try { + switch (toolCall.toolName) { + case 'edit': { + const args = editToolParameters.parse(toolCall.args); + const filePath = path.join(repoDir, cleanFilePath(args.path)); + let content: string; + try { + content = readFileSync(filePath, 'utf8'); + } catch (e: any) { + throw new Error(`Could not read ${args.path}: ${e.message}`); + } + + if (args.old.length > 1024) { + throw new Error(`Old text must be less than 1024 characters: ${args.old}`); + } + if (args.new.length > 1024) { + throw new Error(`New text must be less than 1024 characters: ${args.new}`); + } + const matchPos = content.indexOf(args.old); + if (matchPos === -1) { + throw new Error(`Old text not found: ${args.old}`); + } + const secondMatchPos = content.indexOf(args.old, matchPos + args.old.length); + if (secondMatchPos !== -1) { + throw new Error(`Old text found multiple times: ${args.old}`); + } + content = content.replace(args.old, args.new); + writeFileSync(filePath, content); + toolCallResult = `Successfully edited ${args.path}`; + break; + } + case 'view': { + const args = viewParameters.parse(toolCall.args); + const filePath = path.join(repoDir, cleanFilePath(args.path)); + try { + const stats = statSync(filePath); + if (stats.isDirectory()) { + const files = walkdir.sync(filePath); + toolCallResult = renderDirectory( + files.map((file: string) => ({ + name: file, + isFile: () => !stats.isDirectory(), + isDirectory: () => stats.isDirectory(), + })), + ); + } else { + const fileContent = readFileSync(filePath, 'utf8'); + if (args.view_range && args.view_range.length !== 2) { + throw new Error('When provided, view_range must be an array of two numbers'); + } + toolCallResult = renderFile(fileContent, args.view_range as [number, number]); + } + } catch (e: any) { + throw new Error(`Could not read ${args.path}: ${e.message}`); + } + break; + } + case 'lookupDocs': { + const args = lookupDocsParameters.parse(toolCall.args); + const docsToLookup = args.docs; + const results: string[] = []; + + for (const doc of docsToLookup) { + if (doc in docs) { + results.push(docs[doc as DocKey]); + } else { + throw new Error(`Could not find documentation for component: ${doc}. It may not yet be supported.`); + } + } + + toolCallResult = results.join('\n\n'); + break; + } + case 'deploy': { + numDeploys++; + try { + toolCallResult = await deploy(repoDir, backend); + } catch (e: any) { + toolCallResult = `\n\nError: [CodinitTypecheck] ${e.message}`; + lastDeploySuccess = false; + break; + } + try { + toolCallResult += await runTypecheck(repoDir); + } catch (e: any) { + toolCallResult += `\n\nError: [FrontendTypecheck] ${e.message}`; + lastDeploySuccess = false; + break; + } + lastDeploySuccess = true; + if (numDeploys == 1 && lastDeploySuccess) { + toolCallResult += '\n\nDev server started successfully!'; + } + logger.info('Successfully deployed'); + break; + } + case 'npmInstall': { + const args = npmInstallToolParameters.parse(toolCall.args); + const packages = args.packages.split(' '); + toolCallResult = await npmInstall(repoDir, packages); + break; + } + case 'getCodinitDeploymentName': { + toolCallResult = backend.project.deploymentName; + break; + } + default: + throw new Error(`Unknown tool call: ${JSON.stringify(toolCall)}`); + } + } catch (e: any) { + logger.info('Tool call failed', e); + let message = e.toString(); + if (!message.startsWith('Error:')) { + message = 'Error: ' + message; + } + toolCallResult = message; + } + assistantMessage.parts.push({ + type: 'tool-invocation', + toolInvocation: { + toolCallId: toolCall.toolCallId, + toolName: toolCall.toolName, + state: 'result', + args: toolCall.args, + result: toolCallResult, + }, + }); + } + } + return { + success, + numDeploys, + usage: totalUsage, + }; + }); + const files: Record = {}; + const repoPaths = walkdir.sync(repoDir, { + filter: (directory: string, files: string[]) => { + return files.filter((file: string) => !IGNORED_FILENAMES.includes(file)); + }, + }); + for (const repoPath of repoPaths) { + const relativePath = path.relative(repoDir, repoPath); + if (relativePath.startsWith('codinit/_generated/')) { + continue; + } + const ext = path.extname(relativePath); + if (!OUTPUT_EXTENSIONS.includes(ext)) { + continue; + } + if (!statSync(repoPath).isFile()) { + continue; + } + if (IGNORED_FILENAMES.includes(relativePath)) { + continue; + } + files[relativePath] = readFileSync(repoPath, 'utf8'); + } + return { + success, + numDeploys, + usage, + files, + }; +} + +const setupRepoDir = wrapTraced(async function setupRepoDir(taskDir: string) { + const repoDir = path.join(taskDir, 'repo'); + mkdirSync(repoDir, { recursive: true }); + await copyFiles(repoDir); + await installDependencies(repoDir); + return repoDir; +}); + +const copyFiles = wrapTraced(async function copyFiles(repoDir: string) { + logger.info('Setting up template in', repoDir); + mkdirSync(repoDir, { recursive: true }); + + const stdout = execFileSync('/usr/bin/git', ['ls-files'], { + cwd: TEMPLATE_DIR, + encoding: 'utf8', + }); + if (!stdout) { + throw new Error('No output from git ls-files'); + } + const templateFiles = stdout + .trim() + .split('\n') + .filter((file) => file.length > 0); + for (const file of templateFiles) { + const sourcePath = path.join(TEMPLATE_DIR, file); + const targetPath = path.join(repoDir, file); + + // Create parent directories if they don't exist + mkdirSync(path.dirname(targetPath), { recursive: true }); + + // Copy the file + copyFileSync(sourcePath, targetPath); + } +}); + +const installDependencies = wrapTraced(async function installDependencies(repoDir: string) { + execFileSync('npm', ['install'], { cwd: repoDir }); +}); + +async function invokeGenerateText(model: CodinitModel, opts: SystemPromptOptions, context: UIMessage[]) { + return traced( + async (span: any) => { + const messages: CoreMessage[] = [ + { + role: 'system', + content: ROLE_SYSTEM_PROMPT, + }, + { + role: 'system', + content: generalSystemPrompt(opts), + }, + ...cleanupAssistantMessages(context), + ]; + try { + const tools: CodinitToolSet = { + deploy: deployTool, + npmInstall: npmInstallTool, + lookupDocs: lookupDocsTool(), + getCodinitDeploymentName: getCodinitDeploymentNameTool, + }; + tools.view = viewTool; + tools.edit = editTool; + const result = await generateText({ + model: model.ai, + maxTokens: model.maxTokens, + messages, + tools, + maxSteps: 64, + }); + span.log({ + input: messages, + output: { + text: result.text, + toolCalls: result.toolCalls, + }, + metrics: { + prompt_tokens: result.usage.promptTokens, + completion_tokens: result.usage.completionTokens, + total_tokens: result.usage.totalTokens, + }, + metadata: { + model: model.model_slug, + }, + }); + return result; + } catch (e: any) { + span.log({ + input: messages, + }); + throw e; + } + }, + { + type: 'llm', + name: model.name, + }, + ); +} + +function cleanFilePath(filePath: string) { + return filePath.replace('/home/project/', '/'); +} diff --git a/test-agent/initialGeneration.eval.ts b/test-agent/initialGeneration.eval.ts new file mode 100644 index 00000000..06e787f4 --- /dev/null +++ b/test-agent/initialGeneration.eval.ts @@ -0,0 +1,93 @@ +import * as braintrust from 'braintrust'; +import { SUGGESTIONS } from 'codinit-agent/constants.js'; +import { mkdtempSync } from 'fs'; +import path from 'path'; +import os from 'os'; +import { anthropic } from '@ai-sdk/anthropic'; +import { openai } from '@ai-sdk/openai'; +import { google } from '@ai-sdk/google'; +import { xai } from '@ai-sdk/xai'; +import { codinitTask } from './codinitTask.js'; +import { codinitScorer } from './codinitScorer.js'; +import type { CodinitModel } from './types.js'; +import * as net from 'net'; + +const CHEF_PROJECT = 'codinit'; + +function codinitEval(model: CodinitModel) { + const experimentName = `${CHEF_PROJECT}-${model.name}`; + let outputDir = process.env.OUTPUT_TEMPDIR; + if (!outputDir) { + outputDir = mkdtempSync(path.join(os.tmpdir(), 'codinit-eval')); + } + const environment = process.env.ENVIRONMENT ?? 'dev'; + return braintrust.Eval(CHEF_PROJECT, { + experimentName, + data: SUGGESTIONS.map((s) => ({ input: s.prompt })), + task: (input: string) => codinitTask(model, outputDir!, input), + scores: [codinitScorer], + maxConcurrency: 2, + metadata: { + model: model.name, + model_slug: model.model_slug, + environment, + tempdir: outputDir, + }, + }); +} + +// This is tricky: Node v17 and higher resolve `localhost` IPv6 (::1), which can fail +// if the server only binds to IPv4. Use `setDefaultAutoSelectFamily(true)` to tell +// Node to use Happy Eyeballs to detect IPv6 support. +// Source: https://github.com/nuxt/nuxt/issues/12358 +net.setDefaultAutoSelectFamily(true); + +if (process.env.ANTHROPIC_API_KEY) { + codinitEval({ + name: 'claude-4-sonnet', + model_slug: 'claude-sonnet-4-20250514', + ai: anthropic('claude-sonnet-4-20250514'), + maxTokens: 16384, + }); + codinitEval({ + name: 'claude-4.5-sonnet', + model_slug: 'claude-sonnet-4-5', + ai: anthropic('claude-sonnet-4-5'), + maxTokens: 16384, + }); +} + +// Braintrust sets the OPENAI_API_KEY environment variable even if we don't set it, so we need +// to manually check the USE_OPENAI environment variable to determine if we should use OpenAI. +if (process.env.OPENAI_API_KEY && process.env.USE_OPENAI === 'true') { + codinitEval({ + name: 'gpt-4.1', + model_slug: 'gpt-4.1', + ai: openai('gpt-4.1'), + maxTokens: 8192, + }); + codinitEval({ + name: 'gpt-5', + model_slug: 'gpt-5', + ai: openai('gpt-5'), + maxTokens: 8192, + }); +} + +if (process.env.GOOGLE_GENERATIVE_AI_API_KEY) { + codinitEval({ + name: 'gemini-2.5-pro', + model_slug: 'gemini-2.5-pro', + ai: google('gemini-2.5-pro'), + maxTokens: 20000, + }); +} + +if (process.env.XAI_API_KEY) { + codinitEval({ + name: 'grok-3-mini', + model_slug: 'grok-3-mini', + ai: xai('grok-3-mini'), + maxTokens: 8192, + }); +} diff --git a/test-agent/main.ts b/test-agent/main.ts new file mode 100644 index 00000000..d3525f4a --- /dev/null +++ b/test-agent/main.ts @@ -0,0 +1,17 @@ +import { anthropic } from '@ai-sdk/anthropic'; +import { codinitTask } from './codinitTask.js'; +import type { CodinitModel } from './types.js'; +import { mkdirSync } from 'fs'; +import { codinitSetLogLevel } from 'codinit-agent/utils/logger.js'; + +codinitSetLogLevel('info'); + +const model: CodinitModel = { + name: 'claude-4-sonnet', + model_slug: 'claude-sonnet-4-20250514', + ai: anthropic('claude-sonnet-4-20250514'), + maxTokens: 16384, +}; +mkdirSync('/tmp/backend', { recursive: true }); +const result = await codinitTask(model, '/tmp/backend', 'Make me a chat app'); +console.log(result); diff --git a/test-agent/package.json b/test-agent/package.json new file mode 100644 index 00000000..e5634ae8 --- /dev/null +++ b/test-agent/package.json @@ -0,0 +1,21 @@ +{ + "name": "test-agent", + "version": "0.1.0", + "type": "module", + "dependencies": { + "@ai-sdk/anthropic": "^1.2.4", + "@ai-sdk/google": "^1.2.11", + "@ai-sdk/openai": "^1.3.6", + "@ai-sdk/xai": "^1.2.13", + "async-mutex": "^0.5.0", + "braintrust": "^0.0.199", + "codinit-agent": "workspace:*", + "portfinder": "^1.0.36", + "typescript": "^5.4.2", + "walkdir": "^0.4.1" + }, + "devDependencies": { + "@types/node": "^20.17.30" + }, + "packageManager": "pnpm@9.5.0" +} \ No newline at end of file diff --git a/test-agent/types.ts b/test-agent/types.ts new file mode 100644 index 00000000..29c9aa2c --- /dev/null +++ b/test-agent/types.ts @@ -0,0 +1,15 @@ +import type { LanguageModelUsage, LanguageModelV1 } from 'ai'; + +export type CodinitModel = { + name: string; + model_slug: string; + ai: LanguageModelV1; + maxTokens: number; +}; + +export type CodinitResult = { + success: boolean; + numDeploys: number; + usage: LanguageModelUsage; + files: Record; +}; diff --git a/test-agent/utils.ts b/test-agent/utils.ts new file mode 100644 index 00000000..1a253cd1 --- /dev/null +++ b/test-agent/utils.ts @@ -0,0 +1,13 @@ +import { execFile as execFileCallback, type ExecFileOptions } from 'child_process'; +import { promisify } from 'util'; + +export const promisifyExecFile = promisify(execFileCallback); + +export async function execFile(file: string, args: string[], opts: ExecFileOptions = {}) { + try { + const { stdout, stderr } = await promisifyExecFile(file, args, opts); + return { stdout, stderr }; + } catch (error: any) { + throw new Error(`${error.message}\nstderr: ${error.stderr}\nstdout: ${error.stdout}`); + } +} diff --git a/tsconfig.json b/tsconfig.json index ebdcb182..02c8418d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["DOM", "DOM.Iterable", "ESNext"], + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], "types": [ "@remix-run/cloudflare", "vite/client", @@ -21,11 +25,19 @@ "verbatimModuleSyntax": true, "forceConsistentCasingInFileNames": true, "paths": { - "~/*": ["./app/*"], - "~/docs*": ["./docs/*"], - "#build/*": ["./build/*"] + "~/*": [ + "./app/*" + ], + "~/docs*": [ + "./docs/*" + ], + "codinit-agent/*": [ + "./codinit-agent/*" + ], + "#build/*": [ + "./build/*" + ] }, - "noEmit": true }, "include": [ @@ -36,5 +48,8 @@ "**/.client/**/*.ts", "**/.client/**/*.tsx" ], - "exclude": ["node_modules", "templates/**/*"] -} + "exclude": [ + "node_modules", + "templates/**/*" + ] +} \ No newline at end of file diff --git a/types/codinit-shims.d.ts b/types/codinit-shims.d.ts new file mode 100644 index 00000000..ffa6595d --- /dev/null +++ b/types/codinit-shims.d.ts @@ -0,0 +1,8 @@ + +declare module '@codinit/_generated/api' { + export const internal: any; +} + +declare module '@codinit/schema' { + export type UsageRecord = any; +}