Repository navigation
Expand file tree
/
Copy pathscreenshots.html
More file actions
799 lines (730 loc) Β· 36 KB
/
Copy pathscreenshots.html
File metadata and controls
799 lines (730 loc) Β· 36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screenshots - Open Owl</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Explore Open Owl's features through screenshots. Visual walkthrough of settings management, MCP servers, subagents, skills, slash commands, and more.">
<meta name="keywords" content="Open Owl Screenshots, Claude Code UI, Visual Configuration Manager">
<meta name="author" content="Open Owl Contributors">
<!-- Open Graph / Social Media -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://antonbelev.github.io/open-owl/screenshots.html">
<meta property="og:title" content="Screenshots - Open Owl">
<meta property="og:description" content="Visual walkthrough of Open Owl features">
<meta property="og:image" content="https://antonbelev.github.io/open-owl/assets/og-image.png">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/logo.svg">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom Styles -->
<link rel="stylesheet" href="assets/styles.css">
<style>
.screenshot-img {
border-radius: 0.5rem;
border: 2px solid rgb(51, 65, 85);
transition: all 0.3s ease;
cursor: pointer;
}
.screenshot-img:hover {
border-color: rgb(59, 130, 246);
transform: scale(1.02);
box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
max-width: 90%;
max-height: 90%;
}
.close-modal {
position: absolute;
top: 20px;
right: 40px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
.close-modal:hover {
color: #bbb;
}
</style>
<!-- Google Analytics -->
<script src="assets/analytics.js"></script>
</head>
<body class="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white min-h-screen" data-page="screenshots">
<!-- Navigation will be loaded dynamically by header.js -->
<!-- Hero Section -->
<section class="pt-32 pb-12 px-6">
<div class="container mx-auto text-center">
<div class="text-6xl mb-6">πΈ</div>
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
Feature Screenshots
</h1>
<p class="text-lg text-slate-300 mb-4 max-w-2xl mx-auto">
Explore Open Owl's intuitive interface through visual walkthroughs
</p>
<p class="text-sm text-slate-400 max-w-xl mx-auto">
All features shown are available on macOS (Intel & Apple Silicon). Windows and Linux support coming soon.
</p>
</div>
</section>
<!-- Table of Contents -->
<section class="pb-8 px-6">
<div class="container mx-auto max-w-5xl">
<div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
<h2 class="text-xl font-semibold mb-4">Jump to Section</h2>
<div class="grid md:grid-cols-3 gap-3 text-sm">
<a href="#year-review" class="text-amber-400 hover:underline font-semibold">π 2025 Year in Review</a>
<a href="#dashboard" class="text-blue-400 hover:underline">π Dashboard</a>
<a href="#settings" class="text-blue-400 hover:underline">βοΈ Settings</a>
<a href="#subagents" class="text-blue-400 hover:underline">π€ Subagents</a>
<a href="#skills" class="text-blue-400 hover:underline">π― Skills</a>
<a href="#commands" class="text-blue-400 hover:underline">β‘ Slash Commands</a>
<a href="#plugins" class="text-blue-400 hover:underline">π§© Plugins</a>
<a href="#hooks" class="text-blue-400 hover:underline">πͺ Hooks</a>
<a href="#mcp" class="text-blue-400 hover:underline">π MCP Servers</a>
<a href="#metrics" class="text-blue-400 hover:underline">π Usage Metrics</a>
<a href="#statusline" class="text-blue-400 hover:underline">π Status Line</a>
<a href="#logs" class="text-blue-400 hover:underline">π Debug Logs</a>
</div>
</div>
</div>
</section>
<!-- Year in Review -->
<section id="year-review" class="py-12 px-6 bg-gradient-to-br from-amber-900/20 to-red-900/20">
<div class="container mx-auto max-w-5xl">
<div class="flex items-center justify-between mb-2">
<h2 class="text-3xl font-bold flex items-center">
<span class="text-4xl mr-3">π</span> 2025 Year in Review
</h2>
<span class="bg-amber-500 text-white text-xs font-semibold px-3 py-1 rounded-full">NEW</span>
</div>
<p class="text-slate-400 mb-6">Celebrate your year of AI-powered development with beautiful stats, badges, and social sharing</p>
<div class="space-y-6">
<div>
<h3 class="text-xl font-semibold mb-3 text-amber-300">Year in Review Dashboard</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/year-in-review-2025-total-tokens.png"
alt="2025 Year in Review"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
View your 2025 coding journey: token usage stats, AI spending, achievement badges, model insights, activity patterns, and social sharing. Features 9 interactive cards with snowfall animations. Available through January 1, 2026.
</p>
</div>
<div class="bg-amber-900/30 border border-amber-500/50 rounded-xl p-6">
<h4 class="font-semibold text-amber-300 mb-3">Key Features</h4>
<ul class="space-y-2 text-sm text-slate-300">
<li>π <strong>Beautiful Stats:</strong> Total tokens, costs, sessions, and daily activity patterns</li>
<li>π <strong>10 Achievement Badges:</strong> Early Bird, Night Owl, Cache Master, Hot Streak, Million Club, and more</li>
<li>π― <strong>Model Insights:</strong> Favorite Claude model with personality, usage breakdown by tokens</li>
<li>π <strong>Activity Analytics:</strong> Peak month, peak day, longest coding streak, monthly charts</li>
<li>π <strong>Social Sharing:</strong> Copy stats or tweet your year with one click (opens in default browser)</li>
<li>βοΈ <strong>Festive UI:</strong> Animated snowflakes with accessibility support (respects prefers-reduced-motion)</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Dashboard -->
<section id="dashboard" class="py-12 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">π </span> Dashboard
</h2>
<p class="text-slate-400 mb-6">Claude Code installation status and API monitoring at a glance</p>
<div class="space-y-6">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Claude Code Installation Status & API Monitoring</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/open-owl-dashboard.png"
alt="Open Owl Dashboard"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Real-time detection of installed version, path, API service status monitor with incident tracking, and quick access to installation guides.
</p>
</div>
</div>
</div>
</section>
<!-- Settings -->
<section id="settings" class="py-12 px-6">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">βοΈ</span> Settings Management
</h2>
<p class="text-slate-400 mb-6">Manage user and project-level settings with visual editors</p>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">User-Level Settings</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/settings-user-level.png"
alt="Settings - User Level"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Configure global Claude Code preferences: default model selection, environment variables, and core settings.
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Project-Level Settings</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/settings-project-level-search.png"
alt="Settings - Project Level"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Project-specific configuration overrides with search, filter, and local overrides support.
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Advanced Permissions Editor</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/settings-permissions.png"
alt="Settings - Permissions"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Visual permission rule builder with grid view, color-coding by permission level, and search capabilities.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Create Permission Rule</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/settings-permissions-create-rule.png"
alt="Settings - Create Permission Rule"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Step-by-step form with pattern matching, live validation, and example preview.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Pre-built Templates</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/settings-permissions-rules-templates.png"
alt="Settings - Templates"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
6 security templates for common use cases: env protection, npm scripts, git read-only, and more.
</p>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Raw JSON Editor</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/settings-raw-json-editor.png"
alt="Settings - Raw JSON"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Advanced configuration for power users with read-only view and manual editing capability.
</p>
</div>
</div>
</div>
</section>
<!-- Subagents -->
<section id="subagents" class="py-12 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">π€</span> Subagents Manager
</h2>
<p class="text-slate-400 mb-6">Create and manage custom Claude Code agents</p>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Subagents Grid View</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/subagents.png"
alt="Subagents Grid"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Browse all custom agents with tool count indicators, location badges, and last modified timestamps.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Agent Details</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/subagents-view.png"
alt="Subagent Details"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Full agent information with markdown rendering, tool list, and metadata.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Create Subagent</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/create-subagent.png"
alt="Create Subagent"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Visual form with name validation, model selection, tool restrictions, and unsaved changes protection.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="py-12 px-6">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">π―</span> Skills Manager
</h2>
<p class="text-slate-400 mb-6">Manage Claude Code skills with frontmatter support</p>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Skills Grid View</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/skills.png"
alt="Skills Grid"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Browse available skills with supporting files count, allowed tools indicators, and location badges.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Skill Details</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/skills-view.png"
alt="Skill Details"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Complete skill information with markdown rendering, tools list, and supporting files.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Create Skill</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/skills-create-new.png"
alt="Create Skill"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Upload markdown or create from scratch with frontmatter validation and character limits.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Slash Commands -->
<section id="commands" class="py-12 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">β‘</span> Slash Commands Manager
</h2>
<p class="text-slate-400 mb-6">Create custom slash commands and import from GitHub</p>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Commands Grid View</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/slash-commands.png"
alt="Slash Commands"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Browse all slash commands with namespace grouping, model and tool count badges, and source tracking.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Command Details</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/slash-commands-view-command.png"
alt="Command Details"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Full command information with usage examples and imported source tracking.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Create Command</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/slash-command-create-new-project-scope.png"
alt="Create Command"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Multi-step wizard with frontmatter editor, content editor, and security warnings.
</p>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">GitHub Integration - Browse Repository</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/slash-commands-import-github.png"
alt="GitHub Import"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Browse GitHub repositories with folder navigation, breadcrumbs, and markdown file filtering.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Select Commands to Import</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/slash-commands-import-github-select-commands.png"
alt="Select Commands"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Multi-select capability with batch import and content preview.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Import Success</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/slash-commands-import-github-success.png"
alt="Import Success"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Confirmation with imported command details and quick links.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Plugins & Marketplaces -->
<section id="plugins" class="py-12 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">π§©</span> Plugins & Marketplaces
</h2>
<p class="text-slate-400 mb-6">Browse, install, and manage Claude Code plugins from marketplaces</p>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Browse Marketplace Plugins</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/browse-marketplace-plugins.png"
alt="Browse Marketplace Plugins"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Discover available plugins from configured marketplaces with descriptions, component counts, and quick install capability.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">View Installed Plugins</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/view-installed-plugins.png"
alt="View Installed Plugins"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
See all installed plugins with enable/disable toggle, component breakdown, and installation details.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Manage Installed Plugins</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/manage-installed-plugins.png"
alt="Manage Installed Plugins"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Manage plugin lifecycle with enable/disable controls, uninstall capability, and marketplace information.
</p>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Browse Plugin Contents</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/browse-and-view-installed-plugins-commands-and-skills.png"
alt="Browse Plugin Commands and Skills"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Explore plugin folder structure with tree view, view command and skill files, and browse plugin components with file viewer modal.
</p>
</div>
<div class="bg-blue-900/30 border border-blue-500/50 rounded-xl p-6">
<h4 class="font-semibold text-blue-300 mb-3">Key Features</h4>
<ul class="space-y-2 text-sm text-slate-300">
<li>πͺ <strong>Marketplace Management:</strong> Add, validate, and manage plugin marketplaces from GitHub repositories</li>
<li>π¦ <strong>Plugin Discovery:</strong> Browse available plugins with descriptions, component counts, and installation status</li>
<li>β‘ <strong>Quick Install:</strong> One-click plugin installation directly from marketplace view</li>
<li>π <strong>Enable/Disable:</strong> Toggle plugins on/off without uninstalling to manage context and performance</li>
<li>π <strong>File Browser:</strong> Explore plugin structure, view commands, agents, and skills in tree view with syntax highlighting</li>
<li>ποΈ <strong>Lifecycle Management:</strong> Uninstall plugins with confirmation dialogs and cleanup</li>
<li>β
<strong>Marketplace Validation:</strong> Pre-installation validation ensures marketplace compatibility and structure</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Hooks -->
<section id="hooks" class="py-12 px-6">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">πͺ</span> Hooks Viewer
</h2>
<p class="text-slate-400 mb-6">View hook configurations (Phase 1 - Read-Only)</p>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Hooks Manager</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/hooks-read-only-phase-1.png"
alt="Hooks Manager"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Support for 8 hook events with validation status, security warnings, and context variables documentation. Template-based editing planned for Phase 2.
</p>
</div>
</div>
</section>
<!-- MCP Servers -->
<section id="mcp" class="py-12 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">π</span> MCP Servers Manager
</h2>
<p class="text-slate-400 mb-6">Configure Model Context Protocol servers</p>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">MCP Servers Grid View</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/mcp-servers.png"
alt="MCP Servers"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Browse installed servers with scope badges, type indicators, and quick actions.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Add MCP Server</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/mcp-add-server.png"
alt="Add MCP Server"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Configure new server with transport type selection, command/URL configuration, and environment variables.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-3 text-blue-300">Server Details</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/mcp-view-server.png"
alt="Server Details"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Full server configuration display with environment variables, command arguments, and edit capability.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Usage Metrics -->
<section id="metrics" class="py-12 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">π</span> Usage Metrics Dashboard
</h2>
<p class="text-slate-400 mb-6">Analyze Claude Code usage and spending with interactive charts</p>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Usage Metrics Overview</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/usage-metrics.png"
alt="Usage Metrics Dashboard"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Comprehensive metrics dashboard featuring four interactive charts:
</p>
<ul class="text-sm text-slate-400 mt-2 ml-4 space-y-1">
<li>β’ <strong>Daily Spend Trend</strong> - Dual Y-axis chart showing cost ($) and token usage over time</li>
<li>β’ <strong>Token Composition</strong> - Pie chart breakdown of Input, Output, Cache Create, and Cache Read tokens</li>
<li>β’ <strong>Model Usage</strong> - Stacked bar chart showing token distribution across different Claude models</li>
<li>β’ <strong>Project Statistics</strong> - Table with per-project usage summary and metrics</li>
</ul>
<p class="text-sm text-slate-400 mt-3">
Timeline filtering allows focusing on specific periods (Last 7/30/90 days, Last Year, or All Time).
Summary cards display Total Cost, Total Sessions, Total Tokens, and Average Cost per Session.
</p>
</div>
</div>
</div>
</section>
<!-- Status Line -->
<section id="statusline" class="py-12 px-6">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">π</span> Status Line Manager
</h2>
<p class="text-slate-400 mb-6">Choose from 10+ pre-built status line templates</p>
<div class="space-y-8">
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Templates Gallery</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/statusline-apply-template.png"
alt="Status Line Templates"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Browse templates organized by skill level: Beginner, Intermediate, Advanced, and Specialized categories.
</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Template Application Review</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/statusline-apply-template-review.png"
alt="Apply Template"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Live preview with mock session data, script content display, and dependency warnings.
</p>
</div>
</div>
</div>
</section>
<!-- Debug Logs -->
<section id="logs" class="py-12 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-2 flex items-center">
<span class="text-4xl mr-3">π</span> Debug Logs Viewer
</h2>
<p class="text-slate-400 mb-6">Access and search Claude Code debug logs</p>
<div>
<h3 class="text-xl font-semibold mb-3 text-blue-300">Debug Logs</h3>
<img src="https://raw.githubusercontent.com/antonbelev/open-owl/main/screenshots/debug-logs.png"
alt="Debug Logs"
class="screenshot-img w-full"
onclick="openModal(this.src, this.alt)">
<p class="text-sm text-slate-400 mt-2">
Log file list with timestamps, full content viewer, syntax highlighting, line numbers, and search capabilities.
</p>
</div>
</div>
</section>
<!-- Additional Features -->
<section class="py-12 px-6">
<div class="container mx-auto max-w-5xl">
<h2 class="text-3xl font-bold mb-6">π§© Additional Features</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
<h3 class="text-xl font-semibold mb-3">π Project Discovery</h3>
<ul class="text-sm text-slate-400 space-y-2">
<li>β’ Automatic detection of Claude Code projects</li>
<li>β’ Project selection for project-level settings</li>
<li>β’ Recent projects quick access</li>
<li>β’ Project context maintained across app</li>
</ul>
</div>
<div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
<h3 class="text-xl font-semibold mb-3">π¨ Design Features</h3>
<ul class="text-sm text-slate-400 space-y-2">
<li>β’ Responsive layouts for all screen sizes</li>
<li>β’ Modal dialogs for detailed views</li>
<li>β’ Keyboard navigation (ESC, Tab, Enter)</li>
<li>β’ Hover states and smooth transitions</li>
</ul>
</div>
<div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
<h3 class="text-xl font-semibold mb-3">π Common UI Patterns</h3>
<ul class="text-sm text-slate-400 space-y-2">
<li>β’ Empty states with helpful guidance</li>
<li>β’ Loading states with skeleton loaders</li>
<li>β’ Error handling with retry options</li>
<li>β’ Real-time validation feedback</li>
</ul>
</div>
<div class="bg-slate-800 p-6 rounded-xl border border-slate-700">
<h3 class="text-xl font-semibold mb-3">βΏ Accessibility</h3>
<ul class="text-sm text-slate-400 space-y-2">
<li>β’ ESC key support for modal dismissal</li>
<li>β’ Tab navigation throughout</li>
<li>β’ Color-coded information (green/yellow/red)</li>
<li>β’ Descriptive labels and help text</li>
</ul>
</div>
</div>
</div>
</section>
<!-- System Requirements -->
<section class="py-12 px-6 bg-gradient-to-r from-blue-600 to-purple-600">
<div class="container mx-auto text-center max-w-3xl">
<h2 class="text-3xl font-bold mb-4">π± System Requirements</h2>
<div class="bg-white/10 rounded-xl p-6 backdrop-blur-sm">
<p class="text-lg mb-4">All screenshots showcase features tested on:</p>
<ul class="text-left inline-block text-lg space-y-2">
<li>β
<strong>macOS</strong> (Intel & Apple Silicon)</li>
<li>β
<strong>Node.js</strong> >= 18.0.0</li>
<li>β
<strong>Claude Code CLI</strong> installed</li>
</ul>
<p class="text-sm mt-6 opacity-90">
Windows and Linux support coming in future releases.
</p>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-6">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-4">Ready to try Open Owl?</h2>
<p class="text-xl mb-8 text-slate-300">Download now and experience visual configuration management</p>
<div class="flex justify-center space-x-4">
<a href="index.html#download-section" class="bg-blue-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-blue-700 transition">
Download for macOS
</a>
<a href="installation.html" class="bg-slate-700 text-white font-semibold py-3 px-8 rounded-lg hover:bg-slate-600 transition">
Installation Guide
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 px-6 border-t border-slate-700">
<div class="container mx-auto text-center text-slate-400 text-sm">
<p class="mb-2">
Made with β€οΈ by the Open Owl community
</p>
<p class="mb-4">
Developed by Anton @ <a href="https://belev.me/" target="_blank" class="text-blue-400 hover:underline">belev.me</a>
</p>
<p>
<a href="https://github.com/antonbelev/open-owl" class="hover:text-blue-400">GitHub</a> β’
<a href="https://github.com/antonbelev/open-owl/issues" class="hover:text-blue-400">Issues</a> β’
<a href="changelog.html" class="hover:text-blue-400">Changelog</a> β’
<a href="https://github.com/antonbelev/open-owl/blob/main/LICENSE" class="hover:text-blue-400">MIT License</a>
</p>
</div>
</footer>
<!-- Image Modal -->
<div id="imageModal" class="modal" onclick="closeModal()">
<span class="close-modal" onclick="closeModal()">×</span>
<img class="modal-content" id="modalImage">
</div>
<!-- JavaScript -->
<script src="assets/header.js"></script>
<script src="assets/app.js"></script>
<script>
function openModal(src, alt) {
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
modal.classList.add('active');
modalImg.src = src;
modalImg.alt = alt;
}
function closeModal() {
const modal = document.getElementById('imageModal');
modal.classList.remove('active');
}
// Close modal on ESC key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
}
});
</script>
</body>
</html>