# Welcome to sim

Your guide to understanding the codebase

## Learning Path

14 units • 4 levels

### Orchestration & APIs
- Pipelines, workflows, public interfaces • 3 units

### Monorepo Architecture & Project Structure
- Architecture

### Data Layer & Authentication
- Data Model • 11

### State Management & Data Fetching
- Patterns • 1

### Core Logic & Data
- Business rules, schemas, models • 3 units

### LLM Integration & AI Copilot
- Integration • 5

### Tool & Integration Framework
- Integration • 17

### Workflow Canvas & Block System
- Patterns • 9

### Interaction & Integration
- UI components, external connectors • 3 units

### Knowledge Base & RAG System
- Data Model • 6

### Execution Infrastructure & Monitoring
- Infrastructure • 25

### Workflow Execution & Automation
- Workflow • 5

### Cross-Cutting Concerns
- Auth, logging, config, testing • 2 units

### Production & Collaboration
- Concurrency • 20

### Security & API Management
- Security • 6

## Test Your Knowledge

24 questions across all levels

## Hands-On Assignment

### Your Challenge
Build a custom React Query devtools panel that visualizes the query cache state and allows developers to inspect active queries, their data, and refetch status in real-time. The panel should integrate with the existing QueryProvider and display query keys, cache times, and stale status. This will help developers debug data fetching issues and understand how React Query manages state across the application.

### Starting Points

- `apps/sim/app/_shell/providers/query-provider.tsx:1-43`
  - Examine how QueryClientProvider is configured and the default query options being used

- `apps/sim/app/_shell/providers/query-provider.tsx:10-30`
  - This is where you'll add your custom devtools component alongside the existing QueryClientProvider

- `apps/sim/app/_shell/providers/query-provider.tsx:1-15`
  - Note the provider pattern and how children are wrapped - your devtools should follow this pattern

### Success Criteria
- Devtools panel appears only in development mode (NODE_ENV !== 'production')
- Panel displays all active queries with their query keys in a readable format
- Clicking a query shows detailed information: data, fetch status, stale state, and last updated time
- Panel updates in real-time when queries are added, removed, or refetched
- Includes a manual refetch button for each query that triggers query.refetch()
- Panel can be toggled open/closed without breaking existing functionality
- Existing application behavior remains unchanged when devtools are closed

### Hints
- (click to reveal)
  - Hint 1: Understanding React Query's cache structure conceptual
  - Hint 2: Real-time updates for the devtools implementation
  - Hint 3: Conditional rendering for development code location
  - Hint 4: Displaying query information implementation

### Prerequisites
- React hooks (useState, useEffect)
- React Query basics
- TypeScript interfaces