claude-code-memory-explorer 0.1.0 → 0.2.2

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.
Files changed (14) hide show
  1. package/package.json +27 -2
  2. package/public/app.js +69 -29
  3. package/public/index.html +3 -0
  4. package/public/style.css +28 -13
  5. package/server.js +34 -0
  6. package/.claude/commands/release.md +0 -54
  7. package/.github/workflows/pages.yml +0 -36
  8. package/CLAUDE.md +0 -49
  9. package/assets/main-dark.png +0 -0
  10. package/assets/main-light.png +0 -0
  11. package/biome.json +0 -33
  12. package/docs/assets/main-dark.png +0 -0
  13. package/docs/assets/main-light.png +0 -0
  14. package/docs/index.html +0 -988
package/docs/index.html DELETED
@@ -1,988 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Claude Code Memory — See everything Claude Code knows about your project</title>
7
- <meta name="description" content="A memory explorer dashboard for Claude Code. Visualize CLAUDE.md files, rules, auto memory, and imports that shape AI behavior.">
8
- <meta property="og:title" content="Claude Code Memory Explorer">
9
- <meta property="og:description" content="See everything Claude Code knows about your project — CLAUDE.md files, rules, auto memory, and imports.">
10
- <meta property="og:type" content="website">
11
- <meta property="og:url" content="https://nikiforovall.blog/claude-code-memory/">
12
- <meta property="og:image" content="https://raw.githubusercontent.com/NikiforovAll/claude-code-memory/main/assets/main-light.png">
13
- <meta name="twitter:card" content="summary_large_image">
14
- <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%231a1a1a'/%3E%3Cellipse cx='16' cy='9' rx='8' ry='3' stroke='%23e8927c' stroke-width='2' fill='none'/%3E%3Cpath d='M8 9v4c0 1.66 3.58 3 8 3s8-1.34 8-3V9' stroke='%23e8927c' stroke-width='2' fill='none'/%3E%3Cpath d='M8 13v4c0 1.66 3.58 3 8 3s8-1.34 8-3v-4' stroke='%23e8927c' stroke-width='2' fill='none'/%3E%3Cpath d='M8 17v4c0 1.66 3.58 3 8 3s8-1.34 8-3v-4' stroke='%23e8927c' stroke-width='2' fill='none'/%3E%3C/svg%3E">
15
- <link rel="preconnect" href="https://fonts.googleapis.com">
16
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
- <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
18
- <style>
19
- *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
20
-
21
- :root {
22
- --bg: #faf9f7;
23
- --bg-alt: #f3f1ee;
24
- --bg-dark: #1a1a1a;
25
- --text: #2a2a2a;
26
- --text-secondary: #5a5a5a;
27
- --text-muted: #8a8a8a;
28
- --accent: #E86F33;
29
- --accent-light: #e8927c;
30
- --accent-dim: rgba(232, 111, 51, 0.1);
31
- --accent-glow: rgba(232, 111, 51, 0.25);
32
- --border: #e0ddd8;
33
- --mono: 'IBM Plex Mono', monospace;
34
- --serif: 'Playfair Display', serif;
35
- --max-w: 1120px;
36
- --section-gap: 120px;
37
- }
38
-
39
- html { scroll-behavior: smooth; }
40
-
41
- body {
42
- font-family: var(--mono);
43
- font-size: 15px;
44
- background: var(--bg);
45
- color: var(--text);
46
- line-height: 1.65;
47
- -webkit-font-smoothing: antialiased;
48
- overflow-x: hidden;
49
- }
50
-
51
- body::after {
52
- content: '';
53
- position: fixed;
54
- inset: 0;
55
- pointer-events: none;
56
- opacity: 0.03;
57
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
58
- background-size: 256px 256px;
59
- z-index: 9999;
60
- }
61
-
62
- .container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
63
-
64
- /* -- NAV -- */
65
- nav {
66
- position: fixed;
67
- top: 0;
68
- left: 0;
69
- right: 0;
70
- z-index: 100;
71
- background: rgba(250, 249, 247, 0.85);
72
- backdrop-filter: blur(12px);
73
- -webkit-backdrop-filter: blur(12px);
74
- border-bottom: 1px solid var(--border);
75
- transition: box-shadow 0.3s;
76
- }
77
- nav.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
78
- nav .container {
79
- display: flex;
80
- align-items: center;
81
- justify-content: space-between;
82
- height: 60px;
83
- }
84
- .nav-brand {
85
- display: flex;
86
- align-items: center;
87
- gap: 10px;
88
- text-decoration: none;
89
- color: var(--text);
90
- }
91
- .nav-brand svg { width: 28px; height: 28px; }
92
- .nav-brand span {
93
- font-family: var(--mono);
94
- font-weight: 600;
95
- font-size: 14px;
96
- letter-spacing: -0.02em;
97
- }
98
- .nav-links { display: flex; align-items: center; gap: 24px; }
99
- .nav-links a {
100
- font-size: 13px;
101
- color: var(--text-secondary);
102
- text-decoration: none;
103
- transition: color 0.2s;
104
- }
105
- .nav-links a:hover { color: var(--accent); }
106
- .nav-gh {
107
- display: flex;
108
- align-items: center;
109
- gap: 6px;
110
- padding: 6px 14px;
111
- border: 1px solid var(--border);
112
- border-radius: 6px;
113
- font-size: 13px;
114
- color: var(--text);
115
- text-decoration: none;
116
- transition: border-color 0.2s, background 0.2s;
117
- }
118
- .nav-gh:hover { border-color: var(--accent); background: var(--accent-dim); }
119
- .nav-gh svg { width: 16px; height: 16px; }
120
-
121
- /* -- HERO -- */
122
- .hero {
123
- padding-top: 140px;
124
- padding-bottom: var(--section-gap);
125
- text-align: center;
126
- }
127
- .hero-badge {
128
- display: inline-flex;
129
- align-items: center;
130
- gap: 8px;
131
- padding: 6px 16px;
132
- background: var(--accent-dim);
133
- border: 1px solid rgba(232, 111, 51, 0.2);
134
- border-radius: 100px;
135
- font-size: 12px;
136
- color: var(--accent);
137
- font-weight: 500;
138
- margin-bottom: 32px;
139
- letter-spacing: 0.02em;
140
- }
141
- .hero-badge .dot {
142
- width: 6px;
143
- height: 6px;
144
- border-radius: 50%;
145
- background: var(--accent);
146
- animation: pulse 2s ease-in-out infinite;
147
- }
148
- @keyframes pulse {
149
- 0%, 100% { opacity: 1; }
150
- 50% { opacity: 0.3; }
151
- }
152
- .hero h1 {
153
- font-family: var(--serif);
154
- font-size: clamp(40px, 6vw, 68px);
155
- font-weight: 700;
156
- line-height: 1.1;
157
- letter-spacing: -0.03em;
158
- color: var(--bg-dark);
159
- margin-bottom: 24px;
160
- }
161
- .hero h1 em {
162
- font-style: italic;
163
- color: var(--accent);
164
- }
165
- .hero-sub {
166
- font-size: 16px;
167
- color: var(--text-secondary);
168
- max-width: 560px;
169
- margin: 0 auto 40px;
170
- line-height: 1.7;
171
- }
172
-
173
- /* Install block */
174
- .install-block {
175
- display: inline-flex;
176
- align-items: center;
177
- gap: 0;
178
- background: var(--bg-dark);
179
- border-radius: 10px;
180
- overflow: hidden;
181
- margin-bottom: 56px;
182
- box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.05) inset;
183
- }
184
- .install-block code {
185
- display: block;
186
- padding: 14px 20px 14px 24px;
187
- font-family: var(--mono);
188
- font-size: 14px;
189
- color: #f0f1f3;
190
- white-space: nowrap;
191
- letter-spacing: -0.01em;
192
- }
193
- .install-block code .prompt { color: var(--accent-light); }
194
- .install-copy {
195
- padding: 14px 18px;
196
- background: none;
197
- border: none;
198
- border-left: 1px solid #333;
199
- color: #888;
200
- cursor: pointer;
201
- transition: color 0.2s, background 0.2s;
202
- display: flex;
203
- align-items: center;
204
- }
205
- .install-copy:hover { color: #fff; background: rgba(255,255,255,0.05); }
206
- .install-copy svg { width: 16px; height: 16px; }
207
- .install-copy.copied { color: #3ecf8e; }
208
-
209
- /* Hero screenshot */
210
- .hero-screenshot {
211
- max-width: 960px;
212
- margin: 0 auto;
213
- border-radius: 12px;
214
- overflow: hidden;
215
- box-shadow:
216
- 0 8px 40px rgba(0,0,0,0.12),
217
- 0 2px 8px rgba(0,0,0,0.06);
218
- transform: perspective(1200px) rotateX(2deg);
219
- transition: transform 0.4s ease;
220
- }
221
- .hero-screenshot:hover { transform: perspective(1200px) rotateX(0deg); }
222
- .hero-screenshot { cursor: pointer; }
223
- .hero-screenshot img {
224
- width: 100%;
225
- display: block;
226
- }
227
-
228
- /* -- FEATURES -- */
229
- .features { padding-bottom: var(--section-gap); }
230
- .section-label {
231
- font-size: 12px;
232
- font-weight: 600;
233
- text-transform: uppercase;
234
- letter-spacing: 0.1em;
235
- color: var(--accent);
236
- margin-bottom: 12px;
237
- }
238
- .section-title {
239
- font-family: var(--serif);
240
- font-size: clamp(28px, 4vw, 40px);
241
- font-weight: 600;
242
- color: var(--bg-dark);
243
- letter-spacing: -0.02em;
244
- margin-bottom: 56px;
245
- line-height: 1.2;
246
- }
247
- .features-grid {
248
- display: grid;
249
- grid-template-columns: repeat(3, 1fr);
250
- gap: 24px;
251
- }
252
- .feature-card {
253
- padding: 28px;
254
- background: var(--bg);
255
- border: 1px solid var(--border);
256
- border-radius: 10px;
257
- cursor: default;
258
- transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
259
- }
260
- .feature-card:hover {
261
- border-color: var(--accent-light);
262
- box-shadow: 0 4px 20px var(--accent-glow);
263
- transform: translateY(-2px);
264
- }
265
- .feature-icon {
266
- width: 40px;
267
- height: 40px;
268
- display: flex;
269
- align-items: center;
270
- justify-content: center;
271
- background: var(--accent-dim);
272
- border-radius: 8px;
273
- margin-bottom: 16px;
274
- color: var(--accent);
275
- font-size: 18px;
276
- }
277
- .feature-card h3 {
278
- font-family: var(--mono);
279
- font-size: 14px;
280
- font-weight: 600;
281
- margin-bottom: 8px;
282
- color: var(--bg-dark);
283
- }
284
- .feature-card p {
285
- font-size: 13px;
286
- color: var(--text-secondary);
287
- line-height: 1.6;
288
- }
289
-
290
- /* -- MEMORY STACK -- */
291
- .memory-stack { padding-bottom: var(--section-gap); }
292
- .stack-table {
293
- width: 100%;
294
- border-collapse: collapse;
295
- font-size: 13px;
296
- }
297
- .stack-table th {
298
- text-align: left;
299
- padding: 12px 16px;
300
- border-bottom: 2px solid var(--border);
301
- font-weight: 600;
302
- color: var(--text);
303
- font-size: 12px;
304
- text-transform: uppercase;
305
- letter-spacing: 0.05em;
306
- }
307
- .stack-table td {
308
- padding: 12px 16px;
309
- border-bottom: 1px solid var(--border);
310
- color: var(--text-secondary);
311
- }
312
- .stack-table tr:hover td { background: var(--accent-dim); }
313
- .stack-table code {
314
- background: var(--bg-alt);
315
- padding: 2px 6px;
316
- border-radius: 4px;
317
- font-size: 12px;
318
- }
319
- .load-badge {
320
- display: inline-block;
321
- padding: 2px 8px;
322
- border-radius: 4px;
323
- font-size: 11px;
324
- font-weight: 500;
325
- }
326
- .load-always { background: rgba(76, 175, 80, 0.1); color: #4caf50; }
327
- .load-conditional { background: rgba(156, 39, 176, 0.1); color: #9c27b0; }
328
- .load-startup { background: rgba(255, 152, 0, 0.1); color: #ff9800; }
329
- .load-ondemand { background: rgba(158, 158, 158, 0.1); color: #9e9e9e; }
330
-
331
- /* -- HOW IT WORKS -- */
332
- .how-it-works {
333
- padding-bottom: var(--section-gap);
334
- }
335
- .steps {
336
- display: grid;
337
- grid-template-columns: repeat(3, 1fr);
338
- gap: 32px;
339
- position: relative;
340
- }
341
- .steps::before {
342
- content: '';
343
- position: absolute;
344
- top: 32px;
345
- left: calc(33.33% / 2 + 32px);
346
- right: calc(33.33% / 2 + 32px);
347
- height: 2px;
348
- background: var(--border);
349
- }
350
- .step {
351
- text-align: center;
352
- position: relative;
353
- }
354
- .step-num {
355
- width: 64px;
356
- height: 64px;
357
- border-radius: 50%;
358
- display: flex;
359
- align-items: center;
360
- justify-content: center;
361
- font-family: var(--serif);
362
- font-size: 24px;
363
- font-weight: 700;
364
- color: var(--accent);
365
- background: var(--bg);
366
- border: 2px solid var(--border);
367
- margin: 0 auto 20px;
368
- position: relative;
369
- z-index: 1;
370
- transition: border-color 0.3s, background 0.3s;
371
- }
372
- .step:hover .step-num {
373
- border-color: var(--accent);
374
- background: var(--accent-dim);
375
- }
376
- .step-code {
377
- display: inline-block;
378
- padding: 8px 16px;
379
- background: var(--bg-dark);
380
- border-radius: 6px;
381
- font-size: 12px;
382
- color: #f0f1f3;
383
- margin-top: 12px;
384
- font-family: var(--mono);
385
- }
386
- .step h3 {
387
- font-family: var(--mono);
388
- font-size: 14px;
389
- font-weight: 600;
390
- margin-bottom: 8px;
391
- color: var(--bg-dark);
392
- }
393
- .step p {
394
- font-size: 13px;
395
- color: var(--text-secondary);
396
- max-width: 260px;
397
- margin: 0 auto;
398
- line-height: 1.6;
399
- }
400
-
401
- /* -- SCREENSHOTS -- */
402
- .screenshots {
403
- padding-bottom: var(--section-gap);
404
- }
405
- .screenshots-header {
406
- display: flex;
407
- align-items: flex-end;
408
- justify-content: space-between;
409
- margin-bottom: 40px;
410
- }
411
- .theme-toggle {
412
- display: flex;
413
- gap: 4px;
414
- padding: 4px;
415
- background: var(--bg-alt);
416
- border-radius: 8px;
417
- border: 1px solid var(--border);
418
- }
419
- .theme-toggle button {
420
- padding: 8px 16px;
421
- border: none;
422
- border-radius: 6px;
423
- font-family: var(--mono);
424
- font-size: 12px;
425
- font-weight: 500;
426
- cursor: pointer;
427
- background: transparent;
428
- color: var(--text-muted);
429
- transition: all 0.2s;
430
- }
431
- .theme-toggle button.active {
432
- background: var(--bg);
433
- color: var(--text);
434
- box-shadow: 0 1px 4px rgba(0,0,0,0.08);
435
- }
436
- .ss-grid {
437
- display: grid;
438
- grid-template-columns: 1fr 1fr;
439
- gap: 24px;
440
- }
441
- .screenshot-frame {
442
- border-radius: 12px;
443
- overflow: hidden;
444
- border: 1px solid var(--border);
445
- box-shadow: 0 8px 40px rgba(0,0,0,0.08);
446
- cursor: pointer;
447
- position: relative;
448
- }
449
- .screenshot-frame::after {
450
- content: 'Click to enlarge';
451
- position: absolute;
452
- bottom: 12px;
453
- right: 16px;
454
- padding: 4px 10px;
455
- background: rgba(0,0,0,0.6);
456
- color: #fff;
457
- font-size: 11px;
458
- border-radius: 4px;
459
- opacity: 0;
460
- transition: opacity 0.2s;
461
- pointer-events: none;
462
- }
463
- .screenshot-frame:hover::after { opacity: 1; }
464
- .screenshot-frame img {
465
- width: 100%;
466
- display: block;
467
- }
468
- .screenshot-frame img.hidden { display: none; }
469
- .ss-label {
470
- font-size: 12px;
471
- color: var(--text-muted);
472
- text-align: center;
473
- margin-top: 8px;
474
- font-weight: 500;
475
- }
476
-
477
- /* -- LIGHTBOX -- */
478
- .lightbox {
479
- position: fixed;
480
- inset: 0;
481
- z-index: 200;
482
- background: rgba(0, 0, 0, 0.85);
483
- backdrop-filter: blur(8px);
484
- display: flex;
485
- align-items: center;
486
- justify-content: center;
487
- padding: 40px;
488
- cursor: pointer;
489
- opacity: 0;
490
- visibility: hidden;
491
- transition: opacity 0.3s, visibility 0.3s;
492
- }
493
- .lightbox.open {
494
- opacity: 1;
495
- visibility: visible;
496
- }
497
- .lightbox img {
498
- max-width: 90vw;
499
- max-height: 90vh;
500
- border-radius: 12px;
501
- box-shadow: 0 16px 64px rgba(0,0,0,0.6);
502
- transform: scale(0.95);
503
- transition: transform 0.3s ease;
504
- }
505
- .lightbox.open img { transform: scale(1); }
506
- .lightbox-close {
507
- position: absolute;
508
- top: 24px;
509
- right: 32px;
510
- width: 40px;
511
- height: 40px;
512
- border: none;
513
- background: rgba(255,255,255,0.1);
514
- border-radius: 50%;
515
- color: #fff;
516
- font-size: 20px;
517
- cursor: pointer;
518
- display: flex;
519
- align-items: center;
520
- justify-content: center;
521
- transition: background 0.2s;
522
- }
523
- .lightbox-close:hover { background: rgba(255,255,255,0.2); }
524
-
525
- /* -- FAQ -- */
526
- .faq { padding-bottom: var(--section-gap); }
527
- .faq-list { max-width: 720px; }
528
- .faq-item {
529
- border-bottom: 1px solid var(--border);
530
- }
531
- .faq-item:first-child { border-top: 1px solid var(--border); }
532
- .faq-q {
533
- display: flex;
534
- align-items: center;
535
- justify-content: space-between;
536
- width: 100%;
537
- padding: 20px 0;
538
- background: none;
539
- border: none;
540
- font-family: var(--mono);
541
- font-size: 14px;
542
- font-weight: 500;
543
- color: var(--text);
544
- cursor: pointer;
545
- text-align: left;
546
- gap: 16px;
547
- }
548
- .faq-q:hover { color: var(--accent); }
549
- .faq-chevron {
550
- width: 20px;
551
- height: 20px;
552
- flex-shrink: 0;
553
- transition: transform 0.3s;
554
- color: var(--text-muted);
555
- }
556
- .faq-item.open .faq-chevron { transform: rotate(180deg); }
557
- .faq-a {
558
- max-height: 0;
559
- overflow: hidden;
560
- transition: max-height 0.35s ease, padding 0.35s ease;
561
- }
562
- .faq-item.open .faq-a {
563
- max-height: 200px;
564
- padding-bottom: 20px;
565
- }
566
- .faq-a p {
567
- font-size: 13px;
568
- color: var(--text-secondary);
569
- line-height: 1.7;
570
- }
571
-
572
- /* -- FOOTER -- */
573
- footer {
574
- padding: 40px 0;
575
- border-top: 1px solid var(--border);
576
- }
577
- footer .container {
578
- display: flex;
579
- align-items: center;
580
- justify-content: space-between;
581
- }
582
- .footer-left {
583
- display: flex;
584
- align-items: center;
585
- gap: 20px;
586
- font-size: 13px;
587
- color: var(--text-muted);
588
- }
589
- .footer-left a {
590
- color: var(--text-secondary);
591
- text-decoration: none;
592
- transition: color 0.2s;
593
- }
594
- .footer-left a:hover { color: var(--accent); }
595
- .footer-right {
596
- display: flex;
597
- align-items: center;
598
- gap: 16px;
599
- }
600
- .footer-right a {
601
- color: var(--text-muted);
602
- text-decoration: none;
603
- font-size: 13px;
604
- transition: color 0.2s;
605
- }
606
- .footer-right a:hover { color: var(--accent); }
607
-
608
- /* -- ANIMATIONS -- */
609
- .fade-in {
610
- opacity: 0;
611
- transform: translateY(20px);
612
- transition: opacity 0.6s ease, transform 0.6s ease;
613
- }
614
- .fade-in.visible {
615
- opacity: 1;
616
- transform: translateY(0);
617
- }
618
- .fade-in.delay-1 { transition-delay: 0.1s; }
619
- .fade-in.delay-2 { transition-delay: 0.2s; }
620
- .fade-in.delay-3 { transition-delay: 0.3s; }
621
- .fade-in.delay-4 { transition-delay: 0.4s; }
622
- .fade-in.delay-5 { transition-delay: 0.5s; }
623
-
624
- /* -- RESPONSIVE -- */
625
- @media (max-width: 768px) {
626
- :root { --section-gap: 80px; }
627
- .container { padding: 0 20px; }
628
- .hero { padding-top: 110px; }
629
- .hero-sub { font-size: 14px; }
630
- .features-grid { grid-template-columns: 1fr; gap: 16px; }
631
- .steps { grid-template-columns: 1fr; gap: 40px; }
632
- .steps::before { display: none; }
633
- .nav-links a:not(.nav-gh) { display: none; }
634
- .screenshots-header { flex-direction: column; align-items: flex-start; gap: 16px; }
635
- .hero-screenshot { transform: none; }
636
- .hero-screenshot:hover { transform: none; }
637
- .install-block code { font-size: 12px; padding: 12px 14px; }
638
- footer .container { flex-direction: column; gap: 16px; text-align: center; }
639
- .ss-grid { grid-template-columns: 1fr; }
640
- .stack-table { font-size: 12px; }
641
- .stack-table th, .stack-table td { padding: 8px 10px; }
642
- }
643
-
644
- @media (min-width: 769px) and (max-width: 1024px) {
645
- .features-grid { grid-template-columns: repeat(2, 1fr); }
646
- }
647
- </style>
648
- </head>
649
- <body>
650
-
651
- <!-- NAV -->
652
- <nav>
653
- <div class="container">
654
- <a href="#" class="nav-brand">
655
- <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
656
- <rect width="32" height="32" rx="6" fill="#1a1a1a"/>
657
- <ellipse cx="16" cy="9" rx="8" ry="3" stroke="#e8927c" stroke-width="2" fill="none"/>
658
- <path d="M8 9v4c0 1.66 3.58 3 8 3s8-1.34 8-3V9" stroke="#e8927c" stroke-width="2" fill="none"/>
659
- <path d="M8 13v4c0 1.66 3.58 3 8 3s8-1.34 8-3v-4" stroke="#e8927c" stroke-width="2" fill="none"/>
660
- <path d="M8 17v4c0 1.66 3.58 3 8 3s8-1.34 8-3v-4" stroke="#e8927c" stroke-width="2" fill="none"/>
661
- </svg>
662
- <span>Claude Code Memory</span>
663
- </a>
664
- <div class="nav-links">
665
- <a href="#features">Features</a>
666
- <a href="#memory-stack">Memory stack</a>
667
- <a href="#how-it-works">How it works</a>
668
- <a href="#faq">FAQ</a>
669
- <a href="https://github.com/NikiforovAll/claude-code-memory" class="nav-gh" target="_blank" rel="noopener">
670
- <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
671
- GitHub
672
- </a>
673
- </div>
674
- </div>
675
- </nav>
676
-
677
- <!-- HERO -->
678
- <section class="hero">
679
- <div class="container">
680
- <div class="fade-in">
681
- <div class="hero-badge">
682
- <span class="dot"></span>
683
- Open source &middot; MIT
684
- </div>
685
- </div>
686
- <h1 class="fade-in delay-1">See everything Claude Code<br><em>knows</em> about your project</h1>
687
- <p class="hero-sub fade-in delay-2">Visualize the full memory stack that shapes Claude Code behavior &mdash; CLAUDE.md files, rules, auto memory, and @import chains. Read-only dashboard, zero config.</p>
688
- <div class="fade-in delay-3">
689
- <div class="install-block">
690
- <code><span class="prompt">$</span> npx claude-code-memory-explorer --open</code>
691
- <button class="install-copy" onclick="copyInstall(this)" title="Copy to clipboard">
692
- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 012 9.5v-7A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5V5"/></svg>
693
- </button>
694
- </div>
695
- </div>
696
- <div class="hero-screenshot fade-in delay-4">
697
- <img src="assets/main-dark.png" alt="Claude Code Memory Explorer dashboard">
698
- </div>
699
- </div>
700
- </section>
701
-
702
- <!-- FEATURES -->
703
- <section class="features" id="features">
704
- <div class="container">
705
- <p class="section-label fade-in">Features</p>
706
- <h2 class="section-title fade-in">Understand every instruction<br>that shapes Claude Code</h2>
707
- <div class="features-grid">
708
- <div class="feature-card fade-in">
709
- <div class="feature-icon">
710
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="10" cy="5" rx="7" ry="2.5"/><path d="M3 5v3c0 1.38 3.13 2.5 7 2.5s7-1.12 7-2.5V5"/><path d="M3 8v3c0 1.38 3.13 2.5 7 2.5s7-1.12 7-2.5V8"/><path d="M3 11v3c0 1.38 3.13 2.5 7 2.5s7-1.12 7-2.5v-3"/></svg>
711
- </div>
712
- <h3>Full memory stack</h3>
713
- <p>User CLAUDE.md, project CLAUDE.md, CLAUDE.local.md, rules, auto memory, and managed policies &mdash; all in one view.</p>
714
- </div>
715
- <div class="feature-card fade-in delay-1">
716
- <div class="feature-icon">
717
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 3H4a1 1 0 00-1 1v4"/><path d="M12 3h4a1 1 0 011 1v4"/><path d="M8 17H4a1 1 0 01-1-1v-4"/><path d="M12 17h4a1 1 0 001-1v-4"/><path d="M7 10h6"/></svg>
718
- </div>
719
- <h3>Import resolution</h3>
720
- <p>Follows @path/to/file.md references and [text](file.md) markdown links up to 5 levels deep. Clickable inline links in preview.</p>
721
- </div>
722
- <div class="feature-card fade-in delay-2">
723
- <div class="feature-icon">
724
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3h4v4H3zM13 3h4v4h-4zM3 13h4v4H3z"/><path d="M5 7v6M7 5h6M5 15h8a2 2 0 002-2V7"/></svg>
725
- </div>
726
- <h3>Rules inspection</h3>
727
- <p>Path-scoped frontmatter with glob patterns. See which rules load conditionally and which always apply.</p>
728
- </div>
729
- <div class="feature-card fade-in delay-3">
730
- <div class="feature-icon">
731
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 2a4 4 0 014 4c0 2-1.5 3-2.5 4S10 12 10 14"/><circle cx="10" cy="17" r="0.5" fill="currentColor"/></svg>
732
- </div>
733
- <h3>Auto memory</h3>
734
- <p>Visualizes MEMORY.md with startup cutoff, on-demand topic files, and frontmatter badges for type and name.</p>
735
- </div>
736
- <div class="feature-card fade-in delay-4">
737
- <div class="feature-icon">
738
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="10" cy="10" r="3"/><path d="M10 3v2M10 15v2M3 10h2M15 10h2M5.05 5.05l1.41 1.41M13.54 13.54l1.41 1.41M5.05 14.95l1.41-1.41M13.54 6.46l1.41-1.41"/></svg>
739
- </div>
740
- <h3>Dark / light theme</h3>
741
- <p>Dark default with light toggle. IBM Plex Mono and Playfair Display fonts. Keyboard shortcut: t.</p>
742
- </div>
743
- <div class="feature-card fade-in delay-5">
744
- <div class="feature-icon">
745
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6h12M4 10h12M4 14h8"/></svg>
746
- </div>
747
- <h3>Keyboard-driven</h3>
748
- <p>j/k navigation, h/l group jump, e to open in editor, Shift+P project picker, ? for help. Resizable sidebar.</p>
749
- </div>
750
- </div>
751
- </div>
752
- </section>
753
-
754
- <!-- MEMORY STACK -->
755
- <section class="memory-stack" id="memory-stack">
756
- <div class="container">
757
- <p class="section-label fade-in">Architecture</p>
758
- <h2 class="section-title fade-in">The Claude Code memory stack</h2>
759
- <div class="fade-in">
760
- <table class="stack-table">
761
- <thead>
762
- <tr>
763
- <th>Source</th>
764
- <th>Path</th>
765
- <th>Load behavior</th>
766
- </tr>
767
- </thead>
768
- <tbody>
769
- <tr>
770
- <td>Managed policy</td>
771
- <td><code>/etc/claude-code/CLAUDE.md</code></td>
772
- <td><span class="load-badge load-always">Always</span></td>
773
- </tr>
774
- <tr>
775
- <td>User CLAUDE.md</td>
776
- <td><code>~/.claude/CLAUDE.md</code></td>
777
- <td><span class="load-badge load-always">Always</span></td>
778
- </tr>
779
- <tr>
780
- <td>Project CLAUDE.md</td>
781
- <td><code>./CLAUDE.md</code> or <code>./.claude/CLAUDE.md</code></td>
782
- <td><span class="load-badge load-always">Always</span></td>
783
- </tr>
784
- <tr>
785
- <td>CLAUDE.local.md</td>
786
- <td><code>./CLAUDE.local.md</code></td>
787
- <td><span class="load-badge load-always">Always</span></td>
788
- </tr>
789
- <tr>
790
- <td>Rules</td>
791
- <td><code>.claude/rules/*.md</code></td>
792
- <td><span class="load-badge load-conditional">Conditional</span> (path-scoped)</td>
793
- </tr>
794
- <tr>
795
- <td>Auto memory</td>
796
- <td><code>~/.claude/projects/&lt;encoded&gt;/memory/</code></td>
797
- <td><span class="load-badge load-startup">Startup</span> (MEMORY.md) or <span class="load-badge load-ondemand">On-demand</span></td>
798
- </tr>
799
- </tbody>
800
- </table>
801
- </div>
802
- </div>
803
- </section>
804
-
805
- <!-- HOW IT WORKS -->
806
- <section class="how-it-works" id="how-it-works">
807
- <div class="container">
808
- <p class="section-label fade-in">Setup</p>
809
- <h2 class="section-title fade-in">One command. Full memory visibility.</h2>
810
- <div class="steps">
811
- <div class="step fade-in">
812
- <div class="step-num">1</div>
813
- <h3>Run it</h3>
814
- <p>One command to launch. No config, no dependencies to install. Opens in your browser.</p>
815
- <div class="step-code">npx claude-code-memory-explorer --open</div>
816
- </div>
817
- <div class="step fade-in delay-2">
818
- <div class="step-num">2</div>
819
- <h3>Browse memory</h3>
820
- <p>Tree panel groups sources by scope. Click any file to see syntax-highlighted preview with frontmatter badges.</p>
821
- <div class="step-code">localhost:3459</div>
822
- </div>
823
- <div class="step fade-in delay-4">
824
- <div class="step-num">3</div>
825
- <h3>Follow imports</h3>
826
- <p>Click @import links to navigate the chain. See which files include which, up to 5 levels deep.</p>
827
- <div class="step-code">@path &rarr; resolved &rarr; preview</div>
828
- </div>
829
- </div>
830
- </div>
831
- </section>
832
-
833
- <!-- SCREENSHOTS -->
834
- <section class="screenshots" id="screenshots">
835
- <div class="container">
836
- <div class="screenshots-header">
837
- <div>
838
- <p class="section-label fade-in">Preview</p>
839
- <h2 class="section-title fade-in" style="margin-bottom:0">See it in action</h2>
840
- </div>
841
- <div class="theme-toggle fade-in">
842
- <button class="active" onclick="showScreenshot('dark', this)">Dark</button>
843
- <button onclick="showScreenshot('light', this)">Light</button>
844
- </div>
845
- </div>
846
- <div class="ss-grid">
847
- <div>
848
- <div class="screenshot-frame fade-in">
849
- <img class="ss-dark" src="assets/main-dark.png" alt="Dashboard dark theme">
850
- <img class="ss-light hidden" src="assets/main-light.png" alt="Dashboard light theme">
851
- </div>
852
- <div class="ss-label">Dashboard</div>
853
- </div>
854
- <div>
855
- <div class="screenshot-frame fade-in delay-1">
856
- <img class="ss-dark" src="assets/main-dark.png" alt="Dashboard dark theme">
857
- <img class="ss-light hidden" src="assets/main-light.png" alt="Dashboard light theme">
858
- </div>
859
- <div class="ss-label">Memory preview</div>
860
- </div>
861
- </div>
862
- </div>
863
- </section>
864
-
865
- <!-- FAQ -->
866
- <section class="faq" id="faq">
867
- <div class="container">
868
- <p class="section-label fade-in">FAQ</p>
869
- <h2 class="section-title fade-in">Common questions</h2>
870
- <div class="faq-list">
871
- <div class="faq-item fade-in">
872
- <button class="faq-q" onclick="toggleFaq(this)">
873
- Does it modify any files?
874
- <svg class="faq-chevron" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 8l5 5 5-5"/></svg>
875
- </button>
876
- <div class="faq-a"><p>No. Completely read-only. It only reads markdown files from Claude Code memory locations. Nothing is written or modified.</p></div>
877
- </div>
878
- <div class="faq-item fade-in delay-1">
879
- <button class="faq-q" onclick="toggleFaq(this)">
880
- How does it find my memory files?
881
- <svg class="faq-chevron" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 8l5 5 5-5"/></svg>
882
- </button>
883
- <div class="faq-a"><p>It scans <code>~/.claude/</code>, ancestor directories for CLAUDE.md files, project <code>.claude/rules/</code>, and auto memory directories. Project paths are encoded the same way Claude Code does it internally.</p></div>
884
- </div>
885
- <div class="faq-item fade-in delay-2">
886
- <button class="faq-q" onclick="toggleFaq(this)">
887
- Can I switch projects?
888
- <svg class="faq-chevron" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 8l5 5 5-5"/></svg>
889
- </button>
890
- <div class="faq-a"><p>Yes. Use the project picker (Shift+P) or pass <code>?project=/path</code> as a URL parameter.</p></div>
891
- </div>
892
- <div class="faq-item fade-in delay-3">
893
- <button class="faq-q" onclick="toggleFaq(this)">
894
- Does it work with Claude Code Hub?
895
- <svg class="faq-chevron" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 8l5 5 5-5"/></svg>
896
- </button>
897
- <div class="faq-a"><p>Yes. It exposes a <code>/hub-config</code> endpoint for hub tab integration. Works alongside Cost and Marketplace tabs.</p></div>
898
- </div>
899
- </div>
900
- </div>
901
- </section>
902
-
903
- <!-- LIGHTBOX -->
904
- <div class="lightbox" id="lightbox" onclick="closeLightbox()">
905
- <button class="lightbox-close" onclick="closeLightbox()">&times;</button>
906
- <img id="lightbox-img" src="" alt="">
907
- </div>
908
-
909
- <!-- FOOTER -->
910
- <footer>
911
- <div class="container">
912
- <div class="footer-left">
913
- <span>MIT License</span>
914
- <a href="https://github.com/NikiforovAll/claude-code-memory" target="_blank" rel="noopener">GitHub</a>
915
- <a href="https://www.npmjs.com/package/claude-code-memory-explorer" target="_blank" rel="noopener">npm</a>
916
- </div>
917
- <div class="footer-right">
918
- <a href="https://github.com/NikiforovAll" target="_blank" rel="noopener">Built by NikiforovAll</a>
919
- </div>
920
- </div>
921
- </footer>
922
-
923
- <script>
924
- const nav = document.querySelector('nav');
925
- window.addEventListener('scroll', () => {
926
- nav.classList.toggle('scrolled', window.scrollY > 10);
927
- }, { passive: true });
928
-
929
- const observer = new IntersectionObserver((entries) => {
930
- entries.forEach(e => {
931
- if (e.isIntersecting) {
932
- e.target.classList.add('visible');
933
- observer.unobserve(e.target);
934
- }
935
- });
936
- }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
937
-
938
- document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
939
-
940
- function copyInstall(btn) {
941
- navigator.clipboard.writeText('npx claude-code-memory-explorer --open').then(() => {
942
- btn.classList.add('copied');
943
- btn.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 8.5l3 3 7-7"/></svg>';
944
- setTimeout(() => {
945
- btn.classList.remove('copied');
946
- btn.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 012 9.5v-7A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5V5"/></svg>';
947
- }, 2000);
948
- });
949
- }
950
-
951
- document.querySelectorAll('.screenshot-frame, .hero-screenshot').forEach(el => {
952
- el.addEventListener('click', () => {
953
- const img = el.querySelector('img:not(.hidden)');
954
- if (!img) return;
955
- const lb = document.getElementById('lightbox');
956
- document.getElementById('lightbox-img').src = img.src;
957
- lb.classList.add('open');
958
- document.body.style.overflow = 'hidden';
959
- });
960
- });
961
-
962
- function closeLightbox() {
963
- const lb = document.getElementById('lightbox');
964
- lb.classList.remove('open');
965
- document.body.style.overflow = '';
966
- }
967
-
968
- document.addEventListener('keydown', (e) => {
969
- if (e.key === 'Escape') closeLightbox();
970
- });
971
-
972
- function showScreenshot(theme, btn) {
973
- document.querySelectorAll('.ss-dark').forEach(el => el.classList.toggle('hidden', theme !== 'dark'));
974
- document.querySelectorAll('.ss-light').forEach(el => el.classList.toggle('hidden', theme !== 'light'));
975
- btn.parentElement.querySelectorAll('button').forEach(b => b.classList.remove('active'));
976
- btn.classList.add('active');
977
- }
978
-
979
- function toggleFaq(btn) {
980
- const item = btn.parentElement;
981
- const wasOpen = item.classList.contains('open');
982
- document.querySelectorAll('.faq-item.open').forEach(i => i.classList.remove('open'));
983
- if (!wasOpen) item.classList.add('open');
984
- }
985
- </script>
986
-
987
- </body>
988
- </html>