Copilot instructions

1---
2applyTo: "apps/studio/**"
3---
4 
5# Studio Error Handling Review Rules
6 
7All comments are **advisory**.
8 
9## Architecture
10 
11Errors flow: `handleError()` → throws typed subclass → React Query catches → `ErrorMatcher` reads `errorType` → renders troubleshooting. The component does an O(1) lookup — it never does regex matching.
12 
13## When to Flag
14 
15- PR passes `error.message` instead of the full `error` object to `ErrorMatcher` — the class type is lost
16- PR puts regex patterns in `error-mappings.tsx` — they belong in `data/error-patterns.ts`
17- PR uses `Object.assign` to stamp `errorType` on an error — should throw a proper subclass instead
18- PR passes a raw URL string for support links — should use `supportFormParams={{ projectRef }}`
19- PR puts the page title inside the error mapping — it belongs on the `<ErrorMatcher>` caller
20- PR adds callback props (`onDebugWithAI`, `onRestartProject`) to troubleshooting components — use hooks inside them instead
21 
22## Correct Usage
23 
24```tsx
25{isError && (
26  <ErrorMatcher
27    title="Failed to load tables"
28    error={error}
29    supportFormParams={{ projectRef }}
30  />
31)}
32```
33 
34## Key Files
35 
36| File | Purpose |
37|------|---------|
38| `data/error-patterns.ts` | `{ pattern, ErrorClass }` array — regex lives here |
39| `types/api-errors.ts` | Error classes, `KnownErrorType` union |
40| `ErrorMatcher.tsx` | Reads `errorType`, looks up mapping, renders |
41| `error-mappings.tsx` | `Record<KnownErrorType, { id, Troubleshooting }>` |
42 
43Canonical standard: `.claude/skills/studio-error-handling/SKILL.md`
44