seeclaudecode 1.0.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/.github/workflows/publish.yml +27 -0
- package/README.md +138 -0
- package/bin/cli.js +300 -0
- package/package.json +40 -0
- package/public/app.js +1282 -0
- package/public/index.html +209 -0
- package/public/styles.css +1725 -0
- package/server.js +458 -0
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="dark">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>SeeClaudeCode - Watch Claude Code Work</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
10
|
+
<link rel="stylesheet" href="styles.css">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div class="app">
|
|
14
|
+
<!-- Background Grid -->
|
|
15
|
+
<div class="bg-grid"></div>
|
|
16
|
+
|
|
17
|
+
<!-- Top Navigation -->
|
|
18
|
+
<header class="top-nav">
|
|
19
|
+
<div class="nav-left">
|
|
20
|
+
<div class="logo">
|
|
21
|
+
<div class="logo-icon">
|
|
22
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
23
|
+
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
|
24
|
+
</svg>
|
|
25
|
+
</div>
|
|
26
|
+
<span class="logo-text">See<span class="text-primary">Claude</span>Code</span>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="nav-center">
|
|
31
|
+
<div class="current-task">
|
|
32
|
+
<div class="task-indicator"></div>
|
|
33
|
+
<span class="task-label">Current Task:</span>
|
|
34
|
+
<span class="task-name" id="current-task">Waiting for activity...</span>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="nav-right">
|
|
39
|
+
<button class="icon-btn" id="settings-btn">
|
|
40
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
41
|
+
<circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v10M4.22 4.22l4.24 4.24m7.08 7.08l4.24 4.24M1 12h6m6 0h10M4.22 19.78l4.24-4.24m7.08-7.08l4.24-4.24"/>
|
|
42
|
+
</svg>
|
|
43
|
+
</button>
|
|
44
|
+
<div class="connection-status">
|
|
45
|
+
<div class="status-info">
|
|
46
|
+
<span class="status-name">Claude Code</span>
|
|
47
|
+
<span class="status-state" id="connection-state">Connecting...</span>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="status-avatar" id="status-indicator"></div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</header>
|
|
53
|
+
|
|
54
|
+
<!-- Main Content -->
|
|
55
|
+
<div class="main-content">
|
|
56
|
+
<!-- Left Sidebar -->
|
|
57
|
+
<aside class="left-sidebar">
|
|
58
|
+
<div class="sidebar-section">
|
|
59
|
+
<h3 class="section-title">Perspectives</h3>
|
|
60
|
+
<div class="view-buttons">
|
|
61
|
+
<button class="view-btn active" data-view="graph">
|
|
62
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
63
|
+
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
|
64
|
+
</svg>
|
|
65
|
+
Architecture Graph
|
|
66
|
+
</button>
|
|
67
|
+
<button class="view-btn" data-view="tree">
|
|
68
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
69
|
+
<circle cx="12" cy="12" r="10"/><path d="M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20M2 12h20"/>
|
|
70
|
+
</svg>
|
|
71
|
+
Sunburst View
|
|
72
|
+
</button>
|
|
73
|
+
<button class="view-btn" data-view="files">
|
|
74
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
75
|
+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/>
|
|
76
|
+
</svg>
|
|
77
|
+
File Explorer
|
|
78
|
+
</button>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="sidebar-divider"></div>
|
|
83
|
+
|
|
84
|
+
<div class="sidebar-section flex-1">
|
|
85
|
+
<h3 class="section-title">
|
|
86
|
+
Live Activity Feed
|
|
87
|
+
<span class="live-dot"></span>
|
|
88
|
+
</h3>
|
|
89
|
+
<div class="activity-feed" id="activity-feed">
|
|
90
|
+
<div class="activity-empty">
|
|
91
|
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
92
|
+
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
|
|
93
|
+
</svg>
|
|
94
|
+
<p>Waiting for Claude Code activity...</p>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="sidebar-footer">
|
|
100
|
+
<div class="listening-indicator">
|
|
101
|
+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
102
|
+
<polyline points="4,17 10,11 4,5"/><line x1="12" y1="19" x2="20" y2="19"/>
|
|
103
|
+
</svg>
|
|
104
|
+
<span>Listening for changes...</span>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</aside>
|
|
108
|
+
|
|
109
|
+
<!-- Main View Area -->
|
|
110
|
+
<main class="main-view">
|
|
111
|
+
<div class="view-container" id="view-container">
|
|
112
|
+
<div class="loading">
|
|
113
|
+
<div class="loading-spinner"></div>
|
|
114
|
+
<p>Loading repository structure...</p>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<!-- Legend Panel -->
|
|
119
|
+
<div class="legend-panel" id="legend-panel">
|
|
120
|
+
<h4>LEGEND</h4>
|
|
121
|
+
<div class="legend-grid">
|
|
122
|
+
<div class="legend-col">
|
|
123
|
+
<div class="legend-item">
|
|
124
|
+
<span class="legend-dot pulse"></span>
|
|
125
|
+
<span>Active Editing</span>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="legend-item">
|
|
128
|
+
<span class="legend-dot changed"></span>
|
|
129
|
+
<span>Pending Changes</span>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="legend-item">
|
|
132
|
+
<span class="legend-dot neutral"></span>
|
|
133
|
+
<span>Unchanged</span>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="legend-col">
|
|
137
|
+
<div class="legend-item">
|
|
138
|
+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8m-4-4v4"/></svg>
|
|
139
|
+
<span>Frontend</span>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="legend-item">
|
|
142
|
+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><path d="M6 6h.01M6 18h.01"/></svg>
|
|
143
|
+
<span>Backend</span>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="legend-item">
|
|
146
|
+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
|
|
147
|
+
<span>Database</span>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</main>
|
|
153
|
+
|
|
154
|
+
<!-- Right Panel - Git Diff -->
|
|
155
|
+
<aside class="right-panel" id="right-panel">
|
|
156
|
+
<div class="panel-header">
|
|
157
|
+
<div class="panel-title">
|
|
158
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
159
|
+
<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 0 9 9"/>
|
|
160
|
+
</svg>
|
|
161
|
+
<span>Live Diff</span>
|
|
162
|
+
</div>
|
|
163
|
+
<button class="icon-btn small" id="close-panel">
|
|
164
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
165
|
+
<path d="M9 18l6-6-6-6"/>
|
|
166
|
+
</svg>
|
|
167
|
+
</button>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="diff-header" id="diff-header">
|
|
170
|
+
<div class="diff-info">
|
|
171
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
172
|
+
<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
|
|
173
|
+
</svg>
|
|
174
|
+
<span class="diff-file" id="diff-file">No changes yet</span>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="diff-content" id="diff-content">
|
|
178
|
+
<div class="diff-empty">
|
|
179
|
+
<p>Changes will appear here when Claude Code edits files</p>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="diff-stats" id="diff-stats">
|
|
183
|
+
<div class="stat additions">
|
|
184
|
+
<span class="stat-value" id="additions-count">0</span>
|
|
185
|
+
<span class="stat-label">additions</span>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="stat deletions">
|
|
188
|
+
<span class="stat-value" id="deletions-count">0</span>
|
|
189
|
+
<span class="stat-label">deletions</span>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="stat files">
|
|
192
|
+
<span class="stat-value" id="files-count">0</span>
|
|
193
|
+
<span class="stat-label">files</span>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
</aside>
|
|
197
|
+
|
|
198
|
+
<!-- Panel Toggle Button -->
|
|
199
|
+
<button class="panel-toggle hidden" id="panel-toggle">
|
|
200
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
201
|
+
<path d="M15 18l-6-6 6-6"/>
|
|
202
|
+
</svg>
|
|
203
|
+
</button>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<script src="app.js"></script>
|
|
208
|
+
</body>
|
|
209
|
+
</html>
|