feat(app): implement automated tasks (#1550)

* feat(app): add automated tasks part 1

* feat(automation): implement task automation system with API integration and UI components

* feat(app): improve UI for task page, including attachments and comments

* feat(app): add exaSearch and firecrawl tools for web research

* chore(deps): update @trycompai/db to version 1.3.6 and bump lucide-react to 0.544.0

* chore: fix parsing md

* chore: update imports from @trycompai/ui to @comp/ui

* chore(api): remove obsolete Lambda execution route

---------

Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>

Author: github-actions[bot]

apps/api/src/comments/comments.service.ts

@@ -115,6 +115,7 @@ export class CommentsService {
               id: comment.author.user.id,
               name: comment.author.user.name,
               email: comment.author.user.email,
+              image: comment.author.user.image,
             },
             attachments,
             createdAt: comment.createdAt,
@@ -209,6 +210,7 @@ export class CommentsService {
           id: member.user.id,
           name: member.user.name,
           email: member.user.email,
+          image: member.user.image,
         },
         attachments: result.attachments,
         createdAt: result.comment.createdAt,
@@ -281,6 +283,7 @@ export class CommentsService {
           id: existingComment.author.user.id,
           name: existingComment.author.user.name,
           email: existingComment.author.user.email,
+          image: existingComment.author.user.image,
         },
         attachments,
         createdAt: updatedComment.createdAt,

apps/api/src/comments/dto/comment-responses.dto.ts

@@ -82,6 +82,13 @@ export class AuthorResponseDto {
     example: 'john.doe@company.com',
   })
   email: string;
+
+  @ApiProperty({
+    description: 'User profile image URL',
+    example: 'https://example.com/avatar.jpg',
+    nullable: true,
+  })
+  image: string | null;
 }
 
 export class CommentResponseDto {

apps/app/instrumentation-client.ts

@@ -0,0 +1,14 @@
+// import { initBotId } from 'botid/client/core';
+
+// initBotId({
+//   protect: [
+//     {
+//       path: '/api/chat',
+//       method: 'POST',
+//     },
+//     {
+//       path: '/api/tasks-automations/chat',
+//       method: 'POST',
+//     },
+//   ],
+// });

apps/app/markdown.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string
+  export default content
+}

apps/app/next.config.ts

@@ -5,13 +5,31 @@ import './src/env.mjs';
 const isStandalone = process.env.NEXT_OUTPUT_STANDALONE === 'true';
 
 const config: NextConfig = {
+  turbopack: {
+    rules: {
+      '*.md': {
+        loaders: ['raw-loader'],
+        as: '*.js',
+      },
+    },
+  },
+  // Ensure .md files can be imported as strings during webpack builds
+  webpack: (cfg) => {
+    cfg.module = cfg.module || { rules: [] };
+    cfg.module.rules = cfg.module.rules || [];
+    cfg.module.rules.push({
+      test: /\.md$/,
+      type: 'asset/source',
+    });
+    return cfg;
+  },
   // Use S3 bucket for static assets with app-specific path
   assetPrefix:
     process.env.NODE_ENV === 'production' && process.env.STATIC_ASSETS_URL
       ? `${process.env.STATIC_ASSETS_URL}/app`
       : '',
   reactStrictMode: true,
-  transpilePackages: ['@trycompai/db'],
+  transpilePackages: ['@trycompai/db', '@prisma/client'],
   images: {
     remotePatterns: [
       {

apps/app/package.json

@@ -8,6 +8,7 @@
     "@ai-sdk/provider": "^2.0.0",
     "@ai-sdk/react": "^2.0.0",
     "@ai-sdk/rsc": "^1.0.0",
+    "@aws-sdk/client-lambda": "^3.891.0",
     "@aws-sdk/client-s3": "^3.859.0",
     "@aws-sdk/client-sts": "^3.808.0",
     "@aws-sdk/s3-request-presigner": "^3.859.0",
@@ -25,6 +26,7 @@
     "@dub/embed-react": "^0.0.16",
     "@hookform/resolvers": "^5.1.1",
     "@mendable/firecrawl-js": "^1.24.0",
+    "@monaco-editor/react": "^4.7.0",
     "@nangohq/frontend": "^0.53.2",
     "@next/third-parties": "^15.3.1",
     "@number-flow/react": "^0.5.9",
@@ -49,13 +51,16 @@
     "@trycompai/db": "^1.3.6",
     "@trycompai/email": "workspace:*",
     "@types/canvas-confetti": "^1.9.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/three": "^0.180.0",
     "@uploadthing/react": "^7.3.0",
     "@upstash/ratelimit": "^2.0.5",
+    "@vercel/sandbox": "^0.0.21",
     "@vercel/sdk": "^1.7.1",
     "ai": "^5.0.0",
     "axios": "^1.9.0",
     "better-auth": "^1.2.8",
+    "botid": "^1.5.5",
     "canvas-confetti": "^1.9.3",
     "d3": "^7.9.0",
     "dub": "^0.66.1",
@@ -79,9 +84,12 @@
     "react-hotkeys-hook": "^5.1.0",
     "react-intersection-observer": "^9.16.0",
     "react-markdown": "10.1.0",
+    "react-spinners": "^0.17.0",
+    "react-syntax-highlighter": "^15.6.6",
     "react-textarea-autosize": "^8.5.9",
     "react-use-draggable-scroll": "^0.4.7",
     "react-wrap-balancer": "^1.1.1",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "resend": "^4.4.1",
@@ -91,6 +99,7 @@
     "ts-pattern": "^5.7.0",
     "use-debounce": "^10.0.4",
     "use-long-press": "^3.3.0",
+    "use-stick-to-bottom": "^1.1.1",
     "xml2js": "^0.6.2",
     "zaraz-ts": "^1.2.0",
     "zod": "^3.25.76",
@@ -116,6 +125,7 @@
     "jsdom": "^26.1.0",
     "postcss": "^8.5.4",
     "prisma": "^6.13.0",
+    "raw-loader": "^4.0.2",
     "tailwindcss": "^4.1.8",
     "typescript": "^5.8.3",
     "vite-tsconfig-paths": "^5.1.4",

apps/app/src/ai/constants.ts

@@ -0,0 +1,26 @@
+import { type GatewayModelId } from '@ai-sdk/gateway';
+
+export enum Models {
+  AmazonNovaPro = 'amazon/nova-pro',
+  AnthropicClaude4Sonnet = 'anthropic/claude-4-sonnet',
+  GoogleGeminiFlash = 'google/gemini-2.5-flash',
+  MoonshotKimiK2 = 'moonshotai/kimi-k2',
+  OpenAIGPT5 = 'gpt-5',
+  XaiGrok3Fast = 'xai/grok-3-fast',
+}
+
+export const DEFAULT_MODEL = Models.OpenAIGPT5;
+
+export const SUPPORTED_MODELS: GatewayModelId[] = [
+  Models.AmazonNovaPro,
+  Models.AnthropicClaude4Sonnet,
+  Models.GoogleGeminiFlash,
+  Models.MoonshotKimiK2,
+  Models.OpenAIGPT5,
+  Models.XaiGrok3Fast,
+];
+
+export const TEST_PROMPTS = [
+  'I need an automation that calls github to check if trycompai/comp has dependabot enabled.',
+  'Create an automation to list all open issues in a GitHub repository.',
+];

apps/app/src/ai/gateway.ts

@@ -0,0 +1,61 @@
+import { createGatewayProvider } from '@ai-sdk/gateway'
+import { Models } from './constants'
+import type { JSONValue } from 'ai'
+import type { OpenAIResponsesProviderOptions } from '@ai-sdk/openai'
+import type { LanguageModelV2 } from '@ai-sdk/provider'
+
+export async function getAvailableModels() {
+  const gateway = gatewayInstance()
+  const response = await gateway.getAvailableModels()
+  return response.models
+    .map((model) => ({ id: model.id, name: model.name }))
+    .concat([{ id: Models.OpenAIGPT5, name: 'GPT-5' }])
+}
+
+export interface ModelOptions {
+  model: LanguageModelV2
+  providerOptions?: Record<string, Record<string, JSONValue>>
+  headers?: Record<string, string>
+}
+
+export function getModelOptions(
+  modelId: string,
+  options?: { reasoningEffort?: 'minimal' | 'low' | 'medium' }
+): ModelOptions {
+  const gateway = gatewayInstance()
+  if (modelId === Models.OpenAIGPT5) {
+    return {
+      model: gateway(modelId),
+      providerOptions: {
+        openai: {
+          include: ['reasoning.encrypted_content'],
+          reasoningEffort: options?.reasoningEffort ?? 'low',
+          reasoningSummary: 'auto',
+          serviceTier: 'priority',
+        } satisfies OpenAIResponsesProviderOptions,
+      },
+    }
+  }
+
+  if (modelId === Models.AnthropicClaude4Sonnet) {
+    return {
+      model: gateway(modelId),
+      headers: { 'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14' },
+      providerOptions: {
+        anthropic: {
+          cacheControl: { type: 'ephemeral' },
+        },
+      },
+    }
+  }
+
+  return {
+    model: gateway(modelId),
+  }
+}
+
+function gatewayInstance() {
+  return createGatewayProvider({
+    baseURL: process.env.AI_GATEWAY_BASE_URL,
+  })
+}

apps/app/src/ai/messages/data-parts.ts

@@ -0,0 +1,44 @@
+import z from 'zod/v3';
+
+export const errorSchema = z.object({
+  message: z.string(),
+});
+
+export const dataPartSchema = z.object({
+  'create-sandbox': z.object({
+    sandboxId: z.string().optional(),
+    status: z.enum(['loading', 'done', 'error']),
+    error: errorSchema.optional(),
+  }),
+  'generating-files': z.object({
+    paths: z.array(z.string()),
+    status: z.enum(['generating', 'uploading', 'uploaded', 'done', 'error']),
+    error: errorSchema.optional(),
+  }),
+  'run-command': z.object({
+    sandboxId: z.string(),
+    commandId: z.string().optional(),
+    command: z.string(),
+    args: z.array(z.string()),
+    status: z.enum(['executing', 'running', 'waiting', 'done', 'error']),
+    exitCode: z.number().optional(),
+    error: errorSchema.optional(),
+  }),
+  'get-sandbox-url': z.object({
+    url: z.string().optional(),
+    status: z.enum(['loading', 'done']),
+  }),
+  'report-errors': z.object({
+    summary: z.string(),
+    paths: z.array(z.string()).optional(),
+  }),
+  'store-to-s3': z.object({
+    status: z.enum(['uploading', 'done', 'error']),
+    bucket: z.string().optional(),
+    key: z.string().optional(),
+    region: z.string().optional(),
+    error: errorSchema.optional(),
+  }),
+});
+
+export type DataPart = z.infer<typeof dataPartSchema>;

apps/app/src/ai/messages/metadata.ts

@@ -0,0 +1,7 @@
+import z from 'zod/v3'
+
+export const metadataSchema = z.object({
+  model: z.string(),
+})
+
+export type Metadata = z.infer<typeof metadataSchema>