## 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

45-60 minutes

---

### 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

- Hint 1: Understanding React Query's cache structureconceptual  
- Hint 2: Real-time updates for the devtoolsimplementation  
- Hint 3: Conditional rendering for developmentcode location  
- Hint 4: Displaying query informationimplementation

---

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