|
| 1 | +# Rule: Dual-Scope Routing Paradigm |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +This application enforces a strict **Dual-Scope Paradigm** for all views and API calls. |
| 6 | +Every new route, component, and API endpoint must declare which scope it belongs to. |
| 7 | + |
| 8 | +--- |
| 9 | + |
| 10 | +## Scope Definitions |
| 11 | + |
| 12 | +### 🌐 Global Scope |
| 13 | +- **URL prefix:** `/` (no `/repos/:owner/:repo` prefix) |
| 14 | +- **Purview:** cross-repository; holistic planning; master dashboards; settings |
| 15 | +- **Route file:** `src/frontend/src/routes/GlobalRoutes.tsx` |
| 16 | +- **API pattern:** `/api/projects`, `/api/global/*`, `/api/tasks`, `/api/settings` |
| 17 | +- **Examples:** `/projects`, `/kanban`, `/roadmap`, `/dashboard`, `/chat`, `/workshop` |
| 18 | + |
| 19 | +### 🗂️ Active Workspace (Repo-Specific) Scope |
| 20 | +- **URL prefix:** `/repos/:owner/:repo/...` |
| 21 | +- **Purview:** strictly confined to a single selected GitHub `owner/repo` |
| 22 | +- **Route file:** `src/frontend/src/routes/RepoRoutes.tsx` |
| 23 | +- **API pattern:** `/api/repos/:owner/:repo/*` |
| 24 | +- **Examples:** `/repos/jmbish04/core-github-api/plan`, `.../prs`, `.../explorer` |
| 25 | + |
| 26 | +--- |
| 27 | + |
| 28 | +## Rule 1 — Scope Declaration Before Implementation |
| 29 | + |
| 30 | +**When adding any new view, you MUST first determine its scope:** |
| 31 | + |
| 32 | +``` |
| 33 | +Is this view useful regardless of which repo is selected? |
| 34 | + → YES → Global Scope → add to GlobalRoutes.tsx |
| 35 | + → NO → Repo Scope → add to RepoRoutes.tsx |
| 36 | +``` |
| 37 | + |
| 38 | +Never add a route without explicitly declaring its scope in a comment: |
| 39 | +```tsx |
| 40 | +// SCOPE: GLOBAL — shows PRs across all watched repos |
| 41 | +<Route path="/pr-center" element={<PRCommandCenter />} /> |
| 42 | + |
| 43 | +// SCOPE: REPO — shows PRs only for the active owner/repo workspace |
| 44 | +<Route path="prs" element={<RepoPRs />} /> |
| 45 | +``` |
| 46 | + |
| 47 | +--- |
| 48 | + |
| 49 | +## Rule 2 — React Router v6 Relative Paths (MANDATORY) |
| 50 | + |
| 51 | +**Never repeat the parent path in a nested child route.** |
| 52 | + |
| 53 | +```tsx |
| 54 | +// ❌ WRONG — resolves to /repos/:owner/:repo/repos/:owner/:repo/plan |
| 55 | +<Route path="/repos/:owner/:repo" element={<RepoLayout />}> |
| 56 | + <Route path="repos/:owner/:repo/plan" element={<RepoPlan />} /> |
| 57 | +</Route> |
| 58 | + |
| 59 | +// ✅ CORRECT — resolves to /repos/:owner/:repo/plan |
| 60 | +<Route path="/repos/:owner/:repo" element={<RepoLayout />}> |
| 61 | + <Route path="plan" element={<RepoPlan />} /> |
| 62 | +</Route> |
| 63 | +``` |
| 64 | + |
| 65 | +**Checklist for every child route inside `RepoRoutes.tsx`:** |
| 66 | +- [ ] Path does NOT start with `/` |
| 67 | +- [ ] Path does NOT contain `repos/:owner/:repo` |
| 68 | +- [ ] Path is a relative segment only (e.g., `"plan"`, `"projects/kanban"`) |
| 69 | + |
| 70 | +--- |
| 71 | + |
| 72 | +## Rule 3 — Hono API Scope Validation |
| 73 | + |
| 74 | +All Hono router definitions must enforce scope validation with Zod. |
| 75 | + |
| 76 | +### Global API endpoints |
| 77 | +```typescript |
| 78 | +// src/backend/src/routes/api/global/projects.ts |
| 79 | +app.get("/api/projects", zValidator("query", GlobalProjectQuerySchema), handler); |
| 80 | +``` |
| 81 | + |
| 82 | +### Repo-scoped API endpoints |
| 83 | +Every repo-scoped route must validate `owner` and `repo` using a shared Zod schema: |
| 84 | + |
| 85 | +```typescript |
| 86 | +// src/backend/src/routes/api/repos/[owner]/[repo]/projects.ts |
| 87 | +const RepoParamsSchema = z.object({ |
| 88 | + owner: z.string().min(1), |
| 89 | + repo: z.string().min(1), |
| 90 | +}); |
| 91 | + |
| 92 | +app.get("/api/repos/:owner/:repo/projects", |
| 93 | + zValidator("param", RepoParamsSchema), |
| 94 | + async (c) => { /* ... */ } |
| 95 | +); |
| 96 | +``` |
| 97 | + |
| 98 | +**Never** serve repo-scoped data from a global endpoint. |
| 99 | +**Never** call a global endpoint from a component inside `RepoRoutes.tsx`. |
| 100 | + |
| 101 | +--- |
| 102 | + |
| 103 | +## Rule 4 — File Placement |
| 104 | + |
| 105 | +| Artifact | Global scope | Repo scope | |
| 106 | +|---|---|---| |
| 107 | +| Route definition | `src/frontend/src/routes/GlobalRoutes.tsx` | `src/frontend/src/routes/RepoRoutes.tsx` | |
| 108 | +| View component | `src/frontend/src/views/control/global/` | `src/frontend/src/views/repos/` | |
| 109 | +| Hono API handler | `src/backend/src/routes/api/...` | `src/backend/src/routes/api/repos/...` | |
| 110 | +| TanStack Query hook | uses `/api/*` | uses `/api/repos/:owner/:repo/*` | |
| 111 | +| Context dependency | no repo context needed | must consume `useRepoContext()` | |
| 112 | + |
| 113 | +--- |
| 114 | + |
| 115 | +## Rule 5 — App.tsx Is a Composition Layer Only |
| 116 | + |
| 117 | +`App.tsx` must remain a thin provider + route composition layer. |
| 118 | +It imports `GlobalRoutes` and `RepoRoutes` and renders them inside `<Routes>`. |
| 119 | +**No route definitions belong directly in `App.tsx`.** |
| 120 | + |
| 121 | +```tsx |
| 122 | +// ✅ Correct App.tsx pattern |
| 123 | +function App() { |
| 124 | + return ( |
| 125 | + <AuthProvider> |
| 126 | + <BrowserRouter> |
| 127 | + <Routes> |
| 128 | + {GlobalRoutes()} |
| 129 | + {RepoRoutes()} |
| 130 | + </Routes> |
| 131 | + </BrowserRouter> |
| 132 | + </AuthProvider> |
| 133 | + ); |
| 134 | +} |
| 135 | +``` |
0 commit comments