claude-code-watch 0.0.6 → 0.0.7

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 (3) hide show
  1. package/package.json +1 -1
  2. package/public/index.html +69 -0
  3. package/public/vendor/github-light.min.css +10 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "claude-code-watch",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "description": "Web-based real-time monitor for Claude Code.",
5
5
  "main": "./src/server/server.js",
6
6
  "bin": {
package/public/index.html CHANGED
@@ -30,6 +30,28 @@
30
30
  --orange: #fb923c;
31
31
  }
32
32
 
33
+ :root[data-theme="light"] {
34
+ --bg: #f8f9fa;
35
+ --bg2: #e9ecef;
36
+ --bg3: #ced4da;
37
+ --border: #adb5bd;
38
+ --text: #495057;
39
+ --dim: #868e96;
40
+ --white: #212529;
41
+ --purple: #6741d9;
42
+ --purple2: #5b21b6;
43
+ --blue: #2563eb;
44
+ --magenta: #9333ea;
45
+ --yellow: #d97706;
46
+ --yellow2: #92400e;
47
+ --green: #059669;
48
+ --cyan: #0891b2;
49
+ --red: #dc2626;
50
+ --red2: #b91c1c;
51
+ --gray: #6b7280;
52
+ --orange: #ea580c;
53
+ }
54
+
33
55
  body {
34
56
  background: var(--bg);
35
57
  color: var(--text);
@@ -218,6 +240,21 @@ body {
218
240
 
219
241
  /* Override highlight.js background to match our theme */
220
242
  .hljs { background: #0d1117 !important; }
243
+
244
+ /* Light theme overrides */
245
+ :root[data-theme="light"] .btn.on { background: var(--purple); border-color: var(--purple); color: #fff; }
246
+ :root[data-theme="light"] .btn.on:hover { background: var(--purple2); color: #fff; }
247
+ :root[data-theme="light"] .btn.on:hover::after { background: var(--purple2); color: #fff; }
248
+ :root[data-theme="light"] .hljs { background: #f0f0f0 !important; }
249
+ :root[data-theme="light"] .tree-node:hover { background: rgba(0,0,0,0.06); }
250
+ :root[data-theme="light"] .tree-node.selected { background: rgba(124,58,237,0.2); }
251
+ :root[data-theme="light"] .tree-node .active-dot.off { color: #bbb; }
252
+ :root[data-theme="light"] #tree-resize-handle:hover,
253
+ :root[data-theme="light"] #tree-resize-handle.active { background: var(--purple); }
254
+ :root[data-theme="light"] .stream-line.text { color: var(--text); }
255
+
256
+ /* Theme toggle button */
257
+ #btn-theme { font-size: 14px; }
221
258
  </style>
222
259
  </head>
223
260
  <body>
@@ -233,6 +270,7 @@ body {
233
270
  <span class="sep">│</span>
234
271
  <span id="session-info">Connecting...</span>
235
272
  <div class="auto">
273
+ <button class="btn btn-icon" id="btn-theme" onclick="toggleTheme()" data-tooltip="Toggle theme">🌙</button>
236
274
  <button class="btn on" id="btn-autodisco" onclick="toggleAutoDiscovery()" data-tooltip="Auto-discover">🔍 Auto</button>
237
275
  <span class="sep">│</span>
238
276
  <span id="token-info"></span>
@@ -1237,6 +1275,37 @@ function scheduleRender() {
1237
1275
  }
1238
1276
  }
1239
1277
 
1278
+ // ══════════════════════════════════════════════════════════════════════════════
1279
+ // Theme toggle
1280
+ // ══════════════════════════════════════════════════════════════════════════════
1281
+
1282
+ function applyTheme(theme) {
1283
+ document.documentElement.setAttribute('data-theme', theme);
1284
+ const btn = document.getElementById('btn-theme');
1285
+ if (btn) {
1286
+ btn.textContent = theme === 'dark' ? '🌙' : '☀️';
1287
+ btn.setAttribute('data-tooltip', theme === 'dark' ? 'Switch to light' : 'Switch to dark');
1288
+ }
1289
+ // Swap highlight.js stylesheet for theme
1290
+ const hlLink = document.querySelector('link[rel="stylesheet"][href*="github"]');
1291
+ if (hlLink) {
1292
+ hlLink.href = theme === 'dark' ? 'vendor/github-dark.min.css' : 'vendor/github-light.min.css';
1293
+ }
1294
+ }
1295
+
1296
+ function toggleTheme() {
1297
+ const current = document.documentElement.getAttribute('data-theme') || 'dark';
1298
+ const next = current === 'dark' ? 'light' : 'dark';
1299
+ localStorage.setItem('theme', next);
1300
+ applyTheme(next);
1301
+ }
1302
+
1303
+ // Apply saved theme on load (default dark)
1304
+ (function() {
1305
+ const saved = localStorage.getItem('theme');
1306
+ applyTheme(saved || 'dark');
1307
+ })();
1308
+
1240
1309
  // ══════════════════════════════════════════════════════════════════════════════
1241
1310
  // Init
1242
1311
  // ══════════════════════════════════════════════════════════════════════════════
package/public/vendor/github-light.min.css ADDED
@@ -0,0 +1,10 @@
1
+ pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
2
+ Theme: GitHub
3
+ Description: Light theme as seen on github.com
4
+ Author: github.com
5
+ Maintainer: @Hirse
6
+ Updated: 2021-05-15
7
+
8
+ Outdated base version: https://github.com/primer/github-syntax-light
9
+ Current colors taken from GitHub's CSS
10
+ */.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}