create-claudeportal 0.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/bin/cli.js +37 -0
- package/dist/assets/index-BBU5K5iA.js +132 -0
- package/dist/assets/index-fNmv07eE.css +1 -0
- package/dist/index.html +13 -0
- package/index.html +12 -0
- package/mockups/01-chat-conversation-v2.html +803 -0
- package/mockups/01-chat-conversation.html +592 -0
- package/mockups/02-activity-feed.html +648 -0
- package/mockups/03-focused-workspace.html +680 -0
- package/mockups/04-documents-mode.html +1556 -0
- package/package.json +54 -0
- package/server/index.js +140 -0
- package/server/lib/detect-tools.js +93 -0
- package/server/lib/file-scanner.js +46 -0
- package/server/lib/file-watcher.js +45 -0
- package/server/lib/fix-npm-prefix.js +61 -0
- package/server/lib/folder-scanner.js +43 -0
- package/server/lib/install-tools.js +122 -0
- package/server/lib/platform.js +18 -0
- package/server/lib/sse-manager.js +36 -0
- package/server/lib/terminal.js +95 -0
- package/server/lib/validate-folder-path.js +17 -0
- package/server/lib/validate-path.js +13 -0
- package/server/routes/detect.js +64 -0
- package/server/routes/doc-events.js +94 -0
- package/server/routes/events.js +37 -0
- package/server/routes/folder.js +195 -0
- package/server/routes/github.js +21 -0
- package/server/routes/health.js +16 -0
- package/server/routes/install.js +102 -0
- package/server/routes/project.js +18 -0
- package/server/routes/scaffold.js +45 -0
- package/skills-lock.json +15 -0
- package/tsconfig.app.json +17 -0
- package/tsconfig.node.json +11 -0
- package/tsconfig.tsbuildinfo +1 -0
- package/ui/app.js +747 -0
- package/ui/index.html +272 -0
- package/ui/styles.css +788 -0
|
@@ -0,0 +1,680 @@
|
|
|
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>Mockup 3: Focused Workspace</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
|
|
10
|
+
body {
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
12
|
+
background: #18181b;
|
|
13
|
+
color: #fafafa;
|
|
14
|
+
height: 100vh;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* ---- TOP BAR ---- */
|
|
20
|
+
.topbar {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
justify-content: space-between;
|
|
24
|
+
padding: 0 20px;
|
|
25
|
+
height: 52px;
|
|
26
|
+
background: #09090b;
|
|
27
|
+
border-bottom: 1px solid #27272a;
|
|
28
|
+
flex-shrink: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.topbar-left {
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 16px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.topbar-logo {
|
|
38
|
+
font-size: 15px;
|
|
39
|
+
font-weight: 700;
|
|
40
|
+
color: #fafafa;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
gap: 8px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.topbar-divider {
|
|
47
|
+
width: 1px;
|
|
48
|
+
height: 20px;
|
|
49
|
+
background: #27272a;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.topbar-project {
|
|
53
|
+
font-size: 13px;
|
|
54
|
+
color: #a1a1aa;
|
|
55
|
+
font-family: 'SF Mono', monospace;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.topbar-status {
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: 8px;
|
|
62
|
+
font-size: 12px;
|
|
63
|
+
color: #a1a1aa;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.topbar-status .live-dot {
|
|
67
|
+
width: 8px;
|
|
68
|
+
height: 8px;
|
|
69
|
+
border-radius: 50%;
|
|
70
|
+
background: #22c55e;
|
|
71
|
+
animation: glow 2s ease infinite;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@keyframes glow {
|
|
75
|
+
0%, 100% { box-shadow: 0 0 4px #22c55e; }
|
|
76
|
+
50% { box-shadow: 0 0 12px #22c55e; }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.topbar-right {
|
|
80
|
+
display: flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
gap: 6px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.topbar-btn {
|
|
86
|
+
padding: 6px 14px;
|
|
87
|
+
border: 1px solid #27272a;
|
|
88
|
+
border-radius: 8px;
|
|
89
|
+
background: transparent;
|
|
90
|
+
color: #a1a1aa;
|
|
91
|
+
font-size: 12px;
|
|
92
|
+
font-family: inherit;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
gap: 6px;
|
|
97
|
+
transition: all 0.15s;
|
|
98
|
+
font-weight: 500;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.topbar-btn:hover {
|
|
102
|
+
background: #27272a;
|
|
103
|
+
color: #fafafa;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.topbar-btn.active {
|
|
107
|
+
background: #27272a;
|
|
108
|
+
color: #fafafa;
|
|
109
|
+
border-color: #3f3f46;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* ---- MAIN AREA ---- */
|
|
113
|
+
.main {
|
|
114
|
+
flex: 1;
|
|
115
|
+
display: flex;
|
|
116
|
+
min-height: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* ---- CENTER: CONVERSATION ---- */
|
|
120
|
+
.center {
|
|
121
|
+
flex: 1;
|
|
122
|
+
display: flex;
|
|
123
|
+
flex-direction: column;
|
|
124
|
+
min-width: 0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.conversation {
|
|
128
|
+
flex: 1;
|
|
129
|
+
overflow-y: auto;
|
|
130
|
+
padding: 32px;
|
|
131
|
+
display: flex;
|
|
132
|
+
flex-direction: column;
|
|
133
|
+
gap: 24px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Message blocks */
|
|
137
|
+
.msg {
|
|
138
|
+
max-width: 720px;
|
|
139
|
+
width: 100%;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.msg-user {
|
|
143
|
+
align-self: flex-end;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.msg-label {
|
|
147
|
+
font-size: 11px;
|
|
148
|
+
font-weight: 600;
|
|
149
|
+
color: #71717a;
|
|
150
|
+
margin-bottom: 8px;
|
|
151
|
+
text-transform: uppercase;
|
|
152
|
+
letter-spacing: 0.5px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.msg-body {
|
|
156
|
+
font-size: 14px;
|
|
157
|
+
line-height: 1.7;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.msg-user .msg-body {
|
|
161
|
+
background: #27272a;
|
|
162
|
+
padding: 14px 18px;
|
|
163
|
+
border-radius: 14px;
|
|
164
|
+
border-bottom-right-radius: 4px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.msg-claude .msg-body {
|
|
168
|
+
color: #d4d4d8;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.msg-claude .msg-body strong {
|
|
172
|
+
color: #fafafa;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* Summary card — the key friendly element */
|
|
176
|
+
.summary-card {
|
|
177
|
+
margin-top: 16px;
|
|
178
|
+
border: 1px solid #27272a;
|
|
179
|
+
border-radius: 14px;
|
|
180
|
+
overflow: hidden;
|
|
181
|
+
background: #1c1c1f;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.summary-header {
|
|
185
|
+
padding: 14px 18px;
|
|
186
|
+
display: flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
justify-content: space-between;
|
|
189
|
+
border-bottom: 1px solid #27272a;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.summary-header h3 {
|
|
193
|
+
font-size: 14px;
|
|
194
|
+
font-weight: 600;
|
|
195
|
+
display: flex;
|
|
196
|
+
align-items: center;
|
|
197
|
+
gap: 8px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.summary-header .count {
|
|
201
|
+
font-size: 12px;
|
|
202
|
+
color: #71717a;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.summary-items {
|
|
206
|
+
padding: 8px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.summary-item {
|
|
210
|
+
display: flex;
|
|
211
|
+
align-items: center;
|
|
212
|
+
gap: 12px;
|
|
213
|
+
padding: 10px 14px;
|
|
214
|
+
border-radius: 10px;
|
|
215
|
+
transition: background 0.15s;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.summary-item:hover {
|
|
219
|
+
background: #27272a;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.item-icon {
|
|
223
|
+
width: 32px;
|
|
224
|
+
height: 32px;
|
|
225
|
+
border-radius: 8px;
|
|
226
|
+
display: flex;
|
|
227
|
+
align-items: center;
|
|
228
|
+
justify-content: center;
|
|
229
|
+
font-size: 14px;
|
|
230
|
+
flex-shrink: 0;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.icon-done { background: rgba(34,197,94,0.15); }
|
|
234
|
+
.icon-active { background: rgba(59,130,246,0.15); }
|
|
235
|
+
.icon-pending { background: rgba(161,161,170,0.1); }
|
|
236
|
+
|
|
237
|
+
.item-text {
|
|
238
|
+
flex: 1;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.item-title {
|
|
242
|
+
font-size: 13px;
|
|
243
|
+
font-weight: 500;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.item-desc {
|
|
247
|
+
font-size: 12px;
|
|
248
|
+
color: #71717a;
|
|
249
|
+
margin-top: 2px;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.item-status {
|
|
253
|
+
font-size: 11px;
|
|
254
|
+
font-weight: 600;
|
|
255
|
+
padding: 3px 10px;
|
|
256
|
+
border-radius: 100px;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.status-done { background: rgba(34,197,94,0.15); color: #4ade80; }
|
|
260
|
+
.status-active { background: rgba(59,130,246,0.15); color: #60a5fa; }
|
|
261
|
+
.status-pending { color: #52525b; }
|
|
262
|
+
|
|
263
|
+
/* Thinking indicator */
|
|
264
|
+
.thinking {
|
|
265
|
+
display: flex;
|
|
266
|
+
align-items: center;
|
|
267
|
+
gap: 12px;
|
|
268
|
+
padding: 16px 0;
|
|
269
|
+
color: #71717a;
|
|
270
|
+
font-size: 13px;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.thinking-dots {
|
|
274
|
+
display: flex;
|
|
275
|
+
gap: 4px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.thinking-dots span {
|
|
279
|
+
width: 6px;
|
|
280
|
+
height: 6px;
|
|
281
|
+
border-radius: 50%;
|
|
282
|
+
background: #3f3f46;
|
|
283
|
+
animation: bounce 1.4s ease infinite;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
|
|
287
|
+
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
|
|
288
|
+
|
|
289
|
+
@keyframes bounce {
|
|
290
|
+
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
|
|
291
|
+
40% { transform: translateY(-6px); opacity: 1; }
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/* Under the hood toggle */
|
|
295
|
+
.hood-toggle {
|
|
296
|
+
display: inline-flex;
|
|
297
|
+
align-items: center;
|
|
298
|
+
gap: 6px;
|
|
299
|
+
margin-top: 12px;
|
|
300
|
+
padding: 6px 14px;
|
|
301
|
+
border: 1px solid #27272a;
|
|
302
|
+
border-radius: 8px;
|
|
303
|
+
background: transparent;
|
|
304
|
+
color: #71717a;
|
|
305
|
+
font-size: 12px;
|
|
306
|
+
font-family: inherit;
|
|
307
|
+
cursor: pointer;
|
|
308
|
+
transition: all 0.15s;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.hood-toggle:hover {
|
|
312
|
+
background: #27272a;
|
|
313
|
+
color: #a1a1aa;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.hood-panel {
|
|
317
|
+
margin-top: 10px;
|
|
318
|
+
background: #09090b;
|
|
319
|
+
border: 1px solid #27272a;
|
|
320
|
+
border-radius: 10px;
|
|
321
|
+
padding: 14px;
|
|
322
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
323
|
+
font-size: 12px;
|
|
324
|
+
line-height: 1.7;
|
|
325
|
+
max-height: 180px;
|
|
326
|
+
overflow-y: auto;
|
|
327
|
+
color: #71717a;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.hood-panel .cmd { color: #a1a1aa; }
|
|
331
|
+
.hood-panel .ok { color: #4ade80; }
|
|
332
|
+
.hood-panel .dim { color: #3f3f46; }
|
|
333
|
+
|
|
334
|
+
/* ---- INPUT ---- */
|
|
335
|
+
.input-area {
|
|
336
|
+
padding: 16px 32px 20px;
|
|
337
|
+
border-top: 1px solid #27272a;
|
|
338
|
+
background: #09090b;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.input-wrapper {
|
|
342
|
+
display: flex;
|
|
343
|
+
gap: 10px;
|
|
344
|
+
align-items: flex-end;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.input-field {
|
|
348
|
+
flex: 1;
|
|
349
|
+
padding: 14px 18px;
|
|
350
|
+
background: #18181b;
|
|
351
|
+
border: 1px solid #27272a;
|
|
352
|
+
border-radius: 14px;
|
|
353
|
+
color: #fafafa;
|
|
354
|
+
font-size: 14px;
|
|
355
|
+
font-family: inherit;
|
|
356
|
+
outline: none;
|
|
357
|
+
transition: border-color 0.2s;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.input-field::placeholder { color: #52525b; }
|
|
361
|
+
.input-field:focus {
|
|
362
|
+
border-color: #22c55e;
|
|
363
|
+
box-shadow: 0 0 0 3px rgba(34,197,94,0.1);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.send-btn {
|
|
367
|
+
width: 48px;
|
|
368
|
+
height: 48px;
|
|
369
|
+
border-radius: 14px;
|
|
370
|
+
border: none;
|
|
371
|
+
background: #22c55e;
|
|
372
|
+
color: #09090b;
|
|
373
|
+
font-size: 18px;
|
|
374
|
+
font-weight: 700;
|
|
375
|
+
cursor: pointer;
|
|
376
|
+
transition: background 0.15s;
|
|
377
|
+
flex-shrink: 0;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.send-btn:hover { background: #16a34a; }
|
|
381
|
+
|
|
382
|
+
.input-shortcuts {
|
|
383
|
+
display: flex;
|
|
384
|
+
gap: 6px;
|
|
385
|
+
margin-top: 10px;
|
|
386
|
+
flex-wrap: wrap;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.shortcut {
|
|
390
|
+
padding: 5px 12px;
|
|
391
|
+
border: 1px solid #27272a;
|
|
392
|
+
border-radius: 8px;
|
|
393
|
+
background: transparent;
|
|
394
|
+
color: #71717a;
|
|
395
|
+
font-size: 12px;
|
|
396
|
+
font-family: inherit;
|
|
397
|
+
cursor: pointer;
|
|
398
|
+
transition: all 0.15s;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.shortcut:hover {
|
|
402
|
+
background: #27272a;
|
|
403
|
+
color: #a1a1aa;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
/* ---- RIGHT PANEL ---- */
|
|
407
|
+
.right-panel {
|
|
408
|
+
width: 400px;
|
|
409
|
+
border-left: 1px solid #27272a;
|
|
410
|
+
background: #09090b;
|
|
411
|
+
display: flex;
|
|
412
|
+
flex-direction: column;
|
|
413
|
+
flex-shrink: 0;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.panel-tabs {
|
|
417
|
+
display: flex;
|
|
418
|
+
border-bottom: 1px solid #27272a;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.panel-tab {
|
|
422
|
+
flex: 1;
|
|
423
|
+
padding: 14px;
|
|
424
|
+
border: none;
|
|
425
|
+
background: transparent;
|
|
426
|
+
color: #52525b;
|
|
427
|
+
font-size: 13px;
|
|
428
|
+
font-weight: 600;
|
|
429
|
+
font-family: inherit;
|
|
430
|
+
cursor: pointer;
|
|
431
|
+
border-bottom: 2px solid transparent;
|
|
432
|
+
transition: all 0.15s;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.panel-tab.active {
|
|
436
|
+
color: #fafafa;
|
|
437
|
+
border-bottom-color: #22c55e;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.panel-body {
|
|
441
|
+
flex: 1;
|
|
442
|
+
display: flex;
|
|
443
|
+
flex-direction: column;
|
|
444
|
+
align-items: center;
|
|
445
|
+
justify-content: center;
|
|
446
|
+
padding: 40px 24px;
|
|
447
|
+
text-align: center;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.panel-body .empty-icon {
|
|
451
|
+
font-size: 48px;
|
|
452
|
+
margin-bottom: 16px;
|
|
453
|
+
opacity: 0.3;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.panel-body p {
|
|
457
|
+
color: #52525b;
|
|
458
|
+
font-size: 14px;
|
|
459
|
+
line-height: 1.5;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.panel-body .hint {
|
|
463
|
+
margin-top: 16px;
|
|
464
|
+
padding: 10px 18px;
|
|
465
|
+
background: #18181b;
|
|
466
|
+
border: 1px solid #27272a;
|
|
467
|
+
border-radius: 10px;
|
|
468
|
+
font-size: 12px;
|
|
469
|
+
color: #71717a;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
/* Quick actions in the panel */
|
|
473
|
+
.quick-actions {
|
|
474
|
+
padding: 16px;
|
|
475
|
+
border-top: 1px solid #27272a;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
.quick-actions h4 {
|
|
479
|
+
font-size: 10px;
|
|
480
|
+
text-transform: uppercase;
|
|
481
|
+
letter-spacing: 1.2px;
|
|
482
|
+
color: #52525b;
|
|
483
|
+
margin-bottom: 10px;
|
|
484
|
+
font-weight: 600;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.quick-btn {
|
|
488
|
+
display: block;
|
|
489
|
+
width: 100%;
|
|
490
|
+
text-align: left;
|
|
491
|
+
padding: 10px 14px;
|
|
492
|
+
border: 1px solid #27272a;
|
|
493
|
+
border-radius: 10px;
|
|
494
|
+
background: transparent;
|
|
495
|
+
color: #a1a1aa;
|
|
496
|
+
font-size: 13px;
|
|
497
|
+
font-family: inherit;
|
|
498
|
+
cursor: pointer;
|
|
499
|
+
margin-bottom: 6px;
|
|
500
|
+
transition: all 0.15s;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.quick-btn:hover {
|
|
504
|
+
background: #18181b;
|
|
505
|
+
border-color: #3f3f46;
|
|
506
|
+
color: #fafafa;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.quick-btn span {
|
|
510
|
+
margin-right: 8px;
|
|
511
|
+
}
|
|
512
|
+
</style>
|
|
513
|
+
</head>
|
|
514
|
+
<body>
|
|
515
|
+
<!-- TOP BAR -->
|
|
516
|
+
<div class="topbar">
|
|
517
|
+
<div class="topbar-left">
|
|
518
|
+
<div class="topbar-logo">
|
|
519
|
+
<span style="font-size:18px;">🌱</span> Greenhouse
|
|
520
|
+
</div>
|
|
521
|
+
<div class="topbar-divider"></div>
|
|
522
|
+
<span class="topbar-project">my-portfolio</span>
|
|
523
|
+
<div class="topbar-status">
|
|
524
|
+
<span class="live-dot"></span>
|
|
525
|
+
Building...
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="topbar-right">
|
|
529
|
+
<button class="topbar-btn active">💬 Chat</button>
|
|
530
|
+
<button class="topbar-btn">📁 Files</button>
|
|
531
|
+
<button class="topbar-btn">👁 Preview</button>
|
|
532
|
+
<button class="topbar-btn">⚙️</button>
|
|
533
|
+
</div>
|
|
534
|
+
</div>
|
|
535
|
+
|
|
536
|
+
<div class="main">
|
|
537
|
+
<!-- CENTER -->
|
|
538
|
+
<div class="center">
|
|
539
|
+
<div class="conversation">
|
|
540
|
+
|
|
541
|
+
<!-- User -->
|
|
542
|
+
<div class="msg msg-user">
|
|
543
|
+
<div class="msg-label">You</div>
|
|
544
|
+
<div class="msg-body">
|
|
545
|
+
A portfolio site for my photography business with a gallery, about page, and contact form
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
|
|
549
|
+
<!-- Claude -->
|
|
550
|
+
<div class="msg msg-claude">
|
|
551
|
+
<div class="msg-label">Claude</div>
|
|
552
|
+
<div class="msg-body">
|
|
553
|
+
I'll build your photography portfolio with a modern, clean design. Here's the plan:
|
|
554
|
+
|
|
555
|
+
<div class="summary-card">
|
|
556
|
+
<div class="summary-header">
|
|
557
|
+
<h3>📋 Build plan</h3>
|
|
558
|
+
<span class="count">4 of 6 complete</span>
|
|
559
|
+
</div>
|
|
560
|
+
<div class="summary-items">
|
|
561
|
+
<div class="summary-item">
|
|
562
|
+
<div class="item-icon icon-done">✓</div>
|
|
563
|
+
<div class="item-text">
|
|
564
|
+
<div class="item-title">Project setup</div>
|
|
565
|
+
<div class="item-desc">Vite + React, dependencies installed</div>
|
|
566
|
+
</div>
|
|
567
|
+
<span class="item-status status-done">Done</span>
|
|
568
|
+
</div>
|
|
569
|
+
<div class="summary-item">
|
|
570
|
+
<div class="item-icon icon-done">✓</div>
|
|
571
|
+
<div class="item-text">
|
|
572
|
+
<div class="item-title">Homepage hero</div>
|
|
573
|
+
<div class="item-desc">Full-width cover photo with name and tagline</div>
|
|
574
|
+
</div>
|
|
575
|
+
<span class="item-status status-done">Done</span>
|
|
576
|
+
</div>
|
|
577
|
+
<div class="summary-item">
|
|
578
|
+
<div class="item-icon icon-done">✓</div>
|
|
579
|
+
<div class="item-text">
|
|
580
|
+
<div class="item-title">Photo gallery</div>
|
|
581
|
+
<div class="item-desc">Masonry grid with full-screen lightbox</div>
|
|
582
|
+
</div>
|
|
583
|
+
<span class="item-status status-done">Done</span>
|
|
584
|
+
</div>
|
|
585
|
+
<div class="summary-item">
|
|
586
|
+
<div class="item-icon icon-done">✓</div>
|
|
587
|
+
<div class="item-text">
|
|
588
|
+
<div class="item-title">Contact form</div>
|
|
589
|
+
<div class="item-desc">Name, email, message with validation</div>
|
|
590
|
+
</div>
|
|
591
|
+
<span class="item-status status-done">Done</span>
|
|
592
|
+
</div>
|
|
593
|
+
<div class="summary-item">
|
|
594
|
+
<div class="item-icon icon-active">⚡</div>
|
|
595
|
+
<div class="item-text">
|
|
596
|
+
<div class="item-title">About page</div>
|
|
597
|
+
<div class="item-desc">Your story and experience</div>
|
|
598
|
+
</div>
|
|
599
|
+
<span class="item-status status-active">Working...</span>
|
|
600
|
+
</div>
|
|
601
|
+
<div class="summary-item">
|
|
602
|
+
<div class="item-icon icon-pending">○</div>
|
|
603
|
+
<div class="item-text">
|
|
604
|
+
<div class="item-title">Navigation and polish</div>
|
|
605
|
+
<div class="item-desc">Tie everything together</div>
|
|
606
|
+
</div>
|
|
607
|
+
<span class="item-status status-pending">Up next</span>
|
|
608
|
+
</div>
|
|
609
|
+
</div>
|
|
610
|
+
</div>
|
|
611
|
+
|
|
612
|
+
<button class="hood-toggle">🔧 Under the hood <span style="font-size:10px;">▸</span></button>
|
|
613
|
+
|
|
614
|
+
<div class="hood-panel">
|
|
615
|
+
<div class="cmd">$ npm create vite@latest . -- --template react</div>
|
|
616
|
+
<div class="ok">✓ Scaffolded vite + react project</div>
|
|
617
|
+
<div class="cmd">$ npm install</div>
|
|
618
|
+
<div class="ok">✓ added 127 packages</div>
|
|
619
|
+
<div class="dim">───────────────────────────────</div>
|
|
620
|
+
<div class="cmd">Writing src/components/Hero.jsx</div>
|
|
621
|
+
<div class="cmd">Writing src/components/Gallery.jsx</div>
|
|
622
|
+
<div class="cmd">Writing src/components/Contact.jsx</div>
|
|
623
|
+
<div class="cmd">Writing src/App.jsx</div>
|
|
624
|
+
<div class="cmd">Writing src/styles.css</div>
|
|
625
|
+
<div class="ok">✓ 5 files created</div>
|
|
626
|
+
<div class="dim">───────────────────────────────</div>
|
|
627
|
+
<div class="cmd">Writing src/components/About.jsx...</div>
|
|
628
|
+
</div>
|
|
629
|
+
</div>
|
|
630
|
+
</div>
|
|
631
|
+
|
|
632
|
+
<!-- Thinking -->
|
|
633
|
+
<div class="thinking">
|
|
634
|
+
<div class="thinking-dots">
|
|
635
|
+
<span></span><span></span><span></span>
|
|
636
|
+
</div>
|
|
637
|
+
Claude is writing the About page...
|
|
638
|
+
</div>
|
|
639
|
+
|
|
640
|
+
</div>
|
|
641
|
+
|
|
642
|
+
<!-- Input -->
|
|
643
|
+
<div class="input-area">
|
|
644
|
+
<div class="input-wrapper">
|
|
645
|
+
<input class="input-field" placeholder="Tell Claude what to change or build next..." />
|
|
646
|
+
<button class="send-btn">↑</button>
|
|
647
|
+
</div>
|
|
648
|
+
<div class="input-shortcuts">
|
|
649
|
+
<button class="shortcut">🎨 Change colors</button>
|
|
650
|
+
<button class="shortcut">📱 Mobile-friendly</button>
|
|
651
|
+
<button class="shortcut">🌙 Add dark mode</button>
|
|
652
|
+
<button class="shortcut">📸 More gallery styles</button>
|
|
653
|
+
<button class="shortcut">▶️ Start preview</button>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
</div>
|
|
657
|
+
|
|
658
|
+
<!-- RIGHT PANEL -->
|
|
659
|
+
<div class="right-panel">
|
|
660
|
+
<div class="panel-tabs">
|
|
661
|
+
<button class="panel-tab active">Preview</button>
|
|
662
|
+
<button class="panel-tab">Terminal</button>
|
|
663
|
+
</div>
|
|
664
|
+
<div class="panel-body">
|
|
665
|
+
<div class="empty-icon">🖼️</div>
|
|
666
|
+
<p>Your site preview will appear here once Claude starts the dev server.</p>
|
|
667
|
+
<div class="hint">
|
|
668
|
+
Tip: Click <strong>"▶️ Start preview"</strong> below the chat once the build is finished
|
|
669
|
+
</div>
|
|
670
|
+
</div>
|
|
671
|
+
<div class="quick-actions">
|
|
672
|
+
<h4>Quick actions</h4>
|
|
673
|
+
<button class="quick-btn"><span>▶️</span> Start dev server</button>
|
|
674
|
+
<button class="quick-btn"><span>📂</span> Open in Finder</button>
|
|
675
|
+
<button class="quick-btn"><span>💾</span> Save my progress</button>
|
|
676
|
+
</div>
|
|
677
|
+
</div>
|
|
678
|
+
</div>
|
|
679
|
+
</body>
|
|
680
|
+
</html>
|