claude-task-viewer 1.0.0 → 1.1.0
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.
- package/package.json +1 -1
- package/public/index.html +92 -8
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -21,6 +21,45 @@
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
</script>
|
|
24
|
+
<style id="theme-styles">
|
|
25
|
+
/* Light mode overrides */
|
|
26
|
+
body.light { background: #f8fafc !important; color: #1e293b !important; }
|
|
27
|
+
.light .bg-gray-900 { background: #ffffff !important; }
|
|
28
|
+
.light .bg-gray-950 { background: #f8fafc !important; }
|
|
29
|
+
.light .bg-gray-900\/50 { background: rgba(255,255,255,0.9) !important; }
|
|
30
|
+
.light .bg-gray-800 { background: #f1f5f9 !important; }
|
|
31
|
+
.light .bg-gray-800\/50 { background: rgba(241,245,249,0.7) !important; }
|
|
32
|
+
.light .bg-gray-700 { background: #e2e8f0 !important; }
|
|
33
|
+
.light .bg-gray-700\/50 { background: rgba(226,232,240,0.5) !important; }
|
|
34
|
+
.light .border-gray-800 { border-color: #e2e8f0 !important; }
|
|
35
|
+
.light .border-gray-700 { border-color: #cbd5e1 !important; }
|
|
36
|
+
.light .text-gray-100 { color: #1e293b !important; }
|
|
37
|
+
.light .text-gray-200 { color: #334155 !important; }
|
|
38
|
+
.light .text-gray-300 { color: #475569 !important; }
|
|
39
|
+
.light .text-gray-400 { color: #64748b !important; }
|
|
40
|
+
.light .text-gray-500 { color: #64748b !important; }
|
|
41
|
+
.light .text-gray-600 { color: #94a3b8 !important; }
|
|
42
|
+
.light .hover\:text-gray-300:hover { color: #334155 !important; }
|
|
43
|
+
.light .hover\:text-gray-400:hover { color: #475569 !important; }
|
|
44
|
+
.light .hover\:bg-gray-800:hover { background: #f1f5f9 !important; }
|
|
45
|
+
.light .hover\:bg-gray-800\/50:hover { background: rgba(241,245,249,0.5) !important; }
|
|
46
|
+
.light .border-green-500\/30 { border-color: rgba(34,197,94,0.4) !important; }
|
|
47
|
+
.light .bg-green-500\/10 { background: rgba(34,197,94,0.15) !important; }
|
|
48
|
+
.light .bg-green-500\/20 { background: rgba(34,197,94,0.2) !important; }
|
|
49
|
+
.light .border-claude-orange\/30 { border-color: rgba(232,111,51,0.4) !important; }
|
|
50
|
+
.light .bg-claude-orange\/10 { background: rgba(232,111,51,0.12) !important; }
|
|
51
|
+
.light .bg-claude-orange\/20 { background: rgba(232,111,51,0.2) !important; }
|
|
52
|
+
.light .border-yellow-500\/20 { border-color: rgba(234,179,8,0.4) !important; }
|
|
53
|
+
.light .bg-yellow-500\/10 { background: rgba(234,179,8,0.15) !important; }
|
|
54
|
+
.light .bg-yellow-500\/20 { background: rgba(234,179,8,0.25) !important; }
|
|
55
|
+
.light .border-blue-500\/20 { border-color: rgba(59,130,246,0.4) !important; }
|
|
56
|
+
.light .bg-blue-500\/10 { background: rgba(59,130,246,0.15) !important; }
|
|
57
|
+
.light .prose pre { background: #f1f5f9 !important; }
|
|
58
|
+
.light .prose code { background: #e2e8f0 !important; }
|
|
59
|
+
.light ::-webkit-scrollbar-thumb { background: #e2e8f0 !important; }
|
|
60
|
+
.light ::-webkit-scrollbar-thumb:hover { background: #cbd5e1 !important; }
|
|
61
|
+
body.light { scrollbar-color: #e2e8f0 transparent; }
|
|
62
|
+
</style>
|
|
24
63
|
<style>
|
|
25
64
|
.prose pre { background: #1f2937; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
|
|
26
65
|
.prose code { background: #374151; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
|
|
@@ -28,6 +67,15 @@
|
|
|
28
67
|
.status-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
|
29
68
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
30
69
|
.kanban-column { min-height: calc(100vh - 200px); }
|
|
70
|
+
|
|
71
|
+
/* Custom scrollbar - dark mode default */
|
|
72
|
+
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
73
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
74
|
+
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #374151); border-radius: 4px; }
|
|
75
|
+
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, #4b5563); }
|
|
76
|
+
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb, #374151) transparent; }
|
|
77
|
+
:root { --scrollbar-thumb: #374151; --scrollbar-thumb-hover: #4b5563; }
|
|
78
|
+
body.light { --scrollbar-thumb: #d1d5db; --scrollbar-thumb-hover: #9ca3af; }
|
|
31
79
|
</style>
|
|
32
80
|
</head>
|
|
33
81
|
<body class="bg-gray-950 text-gray-100 min-h-screen">
|
|
@@ -70,9 +118,11 @@
|
|
|
70
118
|
</nav>
|
|
71
119
|
|
|
72
120
|
<footer class="p-3 border-t border-gray-800 text-xs text-gray-600">
|
|
73
|
-
<a href="https://github.com" class="hover:text-gray-400">GitHub</a>
|
|
121
|
+
<a href="https://github.com/L1AD/claude-task-viewer" target="_blank" class="hover:text-gray-400">GitHub</a>
|
|
122
|
+
<span class="mx-2">·</span>
|
|
123
|
+
<a href="https://policylayer.com" target="_blank" class="hover:text-gray-400">PolicyLayer</a>
|
|
74
124
|
<span class="mx-2">·</span>
|
|
75
|
-
<span>v1.
|
|
125
|
+
<span>v1.1.0</span>
|
|
76
126
|
</footer>
|
|
77
127
|
</aside>
|
|
78
128
|
|
|
@@ -102,13 +152,21 @@
|
|
|
102
152
|
</div>
|
|
103
153
|
<span id="progress-percent" class="text-sm font-medium text-claude-orange">0%</span>
|
|
104
154
|
</div>
|
|
155
|
+
<button id="theme-toggle" onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-gray-800 text-gray-400 hover:text-gray-200 transition-colors" title="Toggle theme">
|
|
156
|
+
<svg id="theme-icon-dark" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
157
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
|
|
158
|
+
</svg>
|
|
159
|
+
<svg id="theme-icon-light" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
160
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
|
|
161
|
+
</svg>
|
|
162
|
+
</button>
|
|
105
163
|
</div>
|
|
106
164
|
</div>
|
|
107
165
|
</header>
|
|
108
166
|
|
|
109
167
|
<!-- Kanban board -->
|
|
110
168
|
<div class="flex-1 overflow-x-auto p-4">
|
|
111
|
-
<div class="flex gap-
|
|
169
|
+
<div class="flex gap-8 h-full min-w-max">
|
|
112
170
|
<!-- Pending column -->
|
|
113
171
|
<div class="w-80 flex flex-col">
|
|
114
172
|
<div class="flex items-center gap-2 mb-3 px-1">
|
|
@@ -483,16 +541,42 @@
|
|
|
483
541
|
return div.innerHTML;
|
|
484
542
|
}
|
|
485
543
|
|
|
544
|
+
// Theme toggle
|
|
545
|
+
function toggleTheme() {
|
|
546
|
+
const body = document.body;
|
|
547
|
+
const isLight = body.classList.contains('light');
|
|
548
|
+
|
|
549
|
+
if (isLight) {
|
|
550
|
+
body.classList.remove('light');
|
|
551
|
+
localStorage.setItem('theme', 'dark');
|
|
552
|
+
document.getElementById('theme-icon-dark').classList.remove('hidden');
|
|
553
|
+
document.getElementById('theme-icon-light').classList.add('hidden');
|
|
554
|
+
} else {
|
|
555
|
+
body.classList.add('light');
|
|
556
|
+
localStorage.setItem('theme', 'light');
|
|
557
|
+
document.getElementById('theme-icon-dark').classList.add('hidden');
|
|
558
|
+
document.getElementById('theme-icon-light').classList.remove('hidden');
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
// Load saved theme
|
|
563
|
+
function loadTheme() {
|
|
564
|
+
const saved = localStorage.getItem('theme');
|
|
565
|
+
if (saved === 'light') {
|
|
566
|
+
document.body.classList.add('light');
|
|
567
|
+
document.getElementById('theme-icon-dark').classList.add('hidden');
|
|
568
|
+
document.getElementById('theme-icon-light').classList.remove('hidden');
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
|
|
486
572
|
// Initialize
|
|
573
|
+
loadTheme();
|
|
487
574
|
fetchSessions();
|
|
488
575
|
setupEventSource();
|
|
489
576
|
|
|
490
|
-
//
|
|
577
|
+
// Default to All Tasks view
|
|
491
578
|
setTimeout(() => {
|
|
492
|
-
|
|
493
|
-
const activeSession = sessions.find(s => s.inProgress > 0) || sessions[0];
|
|
494
|
-
fetchTasks(activeSession.id);
|
|
495
|
-
}
|
|
579
|
+
showAllTasks();
|
|
496
580
|
}, 500);
|
|
497
581
|
</script>
|
|
498
582
|
</body>
|