@atlashub/smartstack-cli 1.5.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,413 +1,417 @@
1
- <!DOCTYPE html>
2
- <html lang="fr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Hooks - SmartStack CLI</title>
7
- <link rel="stylesheet" href="css/styles.css">
8
- </head>
9
- <body>
10
- <div class="app-container">
11
- <!-- Global Header (single unified element) -->
12
- <header class="global-header">
13
- <div class="logo">SS</div>
14
- <span class="site-title">SmartStack CLI</span>
15
- <span class="version-badge">v1.4.0</span>
16
- <div class="header-divider"></div>
17
- <span class="page-title">Hooks</span>
18
- <nav class="breadcrumb">
19
- <a href="index.html">
20
- <span data-lang="fr">Accueil</span>
21
- <span data-lang="en">Home</span>
22
- </a>
23
- <span class="breadcrumb-separator">&#8250;</span>
24
- <span data-lang="fr">Outils</span>
25
- <span data-lang="en">Tools</span>
26
- <span class="breadcrumb-separator">&#8250;</span>
27
- <span class="breadcrumb-current">Hooks</span>
28
- </nav>
29
- <!-- Language Select -->
30
- <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
31
- <option value="fr">🇫🇷 FR</option>
32
- <option value="en">🇬🇧 EN</option>
33
- </select>
34
- <!-- Search -->
35
- <div class="header-search">
36
- <div class="search-input-wrapper">
37
- <span class="search-icon">&#128269;</span>
38
- <input type="text" id="search-input" class="search-input" placeholder="Rechercher..." data-placeholder-fr="Rechercher..." data-placeholder-en="Search..." autocomplete="off">
39
- <span class="search-shortcut">Ctrl+K</span>
40
- </div>
41
- <div id="search-results" class="search-results"></div>
42
- </div>
43
- </header>
44
-
45
- <!-- App Body -->
46
- <div class="app-body">
47
- <!-- Sidebar -->
48
- <aside class="sidebar">
49
- <button class="sidebar-toggle" title="Toggle sidebar">
50
- <span class="toggle-icon-collapse">&#171;</span>
51
- <span class="toggle-icon-expand">&#187;</span>
52
- </button>
53
-
54
- <nav class="sidebar-nav">
55
- <div class="nav-section">
56
- <div class="nav-section-title">
57
- <span data-lang="fr">Demarrage</span>
58
- <span data-lang="en">Getting Started</span>
59
- </div>
60
- <a href="index.html" class="nav-item">
61
- <span class="icon">&#127968;</span>
62
- <span class="nav-text" data-lang="fr">Accueil</span>
63
- <span class="nav-text" data-lang="en">Home</span>
64
- </a>
65
- <a href="installation.html" class="nav-item">
66
- <span class="icon">&#128230;</span>
67
- <span class="nav-text">Installation</span>
68
- </a>
69
- </div>
70
-
71
- <div class="nav-section">
72
- <div class="nav-section-title">Workflows</div>
73
- <a href="gitflow.html" class="nav-item">
74
- <span class="icon">&#128256;</span>
75
- <span class="nav-text">GitFlow</span>
76
- </a>
77
- <a href="efcore.html" class="nav-item">
78
- <span class="icon">&#128452;</span>
79
- <span class="nav-text">EF Core</span>
80
- </a>
81
- <a href="apex.html" class="nav-item">
82
- <span class="icon">&#127919;</span>
83
- <span class="nav-text">APEX</span>
84
- </a>
85
- <a href="business-analyse.html" class="nav-item">
86
- <span class="icon">&#128202;</span>
87
- <span class="nav-text">Business Analyse</span>
88
- </a>
89
- <a href="ralph-loop.html" class="nav-item">
90
- <span class="icon">&#128260;</span>
91
- <span class="nav-text">Ralph Loop</span>
92
- </a>
93
- </div>
94
-
95
- <div class="nav-section">
96
- <div class="nav-section-title">
97
- <span data-lang="fr">Outils</span>
98
- <span data-lang="en">Tools</span>
99
- </div>
100
- <a href="agents.html" class="nav-item">
101
- <span class="icon">&#129302;</span>
102
- <span class="nav-text">Agents</span>
103
- </a>
104
- <a href="commands.html" class="nav-item">
105
- <span class="icon">&#9889;</span>
106
- <span class="nav-text" data-lang="fr">Commandes</span>
107
- <span class="nav-text" data-lang="en">Commands</span>
108
- </a>
109
- <a href="hooks.html" class="nav-item active">
110
- <span class="icon">&#128279;</span>
111
- <span class="nav-text">Hooks</span>
112
- </a>
113
- <a href="test-web.html" class="nav-item">
114
- <span class="icon">&#127760;</span>
115
- <span class="nav-text">Test Web</span>
116
- </a>
117
- </div>
118
- </nav>
119
-
120
- </aside>
121
-
122
- <!-- Main Content -->
123
- <main class="main-content">
124
- <div class="content content-wide">
125
- <!-- Introduction -->
126
- <section id="introduction">
127
- <h2>Introduction</h2>
128
- <p data-lang="fr">
129
- Les hooks Claude Code permettent d'executer des scripts automatiquement avant ou apres certaines operations. Claude Tools inclut des hooks pre-configures pour la validation des migrations EF Core et la securite.
130
- </p>
131
- <p data-lang="en">
132
- Claude Code hooks allow running scripts automatically before or after certain operations. Claude Tools includes pre-configured hooks for EF Core migration validation and security.
133
- </p>
134
- </section>
135
-
136
- <!-- Hook Types -->
137
- <section id="types">
138
- <h2>
139
- <span data-lang="fr">Types de hooks</span>
140
- <span data-lang="en">Hook Types</span>
141
- </h2>
142
-
143
- <div class="table-container">
144
- <table>
145
- <thead>
146
- <tr>
147
- <th>Hook</th>
148
- <th>
149
- <span data-lang="fr">Declenchement</span>
150
- <span data-lang="en">Trigger</span>
151
- </th>
152
- <th>Usage</th>
153
- </tr>
154
- </thead>
155
- <tbody>
156
- <tr>
157
- <td><code>PreToolUse</code></td>
158
- <td>
159
- <span data-lang="fr">Avant l'execution d'un outil</span>
160
- <span data-lang="en">Before tool execution</span>
161
- </td>
162
- <td>
163
- <span data-lang="fr">Validation, securite</span>
164
- <span data-lang="en">Validation, security</span>
165
- </td>
166
- </tr>
167
- <tr>
168
- <td><code>PostToolUse</code></td>
169
- <td>
170
- <span data-lang="fr">Apres l'execution d'un outil</span>
171
- <span data-lang="en">After tool execution</span>
172
- </td>
173
- <td>Logging, notifications</td>
174
- </tr>
175
- <tr>
176
- <td><code>SessionStart</code></td>
177
- <td>
178
- <span data-lang="fr">Au demarrage de la session</span>
179
- <span data-lang="en">At session start</span>
180
- </td>
181
- <td>
182
- <span data-lang="fr">Setup environnement</span>
183
- <span data-lang="en">Environment setup</span>
184
- </td>
185
- </tr>
186
- <tr>
187
- <td><code>Stop</code></td>
188
- <td>
189
- <span data-lang="fr">A la fin de la session</span>
190
- <span data-lang="en">At session end</span>
191
- </td>
192
- <td>
193
- <span data-lang="fr">Cleanup, rapports</span>
194
- <span data-lang="en">Cleanup, reports</span>
195
- </td>
196
- </tr>
197
- </tbody>
198
- </table>
199
- </div>
200
- </section>
201
-
202
- <!-- Configuration -->
203
- <section id="configuration">
204
- <h2>Configuration</h2>
205
-
206
- <p data-lang="fr">Les hooks sont configures dans <code>~/.claude/hooks/hooks.json</code> :</p>
207
- <p data-lang="en">Hooks are configured in <code>~/.claude/hooks/hooks.json</code>:</p>
208
-
209
- <div class="code-block">
210
- <button class="copy-btn">Copy</button>
211
- <pre><code>{
212
- "hooks": {
213
- "PreToolUse": [
214
- {
215
- "matcher": "Bash",
216
- "hooks": [
217
- {
218
- "type": "command",
219
- "command": "node ~/.claude/scripts/validate-command.js"
220
- }
221
- ]
222
- }
223
- ],
224
- "PostToolUse": [
225
- {
226
- "matcher": "Write",
227
- "hooks": [
228
- {
229
- "type": "command",
230
- "command": "echo 'File written: $TOOL_OUTPUT'"
231
- }
232
- ]
233
- }
234
- ]
235
- }
236
- }</code></pre>
237
- </div>
238
- </section>
239
-
240
- <!-- EF Core Migration Check -->
241
- <section id="ef-migration-check">
242
- <h2>
243
- <span data-lang="fr">Hook: EF Core Migration Check</span>
244
- <span data-lang="en">Hook: EF Core Migration Check</span>
245
- </h2>
246
-
247
- <p data-lang="fr">
248
- Ce hook pre-commit detecte les operations destructives dans les migrations EF Core et bloque le commit si necessaire.
249
- </p>
250
- <p data-lang="en">
251
- This pre-commit hook detects destructive operations in EF Core migrations and blocks the commit if necessary.
252
- </p>
253
-
254
- <h3 data-lang="fr">Operations BLOQUANTES</h3>
255
- <h3 data-lang="en">BLOCKING Operations</h3>
256
-
257
- <div class="svg-diagram">
258
- <svg viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif;">
259
- <defs>
260
- <linearGradient id="criticalGrad" x1="0%" y1="0%" x2="100%" y2="0%">
261
- <stop offset="0%" style="stop-color:#ef4444"/>
262
- <stop offset="100%" style="stop-color:#dc2626"/>
263
- </linearGradient>
264
- <linearGradient id="highGrad" x1="0%" y1="0%" x2="100%" y2="0%">
265
- <stop offset="0%" style="stop-color:#f97316"/>
266
- <stop offset="100%" style="stop-color:#ea580c"/>
267
- </linearGradient>
268
- <linearGradient id="mediumGrad" x1="0%" y1="0%" x2="100%" y2="0%">
269
- <stop offset="0%" style="stop-color:#eab308"/>
270
- <stop offset="100%" style="stop-color:#ca8a04"/>
271
- </linearGradient>
272
- </defs>
273
-
274
- <!-- Title -->
275
- <text x="300" y="30" text-anchor="middle" fill="#e2e8f0" font-size="14" font-weight="600">Destructive Operations Detection</text>
276
-
277
- <!-- CRITICAL section -->
278
- <rect x="30" y="50" width="540" height="90" rx="8" fill="rgba(239, 68, 68, 0.1)" stroke="#ef4444" stroke-width="1"/>
279
- <text x="50" y="72" fill="#ef4444" font-size="12" font-weight="700">CRITICAL</text>
280
-
281
- <g transform="translate(50, 85)">
282
- <rect x="0" y="0" width="110" height="40" rx="4" fill="url(#criticalGrad)"/>
283
- <text x="55" y="25" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropTable</text>
284
- </g>
285
- <g transform="translate(170, 85)">
286
- <rect x="0" y="0" width="110" height="40" rx="4" fill="url(#criticalGrad)"/>
287
- <text x="55" y="25" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropColumn</text>
288
- </g>
289
- <g transform="translate(290, 85)">
290
- <rect x="0" y="0" width="110" height="40" rx="4" fill="url(#criticalGrad)"/>
291
- <text x="55" y="25" text-anchor="middle" fill="white" font-size="10" font-weight="500">DeleteData</text>
292
- </g>
293
- <g transform="translate(410, 85)">
294
- <rect x="0" y="0" width="140" height="40" rx="4" fill="url(#criticalGrad)"/>
295
- <text x="70" y="25" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropPrimaryKey</text>
296
- </g>
297
-
298
- <!-- HIGH section -->
299
- <rect x="30" y="150" width="540" height="55" rx="8" fill="rgba(249, 115, 22, 0.1)" stroke="#f97316" stroke-width="1"/>
300
- <text x="50" y="172" fill="#f97316" font-size="12" font-weight="700">HIGH</text>
301
-
302
- <g transform="translate(50, 180)">
303
- <rect x="0" y="0" width="130" height="30" rx="4" fill="url(#highGrad)"/>
304
- <text x="65" y="20" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropForeignKey</text>
305
- </g>
306
- <g transform="translate(190, 180)">
307
- <rect x="0" y="0" width="110" height="30" rx="4" fill="url(#highGrad)"/>
308
- <text x="55" y="20" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropSchema</text>
309
- </g>
310
-
311
- <!-- MEDIUM section -->
312
- <rect x="30" y="215" width="540" height="55" rx="8" fill="rgba(234, 179, 8, 0.1)" stroke="#eab308" stroke-width="1"/>
313
- <text x="50" y="237" fill="#eab308" font-size="12" font-weight="700">MEDIUM</text>
314
-
315
- <g transform="translate(50, 245)">
316
- <rect x="0" y="0" width="100" height="30" rx="4" fill="url(#mediumGrad)"/>
317
- <text x="50" y="20" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="500">DropIndex</text>
318
- </g>
319
-
320
- <!-- SQL warning -->
321
- <rect x="30" y="280" width="540" height="25" rx="4" fill="rgba(239, 68, 68, 0.05)" stroke="#ef4444" stroke-width="1" stroke-dasharray="4,2"/>
322
- <text x="300" y="297" text-anchor="middle" fill="#ef4444" font-size="10">+ Raw SQL containing DELETE, DROP, TRUNCATE</text>
323
- </svg>
324
- </div>
325
-
326
- <h3 data-lang="fr">Comportement</h3>
327
- <h3 data-lang="en">Behavior</h3>
328
-
329
- <div class="code-block">
330
- <pre><code>$ git commit -m "Add migration"
331
-
332
- Scan des migrations EF Core...
333
- Analyse: Migrations/20240120_RemoveUsers.cs
334
-
335
- OPERATIONS DESTRUCTIVES DETECTEES:
336
- ────────────────────────────────────────────────
337
- 15: DropTable(name: "Users");
338
- 23: DropColumn(name: "Email", table: "Profiles");
339
- ────────────────────────────────────────────────
340
-
341
- COMMIT BLOQUE - OPERATIONS DESTRUCTIVES DETECTEES
342
-
343
- ACTIONS REQUISES :
344
- 1. Verifier que vous avez un BACKUP des donnees
345
- 2. Confirmer que cette suppression est intentionnelle
346
- 3. Utiliser --no-verify pour bypasser ce check</code></pre>
347
- </div>
348
-
349
- <h3>Bypass</h3>
350
-
351
- <div class="code-block">
352
- <button class="copy-btn">Copy</button>
353
- <pre><code># Option 1 : Flag no-verify
354
- git commit --no-verify -m "Drop users table (intentional)"
355
-
356
- # Option 2 : Variable environnement
357
- EF_MIGRATION_FORCE=1 git commit -m "message"</code></pre>
358
- </div>
359
- </section>
360
-
361
- <!-- Custom Hooks -->
362
- <section id="custom">
363
- <h2>
364
- <span data-lang="fr">Creer un hook personnalise</span>
365
- <span data-lang="en">Create a custom hook</span>
366
- </h2>
367
-
368
- <div class="code-block">
369
- <button class="copy-btn">Copy</button>
370
- <pre><code>{
371
- "hooks": {
372
- "PreToolUse": [
373
- {
374
- "matcher": "Bash",
375
- "hooks": [
376
- {
377
- "type": "command",
378
- "command": "node my-validation-script.js",
379
- "blocking": true
380
- }
381
- ]
382
- }
383
- ]
384
- }
385
- }</code></pre>
386
- </div>
387
-
388
- <div class="alert alert-info">
389
- <span class="alert-icon">&#128161;</span>
390
- <div class="alert-content">
391
- <h5 data-lang="fr">Variables d'environnement</h5>
392
- <h5 data-lang="en">Environment variables</h5>
393
- <p data-lang="fr">
394
- Les hooks ont acces a <code>$TOOL_NAME</code>, <code>$TOOL_INPUT</code>, <code>$TOOL_OUTPUT</code>, et <code>$CLAUDE_PLUGIN_ROOT</code>.
395
- </p>
396
- <p data-lang="en">
397
- Hooks have access to <code>$TOOL_NAME</code>, <code>$TOOL_INPUT</code>, <code>$TOOL_OUTPUT</code>, and <code>$CLAUDE_PLUGIN_ROOT</code>.
398
- </p>
399
- </div>
400
- </div>
401
- </section>
402
- </div>
403
- </main>
404
- </div>
405
- </div>
406
-
407
- <!-- Mobile Menu Button -->
408
- <button class="mobile-menu-btn">&#9776;</button>
409
- <div class="overlay"></div>
410
-
411
- <script src="js/app.js"></script>
412
- </body>
413
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hooks - SmartStack CLI</title>
7
+ <link rel="stylesheet" href="css/styles.css">
8
+ </head>
9
+ <body>
10
+ <div class="app-container">
11
+ <!-- Global Header (single unified element) -->
12
+ <header class="global-header">
13
+ <div class="logo">SS</div>
14
+ <span class="site-title">SmartStack CLI</span>
15
+ <span class="version-badge">v1.5.0</span>
16
+ <div class="header-divider"></div>
17
+ <span class="page-title">Hooks</span>
18
+ <nav class="breadcrumb">
19
+ <a href="index.html">
20
+ <span data-lang="fr">Accueil</span>
21
+ <span data-lang="en">Home</span>
22
+ </a>
23
+ <span class="breadcrumb-separator">&#8250;</span>
24
+ <span data-lang="fr">Outils</span>
25
+ <span data-lang="en">Tools</span>
26
+ <span class="breadcrumb-separator">&#8250;</span>
27
+ <span class="breadcrumb-current">Hooks</span>
28
+ </nav>
29
+ <!-- Language Select -->
30
+ <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
31
+ <option value="fr">🇫🇷 FR</option>
32
+ <option value="en">🇬🇧 EN</option>
33
+ </select>
34
+ <!-- Search -->
35
+ <div class="header-search">
36
+ <div class="search-input-wrapper">
37
+ <span class="search-icon">&#128269;</span>
38
+ <input type="text" id="search-input" class="search-input" placeholder="Rechercher..." data-placeholder-fr="Rechercher..." data-placeholder-en="Search..." autocomplete="off">
39
+ <span class="search-shortcut">Ctrl+K</span>
40
+ </div>
41
+ <div id="search-results" class="search-results"></div>
42
+ </div>
43
+ </header>
44
+
45
+ <!-- App Body -->
46
+ <div class="app-body">
47
+ <!-- Sidebar -->
48
+ <aside class="sidebar">
49
+ <button class="sidebar-toggle" title="Toggle sidebar">
50
+ <span class="toggle-icon-collapse">&#171;</span>
51
+ <span class="toggle-icon-expand">&#187;</span>
52
+ </button>
53
+
54
+ <nav class="sidebar-nav">
55
+ <div class="nav-section">
56
+ <div class="nav-section-title">
57
+ <span data-lang="fr">Demarrage</span>
58
+ <span data-lang="en">Getting Started</span>
59
+ </div>
60
+ <a href="index.html" class="nav-item">
61
+ <span class="icon">&#127968;</span>
62
+ <span class="nav-text" data-lang="fr">Accueil</span>
63
+ <span class="nav-text" data-lang="en">Home</span>
64
+ </a>
65
+ <a href="installation.html" class="nav-item">
66
+ <span class="icon">&#128230;</span>
67
+ <span class="nav-text">Installation</span>
68
+ </a>
69
+ <a href="init.html" class="nav-item">
70
+ <span class="icon">&#128640;</span>
71
+ <span class="nav-text">Project Init</span>
72
+ </a>
73
+ </div>
74
+
75
+ <div class="nav-section">
76
+ <div class="nav-section-title">Workflows</div>
77
+ <a href="gitflow.html" class="nav-item">
78
+ <span class="icon">&#128256;</span>
79
+ <span class="nav-text">GitFlow</span>
80
+ </a>
81
+ <a href="efcore.html" class="nav-item">
82
+ <span class="icon">&#128452;</span>
83
+ <span class="nav-text">EF Core</span>
84
+ </a>
85
+ <a href="apex.html" class="nav-item">
86
+ <span class="icon">&#127919;</span>
87
+ <span class="nav-text">APEX</span>
88
+ </a>
89
+ <a href="business-analyse.html" class="nav-item">
90
+ <span class="icon">&#128202;</span>
91
+ <span class="nav-text">Business Analyse</span>
92
+ </a>
93
+ <a href="ralph-loop.html" class="nav-item">
94
+ <span class="icon">&#128260;</span>
95
+ <span class="nav-text">Ralph Loop</span>
96
+ </a>
97
+ </div>
98
+
99
+ <div class="nav-section">
100
+ <div class="nav-section-title">
101
+ <span data-lang="fr">Outils</span>
102
+ <span data-lang="en">Tools</span>
103
+ </div>
104
+ <a href="agents.html" class="nav-item">
105
+ <span class="icon">&#129302;</span>
106
+ <span class="nav-text">Agents</span>
107
+ </a>
108
+ <a href="commands.html" class="nav-item">
109
+ <span class="icon">&#9889;</span>
110
+ <span class="nav-text" data-lang="fr">Commandes</span>
111
+ <span class="nav-text" data-lang="en">Commands</span>
112
+ </a>
113
+ <a href="hooks.html" class="nav-item active">
114
+ <span class="icon">&#128279;</span>
115
+ <span class="nav-text">Hooks</span>
116
+ </a>
117
+ <a href="test-web.html" class="nav-item">
118
+ <span class="icon">&#127760;</span>
119
+ <span class="nav-text">Test Web</span>
120
+ </a>
121
+ </div>
122
+ </nav>
123
+
124
+ </aside>
125
+
126
+ <!-- Main Content -->
127
+ <main class="main-content">
128
+ <div class="content content-wide">
129
+ <!-- Introduction -->
130
+ <section id="introduction">
131
+ <h2>Introduction</h2>
132
+ <p data-lang="fr">
133
+ Les hooks Claude Code permettent d'executer des scripts automatiquement avant ou apres certaines operations. Claude Tools inclut des hooks pre-configures pour la validation des migrations EF Core et la securite.
134
+ </p>
135
+ <p data-lang="en">
136
+ Claude Code hooks allow running scripts automatically before or after certain operations. Claude Tools includes pre-configured hooks for EF Core migration validation and security.
137
+ </p>
138
+ </section>
139
+
140
+ <!-- Hook Types -->
141
+ <section id="types">
142
+ <h2>
143
+ <span data-lang="fr">Types de hooks</span>
144
+ <span data-lang="en">Hook Types</span>
145
+ </h2>
146
+
147
+ <div class="table-container">
148
+ <table>
149
+ <thead>
150
+ <tr>
151
+ <th>Hook</th>
152
+ <th>
153
+ <span data-lang="fr">Declenchement</span>
154
+ <span data-lang="en">Trigger</span>
155
+ </th>
156
+ <th>Usage</th>
157
+ </tr>
158
+ </thead>
159
+ <tbody>
160
+ <tr>
161
+ <td><code>PreToolUse</code></td>
162
+ <td>
163
+ <span data-lang="fr">Avant l'execution d'un outil</span>
164
+ <span data-lang="en">Before tool execution</span>
165
+ </td>
166
+ <td>
167
+ <span data-lang="fr">Validation, securite</span>
168
+ <span data-lang="en">Validation, security</span>
169
+ </td>
170
+ </tr>
171
+ <tr>
172
+ <td><code>PostToolUse</code></td>
173
+ <td>
174
+ <span data-lang="fr">Apres l'execution d'un outil</span>
175
+ <span data-lang="en">After tool execution</span>
176
+ </td>
177
+ <td>Logging, notifications</td>
178
+ </tr>
179
+ <tr>
180
+ <td><code>SessionStart</code></td>
181
+ <td>
182
+ <span data-lang="fr">Au demarrage de la session</span>
183
+ <span data-lang="en">At session start</span>
184
+ </td>
185
+ <td>
186
+ <span data-lang="fr">Setup environnement</span>
187
+ <span data-lang="en">Environment setup</span>
188
+ </td>
189
+ </tr>
190
+ <tr>
191
+ <td><code>Stop</code></td>
192
+ <td>
193
+ <span data-lang="fr">A la fin de la session</span>
194
+ <span data-lang="en">At session end</span>
195
+ </td>
196
+ <td>
197
+ <span data-lang="fr">Cleanup, rapports</span>
198
+ <span data-lang="en">Cleanup, reports</span>
199
+ </td>
200
+ </tr>
201
+ </tbody>
202
+ </table>
203
+ </div>
204
+ </section>
205
+
206
+ <!-- Configuration -->
207
+ <section id="configuration">
208
+ <h2>Configuration</h2>
209
+
210
+ <p data-lang="fr">Les hooks sont configures dans <code>~/.claude/hooks/hooks.json</code> :</p>
211
+ <p data-lang="en">Hooks are configured in <code>~/.claude/hooks/hooks.json</code>:</p>
212
+
213
+ <div class="code-block">
214
+ <button class="copy-btn">Copy</button>
215
+ <pre><code>{
216
+ "hooks": {
217
+ "PreToolUse": [
218
+ {
219
+ "matcher": "Bash",
220
+ "hooks": [
221
+ {
222
+ "type": "command",
223
+ "command": "node ~/.claude/scripts/validate-command.js"
224
+ }
225
+ ]
226
+ }
227
+ ],
228
+ "PostToolUse": [
229
+ {
230
+ "matcher": "Write",
231
+ "hooks": [
232
+ {
233
+ "type": "command",
234
+ "command": "echo 'File written: $TOOL_OUTPUT'"
235
+ }
236
+ ]
237
+ }
238
+ ]
239
+ }
240
+ }</code></pre>
241
+ </div>
242
+ </section>
243
+
244
+ <!-- EF Core Migration Check -->
245
+ <section id="ef-migration-check">
246
+ <h2>
247
+ <span data-lang="fr">Hook: EF Core Migration Check</span>
248
+ <span data-lang="en">Hook: EF Core Migration Check</span>
249
+ </h2>
250
+
251
+ <p data-lang="fr">
252
+ Ce hook pre-commit detecte les operations destructives dans les migrations EF Core et bloque le commit si necessaire.
253
+ </p>
254
+ <p data-lang="en">
255
+ This pre-commit hook detects destructive operations in EF Core migrations and blocks the commit if necessary.
256
+ </p>
257
+
258
+ <h3 data-lang="fr">Operations BLOQUANTES</h3>
259
+ <h3 data-lang="en">BLOCKING Operations</h3>
260
+
261
+ <div class="svg-diagram">
262
+ <svg viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif;">
263
+ <defs>
264
+ <linearGradient id="criticalGrad" x1="0%" y1="0%" x2="100%" y2="0%">
265
+ <stop offset="0%" style="stop-color:#ef4444"/>
266
+ <stop offset="100%" style="stop-color:#dc2626"/>
267
+ </linearGradient>
268
+ <linearGradient id="highGrad" x1="0%" y1="0%" x2="100%" y2="0%">
269
+ <stop offset="0%" style="stop-color:#f97316"/>
270
+ <stop offset="100%" style="stop-color:#ea580c"/>
271
+ </linearGradient>
272
+ <linearGradient id="mediumGrad" x1="0%" y1="0%" x2="100%" y2="0%">
273
+ <stop offset="0%" style="stop-color:#eab308"/>
274
+ <stop offset="100%" style="stop-color:#ca8a04"/>
275
+ </linearGradient>
276
+ </defs>
277
+
278
+ <!-- Title -->
279
+ <text x="300" y="30" text-anchor="middle" fill="#e2e8f0" font-size="14" font-weight="600">Destructive Operations Detection</text>
280
+
281
+ <!-- CRITICAL section -->
282
+ <rect x="30" y="50" width="540" height="90" rx="8" fill="rgba(239, 68, 68, 0.1)" stroke="#ef4444" stroke-width="1"/>
283
+ <text x="50" y="72" fill="#ef4444" font-size="12" font-weight="700">CRITICAL</text>
284
+
285
+ <g transform="translate(50, 85)">
286
+ <rect x="0" y="0" width="110" height="40" rx="4" fill="url(#criticalGrad)"/>
287
+ <text x="55" y="25" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropTable</text>
288
+ </g>
289
+ <g transform="translate(170, 85)">
290
+ <rect x="0" y="0" width="110" height="40" rx="4" fill="url(#criticalGrad)"/>
291
+ <text x="55" y="25" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropColumn</text>
292
+ </g>
293
+ <g transform="translate(290, 85)">
294
+ <rect x="0" y="0" width="110" height="40" rx="4" fill="url(#criticalGrad)"/>
295
+ <text x="55" y="25" text-anchor="middle" fill="white" font-size="10" font-weight="500">DeleteData</text>
296
+ </g>
297
+ <g transform="translate(410, 85)">
298
+ <rect x="0" y="0" width="140" height="40" rx="4" fill="url(#criticalGrad)"/>
299
+ <text x="70" y="25" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropPrimaryKey</text>
300
+ </g>
301
+
302
+ <!-- HIGH section -->
303
+ <rect x="30" y="150" width="540" height="55" rx="8" fill="rgba(249, 115, 22, 0.1)" stroke="#f97316" stroke-width="1"/>
304
+ <text x="50" y="172" fill="#f97316" font-size="12" font-weight="700">HIGH</text>
305
+
306
+ <g transform="translate(50, 180)">
307
+ <rect x="0" y="0" width="130" height="30" rx="4" fill="url(#highGrad)"/>
308
+ <text x="65" y="20" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropForeignKey</text>
309
+ </g>
310
+ <g transform="translate(190, 180)">
311
+ <rect x="0" y="0" width="110" height="30" rx="4" fill="url(#highGrad)"/>
312
+ <text x="55" y="20" text-anchor="middle" fill="white" font-size="10" font-weight="500">DropSchema</text>
313
+ </g>
314
+
315
+ <!-- MEDIUM section -->
316
+ <rect x="30" y="215" width="540" height="55" rx="8" fill="rgba(234, 179, 8, 0.1)" stroke="#eab308" stroke-width="1"/>
317
+ <text x="50" y="237" fill="#eab308" font-size="12" font-weight="700">MEDIUM</text>
318
+
319
+ <g transform="translate(50, 245)">
320
+ <rect x="0" y="0" width="100" height="30" rx="4" fill="url(#mediumGrad)"/>
321
+ <text x="50" y="20" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="500">DropIndex</text>
322
+ </g>
323
+
324
+ <!-- SQL warning -->
325
+ <rect x="30" y="280" width="540" height="25" rx="4" fill="rgba(239, 68, 68, 0.05)" stroke="#ef4444" stroke-width="1" stroke-dasharray="4,2"/>
326
+ <text x="300" y="297" text-anchor="middle" fill="#ef4444" font-size="10">+ Raw SQL containing DELETE, DROP, TRUNCATE</text>
327
+ </svg>
328
+ </div>
329
+
330
+ <h3 data-lang="fr">Comportement</h3>
331
+ <h3 data-lang="en">Behavior</h3>
332
+
333
+ <div class="code-block">
334
+ <pre><code>$ git commit -m "Add migration"
335
+
336
+ Scan des migrations EF Core...
337
+ Analyse: Migrations/20240120_RemoveUsers.cs
338
+
339
+ OPERATIONS DESTRUCTIVES DETECTEES:
340
+ ────────────────────────────────────────────────
341
+ 15: DropTable(name: "Users");
342
+ 23: DropColumn(name: "Email", table: "Profiles");
343
+ ────────────────────────────────────────────────
344
+
345
+ COMMIT BLOQUE - OPERATIONS DESTRUCTIVES DETECTEES
346
+
347
+ ACTIONS REQUISES :
348
+ 1. Verifier que vous avez un BACKUP des donnees
349
+ 2. Confirmer que cette suppression est intentionnelle
350
+ 3. Utiliser --no-verify pour bypasser ce check</code></pre>
351
+ </div>
352
+
353
+ <h3>Bypass</h3>
354
+
355
+ <div class="code-block">
356
+ <button class="copy-btn">Copy</button>
357
+ <pre><code># Option 1 : Flag no-verify
358
+ git commit --no-verify -m "Drop users table (intentional)"
359
+
360
+ # Option 2 : Variable environnement
361
+ EF_MIGRATION_FORCE=1 git commit -m "message"</code></pre>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- Custom Hooks -->
366
+ <section id="custom">
367
+ <h2>
368
+ <span data-lang="fr">Creer un hook personnalise</span>
369
+ <span data-lang="en">Create a custom hook</span>
370
+ </h2>
371
+
372
+ <div class="code-block">
373
+ <button class="copy-btn">Copy</button>
374
+ <pre><code>{
375
+ "hooks": {
376
+ "PreToolUse": [
377
+ {
378
+ "matcher": "Bash",
379
+ "hooks": [
380
+ {
381
+ "type": "command",
382
+ "command": "node my-validation-script.js",
383
+ "blocking": true
384
+ }
385
+ ]
386
+ }
387
+ ]
388
+ }
389
+ }</code></pre>
390
+ </div>
391
+
392
+ <div class="alert alert-info">
393
+ <span class="alert-icon">&#128161;</span>
394
+ <div class="alert-content">
395
+ <h5 data-lang="fr">Variables d'environnement</h5>
396
+ <h5 data-lang="en">Environment variables</h5>
397
+ <p data-lang="fr">
398
+ Les hooks ont acces a <code>$TOOL_NAME</code>, <code>$TOOL_INPUT</code>, <code>$TOOL_OUTPUT</code>, et <code>$CLAUDE_PLUGIN_ROOT</code>.
399
+ </p>
400
+ <p data-lang="en">
401
+ Hooks have access to <code>$TOOL_NAME</code>, <code>$TOOL_INPUT</code>, <code>$TOOL_OUTPUT</code>, and <code>$CLAUDE_PLUGIN_ROOT</code>.
402
+ </p>
403
+ </div>
404
+ </div>
405
+ </section>
406
+ </div>
407
+ </main>
408
+ </div>
409
+ </div>
410
+
411
+ <!-- Mobile Menu Button -->
412
+ <button class="mobile-menu-btn">&#9776;</button>
413
+ <div class="overlay"></div>
414
+
415
+ <script src="js/app.js"></script>
416
+ </body>
417
+ </html>