System Architecture

// 1. User clicks "New Project"
// 2. Frontend calls Convex mutation
const projectId = await convex.mutation(api.projects.create, {
  name: "My Project"
});

// 3. Convex verifies authentication
const identity = await verifyAuth(ctx);
const stackUserId = identity.subject;

// 4. Check project limits
const user = await ctx.db
  .query("users")
  .withIndex("by_stack_user", (q) => q.eq("stackUserId", stackUserId))
  .first();

if (user.projectLimit !== -1) {
  const existingProjects = await ctx.db
    .query("projects")
    .withIndex("by_owner", (q) => q.eq("ownerId", stackUserId))
    .collect();
  
  if (existingProjects.length >= user.projectLimit) {
    throw new Error("Project limit reached");
  }
}

// 5. Create project record
await ctx.db.insert("projects", {
  name: args.name,
  ownerId: stackUserId,
  userId: user._id,
  updatedAt: Date.now()
});

// 1. User sends message in chat
// 2. Create message record in Convex
const messageId = await convex.mutation(api.messages.create, {
  conversationId,
  content: userMessage,
  role: "user"
});

// 3. Trigger background job
await trigger.invoke("process-message", {
  messageId
});

// 4. Trigger.dev task processes message
export const processMessage = task({
  id: "process-message",
  run: async (payload) => {
    // Get message context
    const context = await convex.query(api.system.getMessageContext, {
      messageId: payload.messageId
    });
    
    // Stream AI response
    const response = await streamTextWithTools({
      messages: context.messages,
      tools: { readFile, writeFile, ... },
      onTextChunk: async (chunk) => {
        // Update message in real-time
        await convex.mutation(api.system.streamMessageContent, {
          messageId,
          content: chunk
        });
      }
    });
  }
});

// 5. Frontend receives real-time updates via Convex
useQuery(api.messages.getByConversation, { conversationId });

src/features/
├── auth/              # Authentication logic
│   ├── components/    # Auth UI components
│   └── hooks/         # useUser, useAuth
├── editor/            # Code editor
│   ├── components/    # Editor UI
│   ├── extensions/    # CodeMirror extensions
│   ├── hooks/         # useEditor
│   └── store/         # Tab state (Zustand)
├── conversations/     # AI chat
│   ├── components/    # Chat UI
│   └── hooks/         # useConversation
├── projects/          # Project management
│   ├── components/    # File explorer, dashboard
│   └── hooks/         # useProject
└── preview/           # Code preview
    └── components/    # Preview panel

src/components/
├── ui/                # shadcn/ui components
│   ├── button.tsx
│   ├── dialog.tsx
│   └── ...
└── ai-elements/       # AI-specific components
    ├── message-list.tsx
    ├── suggestion-widget.tsx
    └── ...

// sentry.server.config.ts
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 1,
  enableLogs: true,
  integrations: [
    Sentry.vercelAIIntegration,  // AI monitoring
    Sentry.consoleLoggingIntegration()
  ]
});