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,1556 @@
|
|
|
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 4: Documents Mode</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: #f8fafc;
|
|
13
|
+
color: #1a2233;
|
|
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: 44px;
|
|
26
|
+
background: #fff;
|
|
27
|
+
border-bottom: 1px solid #e2e8f0;
|
|
28
|
+
flex-shrink: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.topbar-left {
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 12px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.topbar-logo {
|
|
38
|
+
width: 28px;
|
|
39
|
+
height: 28px;
|
|
40
|
+
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
41
|
+
border-radius: 8px;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
color: white;
|
|
46
|
+
font-size: 12px;
|
|
47
|
+
font-weight: 800;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.topbar-path {
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
color: #94a3b8;
|
|
53
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.topbar-right {
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
gap: 12px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Mode toggle */
|
|
63
|
+
.mode-toggle {
|
|
64
|
+
display: flex;
|
|
65
|
+
background: #f1f5f9;
|
|
66
|
+
border-radius: 8px;
|
|
67
|
+
padding: 2px;
|
|
68
|
+
gap: 2px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mode-btn {
|
|
72
|
+
padding: 5px 12px;
|
|
73
|
+
border: none;
|
|
74
|
+
border-radius: 6px;
|
|
75
|
+
font-size: 12px;
|
|
76
|
+
font-family: inherit;
|
|
77
|
+
font-weight: 600;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
transition: all 0.15s;
|
|
80
|
+
background: transparent;
|
|
81
|
+
color: #94a3b8;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.mode-btn.active-build {
|
|
85
|
+
background: #fff;
|
|
86
|
+
color: #1a2233;
|
|
87
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.mode-btn.active-doc {
|
|
91
|
+
background: #fff;
|
|
92
|
+
color: #6366f1;
|
|
93
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.topbar-status {
|
|
97
|
+
font-size: 11px;
|
|
98
|
+
padding: 3px 10px;
|
|
99
|
+
border-radius: 100px;
|
|
100
|
+
background: rgba(34,197,94,0.1);
|
|
101
|
+
color: #22c55e;
|
|
102
|
+
font-weight: 600;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.topbar-link {
|
|
106
|
+
font-size: 12px;
|
|
107
|
+
color: #94a3b8;
|
|
108
|
+
text-decoration: none;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.topbar-link:hover { color: #64748b; }
|
|
113
|
+
|
|
114
|
+
/* ---- MAIN LAYOUT ---- */
|
|
115
|
+
.main {
|
|
116
|
+
flex: 1;
|
|
117
|
+
display: flex;
|
|
118
|
+
min-height: 0;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* ---- LEFT SIDEBAR ---- */
|
|
122
|
+
.sidebar {
|
|
123
|
+
width: 300px;
|
|
124
|
+
background: #f8fafc;
|
|
125
|
+
border-right: 1px solid #e2e8f0;
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
flex-shrink: 0;
|
|
129
|
+
overflow-y: auto;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.sidebar-section {
|
|
133
|
+
padding: 16px 20px;
|
|
134
|
+
border-bottom: 1px solid #e2e8f0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.step-header {
|
|
138
|
+
display: flex;
|
|
139
|
+
align-items: center;
|
|
140
|
+
gap: 8px;
|
|
141
|
+
margin-bottom: 12px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.step-number {
|
|
145
|
+
width: 24px;
|
|
146
|
+
height: 24px;
|
|
147
|
+
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
148
|
+
border-radius: 8px;
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
justify-content: center;
|
|
152
|
+
color: white;
|
|
153
|
+
font-size: 11px;
|
|
154
|
+
font-weight: 800;
|
|
155
|
+
flex-shrink: 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.step-number.done {
|
|
159
|
+
background: linear-gradient(135deg, #22c55e, #16a34a);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.step-title {
|
|
163
|
+
font-size: 13px;
|
|
164
|
+
font-weight: 700;
|
|
165
|
+
color: #1a2233;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* Section 1: Folder */
|
|
169
|
+
.folder-display {
|
|
170
|
+
background: #fff;
|
|
171
|
+
border: 1px solid #e2e8f0;
|
|
172
|
+
border-radius: 10px;
|
|
173
|
+
padding: 10px 14px;
|
|
174
|
+
display: flex;
|
|
175
|
+
align-items: center;
|
|
176
|
+
gap: 10px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.folder-icon { font-size: 20px; }
|
|
180
|
+
|
|
181
|
+
.folder-info { flex: 1; min-width: 0; }
|
|
182
|
+
|
|
183
|
+
.folder-path {
|
|
184
|
+
font-size: 12px;
|
|
185
|
+
font-family: 'SF Mono', monospace;
|
|
186
|
+
color: #1a2233;
|
|
187
|
+
white-space: nowrap;
|
|
188
|
+
overflow: hidden;
|
|
189
|
+
text-overflow: ellipsis;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.folder-meta {
|
|
193
|
+
font-size: 11px;
|
|
194
|
+
color: #94a3b8;
|
|
195
|
+
margin-top: 2px;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.folder-badge {
|
|
199
|
+
font-size: 11px;
|
|
200
|
+
padding: 3px 10px;
|
|
201
|
+
border-radius: 100px;
|
|
202
|
+
background: #dcfce7;
|
|
203
|
+
color: #166534;
|
|
204
|
+
font-weight: 600;
|
|
205
|
+
flex-shrink: 0;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.change-btn {
|
|
209
|
+
font-size: 11px;
|
|
210
|
+
color: #6366f1;
|
|
211
|
+
font-weight: 700;
|
|
212
|
+
background: none;
|
|
213
|
+
border: none;
|
|
214
|
+
cursor: pointer;
|
|
215
|
+
flex-shrink: 0;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.change-btn:hover { text-decoration: underline; }
|
|
219
|
+
|
|
220
|
+
.file-types {
|
|
221
|
+
display: flex;
|
|
222
|
+
flex-wrap: wrap;
|
|
223
|
+
gap: 4px;
|
|
224
|
+
margin-top: 8px;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.type-chip {
|
|
228
|
+
font-size: 10px;
|
|
229
|
+
padding: 2px 8px;
|
|
230
|
+
border-radius: 4px;
|
|
231
|
+
font-weight: 600;
|
|
232
|
+
font-family: 'SF Mono', monospace;
|
|
233
|
+
text-transform: uppercase;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.type-pdf { background: #fef2f2; color: #dc2626; }
|
|
237
|
+
.type-docx { background: #eff6ff; color: #2563eb; }
|
|
238
|
+
.type-xlsx { background: #f0fdf4; color: #16a34a; }
|
|
239
|
+
.type-csv { background: #f0fdf4; color: #166534; }
|
|
240
|
+
.type-txt { background: #f8fafc; color: #64748b; }
|
|
241
|
+
|
|
242
|
+
/* Section 2: Outcomes */
|
|
243
|
+
.outcome-grid {
|
|
244
|
+
display: grid;
|
|
245
|
+
grid-template-columns: repeat(2, 1fr);
|
|
246
|
+
gap: 6px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.outcome-card {
|
|
250
|
+
padding: 10px 8px;
|
|
251
|
+
border: 1.5px solid #e2e8f0;
|
|
252
|
+
border-radius: 10px;
|
|
253
|
+
background: #fff;
|
|
254
|
+
cursor: pointer;
|
|
255
|
+
text-align: center;
|
|
256
|
+
transition: all 0.15s;
|
|
257
|
+
font-family: inherit;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.outcome-card:hover {
|
|
261
|
+
border-color: #c7d2fe;
|
|
262
|
+
background: #f5f3ff;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.outcome-card.selected {
|
|
266
|
+
border-color: #818cf8;
|
|
267
|
+
background: #eef2ff;
|
|
268
|
+
box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.outcome-emoji {
|
|
272
|
+
font-size: 20px;
|
|
273
|
+
display: block;
|
|
274
|
+
margin-bottom: 4px;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.outcome-name {
|
|
278
|
+
font-size: 11px;
|
|
279
|
+
font-weight: 700;
|
|
280
|
+
color: #1a2233;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.outcome-card.selected .outcome-name {
|
|
284
|
+
color: #4338ca;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.outcome-desc {
|
|
288
|
+
font-size: 10px;
|
|
289
|
+
color: #94a3b8;
|
|
290
|
+
margin-top: 2px;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.more-btn {
|
|
294
|
+
grid-column: 1 / -1;
|
|
295
|
+
padding: 8px;
|
|
296
|
+
border: 1.5px dashed #c7d2fe;
|
|
297
|
+
border-radius: 10px;
|
|
298
|
+
background: transparent;
|
|
299
|
+
cursor: pointer;
|
|
300
|
+
font-size: 11px;
|
|
301
|
+
font-family: inherit;
|
|
302
|
+
color: #6366f1;
|
|
303
|
+
font-weight: 700;
|
|
304
|
+
transition: all 0.15s;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.more-btn:hover {
|
|
308
|
+
background: #f5f3ff;
|
|
309
|
+
border-color: #818cf8;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.freeform-divider {
|
|
313
|
+
display: flex;
|
|
314
|
+
align-items: center;
|
|
315
|
+
gap: 10px;
|
|
316
|
+
margin: 12px 0 8px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.freeform-divider::before,
|
|
320
|
+
.freeform-divider::after {
|
|
321
|
+
content: '';
|
|
322
|
+
flex: 1;
|
|
323
|
+
height: 1px;
|
|
324
|
+
background: #e2e8f0;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.freeform-divider span {
|
|
328
|
+
font-size: 10px;
|
|
329
|
+
color: #94a3b8;
|
|
330
|
+
font-weight: 600;
|
|
331
|
+
text-transform: uppercase;
|
|
332
|
+
letter-spacing: 0.5px;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.freeform-input {
|
|
336
|
+
width: 100%;
|
|
337
|
+
height: 40px;
|
|
338
|
+
padding: 8px 12px;
|
|
339
|
+
border: 1.5px solid #e2e8f0;
|
|
340
|
+
border-radius: 8px;
|
|
341
|
+
font-size: 12px;
|
|
342
|
+
font-family: inherit;
|
|
343
|
+
resize: none;
|
|
344
|
+
outline: none;
|
|
345
|
+
color: #1a2233;
|
|
346
|
+
transition: border-color 0.2s;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.freeform-input::placeholder { color: #cbd5e1; }
|
|
350
|
+
|
|
351
|
+
.freeform-input:focus {
|
|
352
|
+
border-color: #818cf8;
|
|
353
|
+
box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
/* Section 3: Context + Go */
|
|
357
|
+
.context-input {
|
|
358
|
+
width: 100%;
|
|
359
|
+
height: 52px;
|
|
360
|
+
padding: 10px 12px;
|
|
361
|
+
border: 1.5px solid #e2e8f0;
|
|
362
|
+
border-radius: 10px;
|
|
363
|
+
font-size: 12px;
|
|
364
|
+
font-family: inherit;
|
|
365
|
+
resize: none;
|
|
366
|
+
outline: none;
|
|
367
|
+
color: #1a2233;
|
|
368
|
+
transition: border-color 0.2s;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.context-input::placeholder { color: #cbd5e1; }
|
|
372
|
+
|
|
373
|
+
.context-input:focus {
|
|
374
|
+
border-color: #818cf8;
|
|
375
|
+
box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.go-btn {
|
|
379
|
+
width: 100%;
|
|
380
|
+
margin-top: 12px;
|
|
381
|
+
padding: 14px;
|
|
382
|
+
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
383
|
+
color: white;
|
|
384
|
+
border: none;
|
|
385
|
+
border-radius: 12px;
|
|
386
|
+
font-size: 14px;
|
|
387
|
+
font-weight: 800;
|
|
388
|
+
font-family: inherit;
|
|
389
|
+
cursor: pointer;
|
|
390
|
+
display: flex;
|
|
391
|
+
align-items: center;
|
|
392
|
+
justify-content: center;
|
|
393
|
+
gap: 8px;
|
|
394
|
+
box-shadow: 0 4px 14px rgba(99,102,241,0.3);
|
|
395
|
+
transition: all 0.15s;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.go-btn:hover {
|
|
399
|
+
box-shadow: 0 6px 20px rgba(99,102,241,0.4);
|
|
400
|
+
transform: translateY(-1px);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.go-btn:disabled {
|
|
404
|
+
opacity: 0.5;
|
|
405
|
+
cursor: not-allowed;
|
|
406
|
+
transform: none;
|
|
407
|
+
box-shadow: none;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.go-hint {
|
|
411
|
+
text-align: center;
|
|
412
|
+
font-size: 11px;
|
|
413
|
+
color: #94a3b8;
|
|
414
|
+
margin-top: 8px;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.optional-tag {
|
|
418
|
+
font-size: 10px;
|
|
419
|
+
color: #94a3b8;
|
|
420
|
+
font-style: italic;
|
|
421
|
+
font-weight: 400;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/* ---- STEP 2b: STYLE REFERENCE ---- */
|
|
425
|
+
.dropzone {
|
|
426
|
+
border: 2px dashed #c7d2fe;
|
|
427
|
+
border-radius: 12px;
|
|
428
|
+
padding: 16px;
|
|
429
|
+
text-align: center;
|
|
430
|
+
cursor: pointer;
|
|
431
|
+
transition: all 0.2s;
|
|
432
|
+
background: #fafaff;
|
|
433
|
+
position: relative;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.dropzone:hover,
|
|
437
|
+
.dropzone.dragover {
|
|
438
|
+
border-color: #818cf8;
|
|
439
|
+
background: #eef2ff;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.dropzone-icon {
|
|
443
|
+
font-size: 24px;
|
|
444
|
+
margin-bottom: 6px;
|
|
445
|
+
opacity: 0.7;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.dropzone-text {
|
|
449
|
+
font-size: 12px;
|
|
450
|
+
color: #64748b;
|
|
451
|
+
font-weight: 500;
|
|
452
|
+
line-height: 1.5;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.dropzone-text strong {
|
|
456
|
+
color: #6366f1;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.dropzone-hint {
|
|
460
|
+
font-size: 10px;
|
|
461
|
+
color: #94a3b8;
|
|
462
|
+
margin-top: 4px;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.dropzone-input {
|
|
466
|
+
position: absolute;
|
|
467
|
+
inset: 0;
|
|
468
|
+
opacity: 0;
|
|
469
|
+
cursor: pointer;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
/* Attached example card */
|
|
473
|
+
.example-card {
|
|
474
|
+
display: flex;
|
|
475
|
+
align-items: center;
|
|
476
|
+
gap: 10px;
|
|
477
|
+
padding: 10px 12px;
|
|
478
|
+
background: #fff;
|
|
479
|
+
border: 1px solid #e2e8f0;
|
|
480
|
+
border-radius: 10px;
|
|
481
|
+
margin-bottom: 6px;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.example-card-icon {
|
|
485
|
+
width: 32px;
|
|
486
|
+
height: 32px;
|
|
487
|
+
border-radius: 8px;
|
|
488
|
+
display: flex;
|
|
489
|
+
align-items: center;
|
|
490
|
+
justify-content: center;
|
|
491
|
+
font-size: 15px;
|
|
492
|
+
flex-shrink: 0;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.example-card-icon.type-pdf-icon { background: #fef2f2; }
|
|
496
|
+
.example-card-icon.type-md-icon { background: #f0f9ff; }
|
|
497
|
+
|
|
498
|
+
.example-card-info {
|
|
499
|
+
flex: 1;
|
|
500
|
+
min-width: 0;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.example-card-name {
|
|
504
|
+
font-size: 12px;
|
|
505
|
+
font-weight: 600;
|
|
506
|
+
color: #1a2233;
|
|
507
|
+
white-space: nowrap;
|
|
508
|
+
overflow: hidden;
|
|
509
|
+
text-overflow: ellipsis;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.example-card-snippet {
|
|
513
|
+
font-size: 10px;
|
|
514
|
+
color: #94a3b8;
|
|
515
|
+
margin-top: 1px;
|
|
516
|
+
white-space: nowrap;
|
|
517
|
+
overflow: hidden;
|
|
518
|
+
text-overflow: ellipsis;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
.example-card-remove {
|
|
522
|
+
width: 20px;
|
|
523
|
+
height: 20px;
|
|
524
|
+
border-radius: 6px;
|
|
525
|
+
border: 1px solid #e2e8f0;
|
|
526
|
+
background: #fff;
|
|
527
|
+
color: #94a3b8;
|
|
528
|
+
font-size: 10px;
|
|
529
|
+
cursor: pointer;
|
|
530
|
+
display: flex;
|
|
531
|
+
align-items: center;
|
|
532
|
+
justify-content: center;
|
|
533
|
+
flex-shrink: 0;
|
|
534
|
+
transition: all 0.15s;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.example-card-remove:hover {
|
|
538
|
+
background: #fef2f2;
|
|
539
|
+
border-color: #fca5a5;
|
|
540
|
+
color: #dc2626;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.example-counter {
|
|
544
|
+
font-size: 10px;
|
|
545
|
+
color: #94a3b8;
|
|
546
|
+
text-align: right;
|
|
547
|
+
margin-top: 4px;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
/* Saved templates gallery */
|
|
551
|
+
.saved-divider {
|
|
552
|
+
display: flex;
|
|
553
|
+
align-items: center;
|
|
554
|
+
gap: 8px;
|
|
555
|
+
margin: 12px 0 8px;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.saved-divider::before,
|
|
559
|
+
.saved-divider::after {
|
|
560
|
+
content: '';
|
|
561
|
+
flex: 1;
|
|
562
|
+
height: 1px;
|
|
563
|
+
background: #e2e8f0;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.saved-divider span {
|
|
567
|
+
font-size: 10px;
|
|
568
|
+
color: #94a3b8;
|
|
569
|
+
font-weight: 600;
|
|
570
|
+
text-transform: uppercase;
|
|
571
|
+
letter-spacing: 0.5px;
|
|
572
|
+
white-space: nowrap;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.saved-templates {
|
|
576
|
+
display: flex;
|
|
577
|
+
flex-wrap: wrap;
|
|
578
|
+
gap: 5px;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
.saved-chip {
|
|
582
|
+
display: inline-flex;
|
|
583
|
+
align-items: center;
|
|
584
|
+
gap: 4px;
|
|
585
|
+
padding: 5px 10px;
|
|
586
|
+
border: 1px solid #e2e8f0;
|
|
587
|
+
border-radius: 8px;
|
|
588
|
+
background: #fff;
|
|
589
|
+
cursor: pointer;
|
|
590
|
+
font-size: 11px;
|
|
591
|
+
font-family: inherit;
|
|
592
|
+
color: #475569;
|
|
593
|
+
font-weight: 500;
|
|
594
|
+
transition: all 0.15s;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.saved-chip:hover {
|
|
598
|
+
border-color: #c7d2fe;
|
|
599
|
+
background: #f5f3ff;
|
|
600
|
+
color: #4338ca;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
.saved-chip.active {
|
|
604
|
+
border-color: #818cf8;
|
|
605
|
+
background: #eef2ff;
|
|
606
|
+
color: #4338ca;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.saved-chip-icon {
|
|
610
|
+
font-size: 12px;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.style-match-note {
|
|
614
|
+
font-size: 10px;
|
|
615
|
+
color: #6366f1;
|
|
616
|
+
background: #eef2ff;
|
|
617
|
+
border: 1px solid #e0e7ff;
|
|
618
|
+
border-radius: 8px;
|
|
619
|
+
padding: 6px 10px;
|
|
620
|
+
margin-top: 8px;
|
|
621
|
+
display: flex;
|
|
622
|
+
align-items: center;
|
|
623
|
+
gap: 6px;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/* Save as template CTA on output panel */
|
|
627
|
+
.save-template-cta {
|
|
628
|
+
display: flex;
|
|
629
|
+
align-items: center;
|
|
630
|
+
gap: 10px;
|
|
631
|
+
margin-top: 16px;
|
|
632
|
+
padding: 12px 14px;
|
|
633
|
+
background: #fafaff;
|
|
634
|
+
border: 1.5px dashed #c7d2fe;
|
|
635
|
+
border-radius: 10px;
|
|
636
|
+
cursor: pointer;
|
|
637
|
+
transition: all 0.15s;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
.save-template-cta:hover {
|
|
641
|
+
background: #eef2ff;
|
|
642
|
+
border-color: #818cf8;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.save-template-cta-icon {
|
|
646
|
+
font-size: 20px;
|
|
647
|
+
flex-shrink: 0;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.save-template-cta-text {
|
|
651
|
+
flex: 1;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.save-template-cta-title {
|
|
655
|
+
font-size: 12px;
|
|
656
|
+
font-weight: 700;
|
|
657
|
+
color: #4338ca;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.save-template-cta-desc {
|
|
661
|
+
font-size: 10px;
|
|
662
|
+
color: #94a3b8;
|
|
663
|
+
margin-top: 1px;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.save-template-cta-btn {
|
|
667
|
+
padding: 5px 12px;
|
|
668
|
+
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
669
|
+
border: none;
|
|
670
|
+
border-radius: 8px;
|
|
671
|
+
color: #fff;
|
|
672
|
+
font-size: 11px;
|
|
673
|
+
font-weight: 700;
|
|
674
|
+
font-family: inherit;
|
|
675
|
+
cursor: pointer;
|
|
676
|
+
flex-shrink: 0;
|
|
677
|
+
transition: all 0.15s;
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
.save-template-cta-btn:hover {
|
|
681
|
+
box-shadow: 0 2px 8px rgba(99,102,241,0.3);
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
/* ---- CENTER: CHAT + TERMINAL ---- */
|
|
685
|
+
.center {
|
|
686
|
+
flex: 1;
|
|
687
|
+
display: flex;
|
|
688
|
+
flex-direction: column;
|
|
689
|
+
min-width: 0;
|
|
690
|
+
position: relative;
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
/* Chat header */
|
|
694
|
+
.chat-header {
|
|
695
|
+
padding: 12px 24px;
|
|
696
|
+
background: #fff;
|
|
697
|
+
border-bottom: 1px solid #e2e8f0;
|
|
698
|
+
display: flex;
|
|
699
|
+
align-items: center;
|
|
700
|
+
justify-content: space-between;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.chat-header-left {
|
|
704
|
+
display: flex;
|
|
705
|
+
align-items: center;
|
|
706
|
+
gap: 10px;
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
.avatar {
|
|
710
|
+
width: 32px;
|
|
711
|
+
height: 32px;
|
|
712
|
+
border-radius: 10px;
|
|
713
|
+
display: flex;
|
|
714
|
+
align-items: center;
|
|
715
|
+
justify-content: center;
|
|
716
|
+
font-size: 16px;
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
.avatar-claude {
|
|
720
|
+
background: linear-gradient(135deg, #d4a574, #c4956a);
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.avatar-sm {
|
|
724
|
+
width: 20px;
|
|
725
|
+
height: 20px;
|
|
726
|
+
font-size: 11px;
|
|
727
|
+
border-radius: 6px;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.chat-name {
|
|
731
|
+
font-size: 13px;
|
|
732
|
+
font-weight: 700;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.chat-status {
|
|
736
|
+
font-size: 11px;
|
|
737
|
+
color: #6366f1;
|
|
738
|
+
display: flex;
|
|
739
|
+
align-items: center;
|
|
740
|
+
gap: 4px;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
.status-dot {
|
|
744
|
+
width: 6px;
|
|
745
|
+
height: 6px;
|
|
746
|
+
background: #6366f1;
|
|
747
|
+
border-radius: 50%;
|
|
748
|
+
animation: pulse-dot 2s ease infinite;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
@keyframes pulse-dot {
|
|
752
|
+
0%, 100% { opacity: 1; }
|
|
753
|
+
50% { opacity: 0.3; }
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.hood-btn {
|
|
757
|
+
display: flex;
|
|
758
|
+
align-items: center;
|
|
759
|
+
gap: 6px;
|
|
760
|
+
padding: 6px 12px;
|
|
761
|
+
border: 1px solid #e2e8f0;
|
|
762
|
+
border-radius: 8px;
|
|
763
|
+
background: #fff;
|
|
764
|
+
cursor: pointer;
|
|
765
|
+
font-size: 11px;
|
|
766
|
+
font-family: inherit;
|
|
767
|
+
color: #94a3b8;
|
|
768
|
+
font-weight: 500;
|
|
769
|
+
transition: all 0.15s;
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
.hood-btn:hover {
|
|
773
|
+
background: #f8fafc;
|
|
774
|
+
border-color: #cbd5e1;
|
|
775
|
+
color: #64748b;
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
.hood-btn.active {
|
|
779
|
+
background: #1a1a2e;
|
|
780
|
+
border-color: #1a1a2e;
|
|
781
|
+
color: #22c55e;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
.hood-pulse {
|
|
785
|
+
width: 6px;
|
|
786
|
+
height: 6px;
|
|
787
|
+
border-radius: 50%;
|
|
788
|
+
background: #6366f1;
|
|
789
|
+
animation: pulse-dot 2s ease infinite;
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
.hood-btn.active .hood-pulse {
|
|
793
|
+
background: #22c55e;
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
/* Messages */
|
|
797
|
+
.messages {
|
|
798
|
+
flex: 1;
|
|
799
|
+
overflow-y: auto;
|
|
800
|
+
padding: 24px 32px;
|
|
801
|
+
display: flex;
|
|
802
|
+
flex-direction: column;
|
|
803
|
+
gap: 20px;
|
|
804
|
+
background: #f8fafc;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
.message {
|
|
808
|
+
max-width: 640px;
|
|
809
|
+
animation: fadeUp 0.3s ease;
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
@keyframes fadeUp {
|
|
813
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
814
|
+
to { opacity: 1; transform: translateY(0); }
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.message-claude { align-self: flex-start; }
|
|
818
|
+
.message-user { align-self: flex-end; }
|
|
819
|
+
|
|
820
|
+
.message-sender {
|
|
821
|
+
font-size: 11px;
|
|
822
|
+
font-weight: 700;
|
|
823
|
+
color: #94a3b8;
|
|
824
|
+
margin-bottom: 6px;
|
|
825
|
+
display: flex;
|
|
826
|
+
align-items: center;
|
|
827
|
+
gap: 6px;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
.message-bubble {
|
|
831
|
+
padding: 14px 18px;
|
|
832
|
+
border-radius: 16px;
|
|
833
|
+
font-size: 13px;
|
|
834
|
+
line-height: 1.7;
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
.message-claude .message-bubble {
|
|
838
|
+
background: #fff;
|
|
839
|
+
border: 1px solid #e2e8f0;
|
|
840
|
+
border-bottom-left-radius: 4px;
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
.message-user .message-bubble {
|
|
844
|
+
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
845
|
+
color: #fff;
|
|
846
|
+
border-bottom-right-radius: 4px;
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
/* Progress steps inside messages */
|
|
850
|
+
.steps {
|
|
851
|
+
margin-top: 14px;
|
|
852
|
+
display: flex;
|
|
853
|
+
flex-direction: column;
|
|
854
|
+
gap: 6px;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
.step {
|
|
858
|
+
display: flex;
|
|
859
|
+
align-items: flex-start;
|
|
860
|
+
gap: 10px;
|
|
861
|
+
font-size: 12px;
|
|
862
|
+
color: #475569;
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
.step-icon {
|
|
866
|
+
width: 20px;
|
|
867
|
+
height: 20px;
|
|
868
|
+
border-radius: 50%;
|
|
869
|
+
display: flex;
|
|
870
|
+
align-items: center;
|
|
871
|
+
justify-content: center;
|
|
872
|
+
font-size: 10px;
|
|
873
|
+
flex-shrink: 0;
|
|
874
|
+
margin-top: 1px;
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
.step-done .step-icon { background: #dcfce7; color: #16a34a; }
|
|
878
|
+
.step-active .step-icon { background: #e0e7ff; color: #4338ca; animation: pulse-icon 1.5s ease infinite; }
|
|
879
|
+
.step-pending .step-icon { background: #f1f5f9; color: #94a3b8; }
|
|
880
|
+
|
|
881
|
+
@keyframes pulse-icon {
|
|
882
|
+
0%, 100% { opacity: 1; }
|
|
883
|
+
50% { opacity: 0.4; }
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
.step-content { flex: 1; }
|
|
887
|
+
.step-label { font-weight: 600; font-size: 12px; }
|
|
888
|
+
|
|
889
|
+
.step-summary {
|
|
890
|
+
font-size: 11px;
|
|
891
|
+
color: #94a3b8;
|
|
892
|
+
margin-top: 1px;
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
/* Info bar at bottom of terminal */
|
|
896
|
+
.terminal-info {
|
|
897
|
+
padding: 6px 24px;
|
|
898
|
+
background: #eef2ff;
|
|
899
|
+
border-top: 1px solid #e0e7ff;
|
|
900
|
+
font-size: 11px;
|
|
901
|
+
color: #6366f1;
|
|
902
|
+
text-align: center;
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
/* Input bar */
|
|
906
|
+
.input-bar {
|
|
907
|
+
padding: 14px 24px;
|
|
908
|
+
background: #fff;
|
|
909
|
+
border-top: 1px solid #e2e8f0;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
.input-row {
|
|
913
|
+
display: flex;
|
|
914
|
+
gap: 10px;
|
|
915
|
+
align-items: flex-end;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
.input-field {
|
|
919
|
+
flex: 1;
|
|
920
|
+
padding: 11px 16px;
|
|
921
|
+
border: 1.5px solid #e2e8f0;
|
|
922
|
+
border-radius: 12px;
|
|
923
|
+
font-size: 13px;
|
|
924
|
+
font-family: inherit;
|
|
925
|
+
resize: none;
|
|
926
|
+
outline: none;
|
|
927
|
+
transition: border-color 0.2s;
|
|
928
|
+
min-height: 42px;
|
|
929
|
+
color: #1a2233;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.input-field::placeholder { color: #cbd5e1; }
|
|
933
|
+
|
|
934
|
+
.input-field:focus {
|
|
935
|
+
border-color: #818cf8;
|
|
936
|
+
box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
.send-btn {
|
|
940
|
+
width: 42px;
|
|
941
|
+
height: 42px;
|
|
942
|
+
border-radius: 12px;
|
|
943
|
+
border: none;
|
|
944
|
+
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
945
|
+
color: white;
|
|
946
|
+
font-size: 16px;
|
|
947
|
+
cursor: pointer;
|
|
948
|
+
display: flex;
|
|
949
|
+
align-items: center;
|
|
950
|
+
justify-content: center;
|
|
951
|
+
transition: all 0.15s;
|
|
952
|
+
flex-shrink: 0;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
.send-btn:hover {
|
|
956
|
+
box-shadow: 0 4px 12px rgba(99,102,241,0.3);
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
.input-hint {
|
|
960
|
+
font-size: 10px;
|
|
961
|
+
color: #94a3b8;
|
|
962
|
+
margin-top: 5px;
|
|
963
|
+
text-align: center;
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
/* ---- TERMINAL OVERLAY ---- */
|
|
967
|
+
.terminal-overlay {
|
|
968
|
+
position: absolute;
|
|
969
|
+
bottom: 76px;
|
|
970
|
+
right: 24px;
|
|
971
|
+
width: 500px;
|
|
972
|
+
height: 280px;
|
|
973
|
+
background: #1a1a2e;
|
|
974
|
+
border: 1px solid #3f3f56;
|
|
975
|
+
border-radius: 14px;
|
|
976
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
|
|
977
|
+
display: flex;
|
|
978
|
+
flex-direction: column;
|
|
979
|
+
overflow: hidden;
|
|
980
|
+
z-index: 100;
|
|
981
|
+
animation: overlayIn 0.25s ease;
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
.terminal-overlay.overlay-hidden { display: none; }
|
|
985
|
+
|
|
986
|
+
@keyframes overlayIn {
|
|
987
|
+
from { opacity: 0; transform: translateY(12px) scale(0.97); }
|
|
988
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
.terminal-overlay-header {
|
|
992
|
+
display: flex;
|
|
993
|
+
align-items: center;
|
|
994
|
+
justify-content: space-between;
|
|
995
|
+
padding: 8px 14px;
|
|
996
|
+
background: #12121f;
|
|
997
|
+
border-bottom: 1px solid #2a2a3e;
|
|
998
|
+
}
|
|
999
|
+
|
|
1000
|
+
.terminal-overlay-title {
|
|
1001
|
+
font-size: 11px;
|
|
1002
|
+
color: #6b7280;
|
|
1003
|
+
font-weight: 500;
|
|
1004
|
+
display: flex;
|
|
1005
|
+
align-items: center;
|
|
1006
|
+
gap: 8px;
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
.live-badge {
|
|
1010
|
+
font-size: 9px;
|
|
1011
|
+
padding: 2px 7px;
|
|
1012
|
+
border-radius: 100px;
|
|
1013
|
+
background: rgba(34,197,94,0.15);
|
|
1014
|
+
color: #22c55e;
|
|
1015
|
+
font-weight: 700;
|
|
1016
|
+
}
|
|
1017
|
+
|
|
1018
|
+
.terminal-close {
|
|
1019
|
+
background: none;
|
|
1020
|
+
border: 1px solid #2a2a3e;
|
|
1021
|
+
color: #6b7280;
|
|
1022
|
+
width: 22px;
|
|
1023
|
+
height: 22px;
|
|
1024
|
+
border-radius: 5px;
|
|
1025
|
+
cursor: pointer;
|
|
1026
|
+
font-size: 11px;
|
|
1027
|
+
display: flex;
|
|
1028
|
+
align-items: center;
|
|
1029
|
+
justify-content: center;
|
|
1030
|
+
transition: all 0.15s;
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
.terminal-close:hover {
|
|
1034
|
+
background: #2a2a3e;
|
|
1035
|
+
color: #fff;
|
|
1036
|
+
}
|
|
1037
|
+
|
|
1038
|
+
.terminal-overlay-body {
|
|
1039
|
+
flex: 1;
|
|
1040
|
+
padding: 12px 14px;
|
|
1041
|
+
font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
|
|
1042
|
+
font-size: 11px;
|
|
1043
|
+
line-height: 1.8;
|
|
1044
|
+
color: #a1a1aa;
|
|
1045
|
+
overflow-y: auto;
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
.t-cmd { color: #d4d4d8; }
|
|
1049
|
+
.t-ok { color: #4ade80; }
|
|
1050
|
+
.t-dim { color: #3f3f56; }
|
|
1051
|
+
.t-prompt { color: #22c55e; }
|
|
1052
|
+
.t-cursor {
|
|
1053
|
+
display: inline-block;
|
|
1054
|
+
width: 7px;
|
|
1055
|
+
height: 13px;
|
|
1056
|
+
background: #22c55e;
|
|
1057
|
+
animation: cursorBlink 1s step-end infinite;
|
|
1058
|
+
vertical-align: text-bottom;
|
|
1059
|
+
margin-left: 2px;
|
|
1060
|
+
}
|
|
1061
|
+
|
|
1062
|
+
@keyframes cursorBlink {
|
|
1063
|
+
0%, 100% { opacity: 1; }
|
|
1064
|
+
50% { opacity: 0; }
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
/* ---- RIGHT: OUTPUT PANEL ---- */
|
|
1068
|
+
.output-panel {
|
|
1069
|
+
width: 380px;
|
|
1070
|
+
background: #fff;
|
|
1071
|
+
border-left: 1px solid #e2e8f0;
|
|
1072
|
+
display: flex;
|
|
1073
|
+
flex-direction: column;
|
|
1074
|
+
flex-shrink: 0;
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1077
|
+
.output-header {
|
|
1078
|
+
padding: 12px 20px;
|
|
1079
|
+
border-bottom: 1px solid #e2e8f0;
|
|
1080
|
+
display: flex;
|
|
1081
|
+
align-items: center;
|
|
1082
|
+
justify-content: space-between;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
.output-label {
|
|
1086
|
+
font-size: 10px;
|
|
1087
|
+
text-transform: uppercase;
|
|
1088
|
+
letter-spacing: 1px;
|
|
1089
|
+
color: #94a3b8;
|
|
1090
|
+
font-weight: 700;
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
.output-filename {
|
|
1094
|
+
font-size: 13px;
|
|
1095
|
+
font-weight: 700;
|
|
1096
|
+
color: #1a2233;
|
|
1097
|
+
margin-top: 2px;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
.output-actions {
|
|
1101
|
+
display: flex;
|
|
1102
|
+
gap: 6px;
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
.action-btn {
|
|
1106
|
+
padding: 5px 12px;
|
|
1107
|
+
border: 1px solid #e2e8f0;
|
|
1108
|
+
border-radius: 8px;
|
|
1109
|
+
background: #fff;
|
|
1110
|
+
cursor: pointer;
|
|
1111
|
+
font-size: 11px;
|
|
1112
|
+
font-family: inherit;
|
|
1113
|
+
color: #64748b;
|
|
1114
|
+
font-weight: 600;
|
|
1115
|
+
transition: all 0.15s;
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
.action-btn:hover {
|
|
1119
|
+
border-color: #c7d2fe;
|
|
1120
|
+
color: #4338ca;
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
.action-btn-primary {
|
|
1124
|
+
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
1125
|
+
border-color: transparent;
|
|
1126
|
+
color: #fff;
|
|
1127
|
+
}
|
|
1128
|
+
|
|
1129
|
+
.action-btn-primary:hover {
|
|
1130
|
+
box-shadow: 0 2px 8px rgba(99,102,241,0.3);
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
/* Output content */
|
|
1134
|
+
.output-content {
|
|
1135
|
+
flex: 1;
|
|
1136
|
+
overflow-y: auto;
|
|
1137
|
+
padding: 20px;
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
.output-content h2 {
|
|
1141
|
+
font-size: 16px;
|
|
1142
|
+
font-weight: 700;
|
|
1143
|
+
color: #1a2233;
|
|
1144
|
+
margin: 20px 0 8px;
|
|
1145
|
+
padding-bottom: 6px;
|
|
1146
|
+
border-bottom: 1px solid #f1f5f9;
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
.output-content h2:first-child { margin-top: 0; }
|
|
1150
|
+
|
|
1151
|
+
.output-content p {
|
|
1152
|
+
font-size: 13px;
|
|
1153
|
+
line-height: 1.7;
|
|
1154
|
+
color: #475569;
|
|
1155
|
+
margin-bottom: 10px;
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
.output-content ul {
|
|
1159
|
+
margin: 6px 0 14px 0;
|
|
1160
|
+
padding-left: 20px;
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
.output-content li {
|
|
1164
|
+
font-size: 13px;
|
|
1165
|
+
line-height: 1.7;
|
|
1166
|
+
color: #475569;
|
|
1167
|
+
margin-bottom: 4px;
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
.output-content strong {
|
|
1171
|
+
color: #1a2233;
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
.output-meta {
|
|
1175
|
+
display: flex;
|
|
1176
|
+
gap: 12px;
|
|
1177
|
+
padding: 8px 0 14px;
|
|
1178
|
+
border-bottom: 1px solid #f1f5f9;
|
|
1179
|
+
margin-bottom: 16px;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
.meta-chip {
|
|
1183
|
+
font-size: 11px;
|
|
1184
|
+
padding: 3px 10px;
|
|
1185
|
+
border-radius: 100px;
|
|
1186
|
+
background: #f1f5f9;
|
|
1187
|
+
color: #64748b;
|
|
1188
|
+
font-weight: 500;
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
.output-saved {
|
|
1192
|
+
display: flex;
|
|
1193
|
+
align-items: center;
|
|
1194
|
+
gap: 6px;
|
|
1195
|
+
margin-top: 20px;
|
|
1196
|
+
padding: 10px 14px;
|
|
1197
|
+
background: #f0fdf4;
|
|
1198
|
+
border: 1px solid #bbf7d0;
|
|
1199
|
+
border-radius: 10px;
|
|
1200
|
+
font-size: 12px;
|
|
1201
|
+
color: #166534;
|
|
1202
|
+
font-weight: 500;
|
|
1203
|
+
}
|
|
1204
|
+
</style>
|
|
1205
|
+
</head>
|
|
1206
|
+
<body>
|
|
1207
|
+
<!-- TOP BAR -->
|
|
1208
|
+
<div class="topbar">
|
|
1209
|
+
<div class="topbar-left">
|
|
1210
|
+
<div class="topbar-logo">C</div>
|
|
1211
|
+
<span class="topbar-path">~/Documents/client-project</span>
|
|
1212
|
+
</div>
|
|
1213
|
+
<div class="topbar-right">
|
|
1214
|
+
<div class="mode-toggle">
|
|
1215
|
+
<button class="mode-btn">🔨 Build</button>
|
|
1216
|
+
<button class="mode-btn active-doc">📄 Documents</button>
|
|
1217
|
+
</div>
|
|
1218
|
+
<span class="topbar-status">● Connected</span>
|
|
1219
|
+
<span class="topbar-link">Switch</span>
|
|
1220
|
+
</div>
|
|
1221
|
+
</div>
|
|
1222
|
+
|
|
1223
|
+
<div class="main">
|
|
1224
|
+
<!-- LEFT SIDEBAR -->
|
|
1225
|
+
<div class="sidebar">
|
|
1226
|
+
|
|
1227
|
+
<!-- Step 1: Folder (done) -->
|
|
1228
|
+
<div class="sidebar-section">
|
|
1229
|
+
<div class="step-header">
|
|
1230
|
+
<div class="step-number done">✓</div>
|
|
1231
|
+
<span class="step-title">Your documents</span>
|
|
1232
|
+
<span class="folder-badge" style="margin-left: auto;">24 files</span>
|
|
1233
|
+
</div>
|
|
1234
|
+
<div class="folder-display">
|
|
1235
|
+
<span class="folder-icon">📁</span>
|
|
1236
|
+
<div class="folder-info">
|
|
1237
|
+
<div class="folder-path">~/Documents/Q4-reports</div>
|
|
1238
|
+
<div class="folder-meta">12 PDF, 8 DOCX, 4 XLSX</div>
|
|
1239
|
+
</div>
|
|
1240
|
+
<button class="change-btn">Change</button>
|
|
1241
|
+
</div>
|
|
1242
|
+
<div class="file-types">
|
|
1243
|
+
<span class="type-chip type-pdf">12 PDF</span>
|
|
1244
|
+
<span class="type-chip type-docx">8 DOCX</span>
|
|
1245
|
+
<span class="type-chip type-xlsx">4 XLSX</span>
|
|
1246
|
+
</div>
|
|
1247
|
+
</div>
|
|
1248
|
+
|
|
1249
|
+
<!-- Step 2: Outcome (selected) -->
|
|
1250
|
+
<div class="sidebar-section">
|
|
1251
|
+
<div class="step-header">
|
|
1252
|
+
<div class="step-number done">✓</div>
|
|
1253
|
+
<span class="step-title">What do you need?</span>
|
|
1254
|
+
</div>
|
|
1255
|
+
<div class="outcome-grid">
|
|
1256
|
+
<button class="outcome-card selected">
|
|
1257
|
+
<span class="outcome-emoji">📝</span>
|
|
1258
|
+
<div class="outcome-name">Summarize</div>
|
|
1259
|
+
<div class="outcome-desc">Key points & themes</div>
|
|
1260
|
+
</button>
|
|
1261
|
+
<button class="outcome-card">
|
|
1262
|
+
<span class="outcome-emoji">🔍</span>
|
|
1263
|
+
<div class="outcome-name">Extract</div>
|
|
1264
|
+
<div class="outcome-desc">Action items & data</div>
|
|
1265
|
+
</button>
|
|
1266
|
+
<button class="outcome-card">
|
|
1267
|
+
<span class="outcome-emoji">📊</span>
|
|
1268
|
+
<div class="outcome-name">Report</div>
|
|
1269
|
+
<div class="outcome-desc">For an audience</div>
|
|
1270
|
+
</button>
|
|
1271
|
+
<button class="outcome-card">
|
|
1272
|
+
<span class="outcome-emoji">⚖️</span>
|
|
1273
|
+
<div class="outcome-name">Compare</div>
|
|
1274
|
+
<div class="outcome-desc">Find differences</div>
|
|
1275
|
+
</button>
|
|
1276
|
+
<button class="outcome-card">
|
|
1277
|
+
<span class="outcome-emoji">📋</span>
|
|
1278
|
+
<div class="outcome-name">Draft</div>
|
|
1279
|
+
<div class="outcome-desc">New doc from sources</div>
|
|
1280
|
+
</button>
|
|
1281
|
+
<button class="outcome-card">
|
|
1282
|
+
<span class="outcome-emoji">📈</span>
|
|
1283
|
+
<div class="outcome-name">Analyse</div>
|
|
1284
|
+
<div class="outcome-desc">Trends & patterns</div>
|
|
1285
|
+
</button>
|
|
1286
|
+
<button class="outcome-card">
|
|
1287
|
+
<span class="outcome-emoji">🔄</span>
|
|
1288
|
+
<div class="outcome-name">Transform</div>
|
|
1289
|
+
<div class="outcome-desc">Change format</div>
|
|
1290
|
+
</button>
|
|
1291
|
+
<button class="outcome-card">
|
|
1292
|
+
<span class="outcome-emoji">✅</span>
|
|
1293
|
+
<div class="outcome-name">Review</div>
|
|
1294
|
+
<div class="outcome-desc">Audit & compliance</div>
|
|
1295
|
+
</button>
|
|
1296
|
+
<button class="more-btn">+ 4 more options</button>
|
|
1297
|
+
</div>
|
|
1298
|
+
<div class="freeform-divider"><span>or describe it</span></div>
|
|
1299
|
+
<textarea class="freeform-input" placeholder="e.g., Find all budget overruns..."></textarea>
|
|
1300
|
+
</div>
|
|
1301
|
+
|
|
1302
|
+
<!-- Step 2b: Style Reference (new) -->
|
|
1303
|
+
<div class="sidebar-section">
|
|
1304
|
+
<div class="step-header">
|
|
1305
|
+
<div class="step-number">✦</div>
|
|
1306
|
+
<span class="step-title">Show Claude an example</span>
|
|
1307
|
+
<span class="optional-tag">optional</span>
|
|
1308
|
+
</div>
|
|
1309
|
+
|
|
1310
|
+
<!-- Attached examples -->
|
|
1311
|
+
<div class="example-card">
|
|
1312
|
+
<div class="example-card-icon type-pdf-icon">📄</div>
|
|
1313
|
+
<div class="example-card-info">
|
|
1314
|
+
<div class="example-card-name">Q3-board-summary.pdf</div>
|
|
1315
|
+
<div class="example-card-snippet">Executive Summary — Q3 showed strong growth driven by...</div>
|
|
1316
|
+
</div>
|
|
1317
|
+
<button class="example-card-remove">✕</button>
|
|
1318
|
+
</div>
|
|
1319
|
+
|
|
1320
|
+
<!-- Drop zone for more -->
|
|
1321
|
+
<div class="dropzone">
|
|
1322
|
+
<input type="file" class="dropzone-input" multiple accept=".pdf,.docx,.doc,.md,.txt">
|
|
1323
|
+
<div class="dropzone-icon">📎</div>
|
|
1324
|
+
<div class="dropzone-text">
|
|
1325
|
+
<strong>Drop a document</strong> to use as a style reference
|
|
1326
|
+
</div>
|
|
1327
|
+
<div class="dropzone-hint">PDF, DOCX, MD, TXT — up to 3 examples</div>
|
|
1328
|
+
</div>
|
|
1329
|
+
<div class="example-counter">1 of 3 examples attached</div>
|
|
1330
|
+
|
|
1331
|
+
<!-- Saved templates -->
|
|
1332
|
+
<div class="saved-divider"><span>or use a saved style</span></div>
|
|
1333
|
+
<div class="saved-templates">
|
|
1334
|
+
<button class="saved-chip active">
|
|
1335
|
+
<span class="saved-chip-icon">⭐</span> Board report style
|
|
1336
|
+
</button>
|
|
1337
|
+
<button class="saved-chip">
|
|
1338
|
+
<span class="saved-chip-icon">📋</span> Weekly standup
|
|
1339
|
+
</button>
|
|
1340
|
+
<button class="saved-chip">
|
|
1341
|
+
<span class="saved-chip-icon">📊</span> Client brief
|
|
1342
|
+
</button>
|
|
1343
|
+
</div>
|
|
1344
|
+
|
|
1345
|
+
<div class="style-match-note">
|
|
1346
|
+
✨ Claude will match the tone, structure, and formatting of your example
|
|
1347
|
+
</div>
|
|
1348
|
+
</div>
|
|
1349
|
+
|
|
1350
|
+
<!-- Step 3: Context + Go -->
|
|
1351
|
+
<div class="sidebar-section" style="border-bottom: none;">
|
|
1352
|
+
<div class="step-header">
|
|
1353
|
+
<div class="step-number">3</div>
|
|
1354
|
+
<span class="step-title">Anything else?</span>
|
|
1355
|
+
<span class="optional-tag">optional</span>
|
|
1356
|
+
</div>
|
|
1357
|
+
<textarea class="context-input" placeholder="e.g., Focus on financial data, keep it under 2 pages, the audience is the board..."></textarea>
|
|
1358
|
+
<button class="go-btn">
|
|
1359
|
+
✨ Go — Summarize 24 documents
|
|
1360
|
+
</button>
|
|
1361
|
+
<div class="go-hint">Claude will scan your files and create the output</div>
|
|
1362
|
+
</div>
|
|
1363
|
+
</div>
|
|
1364
|
+
|
|
1365
|
+
<!-- CENTER: CHAT -->
|
|
1366
|
+
<div class="center">
|
|
1367
|
+
<div class="chat-header">
|
|
1368
|
+
<div class="chat-header-left">
|
|
1369
|
+
<div class="avatar avatar-claude">🤖</div>
|
|
1370
|
+
<div>
|
|
1371
|
+
<div class="chat-name">Claude</div>
|
|
1372
|
+
<div class="chat-status"><span class="status-dot"></span> Scanning your documents</div>
|
|
1373
|
+
</div>
|
|
1374
|
+
</div>
|
|
1375
|
+
<button class="hood-btn" id="hoodBtn" onclick="toggleTerminal()">
|
|
1376
|
+
<span class="hood-pulse"></span>
|
|
1377
|
+
See what Claude is doing
|
|
1378
|
+
</button>
|
|
1379
|
+
</div>
|
|
1380
|
+
|
|
1381
|
+
<div class="messages">
|
|
1382
|
+
<!-- System-generated message showing what was sent -->
|
|
1383
|
+
<div class="message message-user">
|
|
1384
|
+
<div class="message-bubble">
|
|
1385
|
+
Summarize all 24 documents in ~/Documents/Q4-reports. Focus on financial data.
|
|
1386
|
+
</div>
|
|
1387
|
+
</div>
|
|
1388
|
+
|
|
1389
|
+
<!-- Claude working -->
|
|
1390
|
+
<div class="message message-claude">
|
|
1391
|
+
<div class="message-sender">
|
|
1392
|
+
<span class="avatar avatar-claude avatar-sm">🤖</span>
|
|
1393
|
+
Claude
|
|
1394
|
+
</div>
|
|
1395
|
+
<div class="message-bubble">
|
|
1396
|
+
I'll scan all 24 documents and create a comprehensive summary focused on the financial data. Here's my progress:
|
|
1397
|
+
|
|
1398
|
+
<div class="steps">
|
|
1399
|
+
<div class="step step-done">
|
|
1400
|
+
<span class="step-icon">✓</span>
|
|
1401
|
+
<div class="step-content">
|
|
1402
|
+
<div class="step-label">Scanned folder structure</div>
|
|
1403
|
+
<div class="step-summary">Found 24 files — 12 PDF, 8 DOCX, 4 XLSX</div>
|
|
1404
|
+
</div>
|
|
1405
|
+
</div>
|
|
1406
|
+
<div class="step step-done">
|
|
1407
|
+
<span class="step-icon">✓</span>
|
|
1408
|
+
<div class="step-content">
|
|
1409
|
+
<div class="step-label">Read financial reports</div>
|
|
1410
|
+
<div class="step-summary">Processed 18 of 24 files (6 were duplicates or non-financial)</div>
|
|
1411
|
+
</div>
|
|
1412
|
+
</div>
|
|
1413
|
+
<div class="step step-done">
|
|
1414
|
+
<span class="step-icon">✓</span>
|
|
1415
|
+
<div class="step-content">
|
|
1416
|
+
<div class="step-label">Analysed themes & figures</div>
|
|
1417
|
+
<div class="step-summary">Identified 4 key themes across the quarter</div>
|
|
1418
|
+
</div>
|
|
1419
|
+
</div>
|
|
1420
|
+
<div class="step step-done">
|
|
1421
|
+
<span class="step-icon">✓</span>
|
|
1422
|
+
<div class="step-content">
|
|
1423
|
+
<div class="step-label">Wrote summary</div>
|
|
1424
|
+
<div class="step-summary">1,842 words covering all key findings</div>
|
|
1425
|
+
</div>
|
|
1426
|
+
</div>
|
|
1427
|
+
<div class="step step-done">
|
|
1428
|
+
<span class="step-icon">✓</span>
|
|
1429
|
+
<div class="step-content">
|
|
1430
|
+
<div class="step-label">Saved output</div>
|
|
1431
|
+
<div class="step-summary">Written to Q4-reports/output/summarize-2026-03-19.md</div>
|
|
1432
|
+
</div>
|
|
1433
|
+
</div>
|
|
1434
|
+
</div>
|
|
1435
|
+
</div>
|
|
1436
|
+
</div>
|
|
1437
|
+
</div>
|
|
1438
|
+
|
|
1439
|
+
<!-- Terminal overlay -->
|
|
1440
|
+
<div class="terminal-overlay overlay-hidden" id="terminalOverlay">
|
|
1441
|
+
<div class="terminal-overlay-header">
|
|
1442
|
+
<span class="terminal-overlay-title">
|
|
1443
|
+
🔧 Under the hood
|
|
1444
|
+
<span class="live-badge">LIVE</span>
|
|
1445
|
+
</span>
|
|
1446
|
+
<button class="terminal-close" onclick="toggleTerminal()">✕</button>
|
|
1447
|
+
</div>
|
|
1448
|
+
<div class="terminal-overlay-body">
|
|
1449
|
+
<div class="t-dim">~/Documents/Q4-reports</div>
|
|
1450
|
+
<div class="t-cmd">$ claude --dangerously-skip-permissions</div>
|
|
1451
|
+
<div class="t-ok">✓ Claude Code v2.1.79</div>
|
|
1452
|
+
<div class="t-dim">────────────────────────────────</div>
|
|
1453
|
+
<div class="t-cmd">Reading Q4-revenue-analysis.pdf...</div>
|
|
1454
|
+
<div class="t-ok">✓ 32 pages, extracted financial tables</div>
|
|
1455
|
+
<div class="t-cmd">Reading board-presentation.docx...</div>
|
|
1456
|
+
<div class="t-ok">✓ 18 pages, found budget breakdown</div>
|
|
1457
|
+
<div class="t-cmd">Reading expenses-Q4.xlsx...</div>
|
|
1458
|
+
<div class="t-ok">✓ 3 sheets, 847 rows of expense data</div>
|
|
1459
|
+
<div class="t-dim">────────────────────────────────</div>
|
|
1460
|
+
<div class="t-cmd">Writing output/summarize-2026-03-19.md</div>
|
|
1461
|
+
<div class="t-ok">✓ Summary saved (1,842 words)</div>
|
|
1462
|
+
<div class="t-prompt">claude <span class="t-cursor"></span></div>
|
|
1463
|
+
</div>
|
|
1464
|
+
</div>
|
|
1465
|
+
|
|
1466
|
+
<div class="terminal-info">
|
|
1467
|
+
Claude may ask questions above — just type your answer and press Enter
|
|
1468
|
+
</div>
|
|
1469
|
+
|
|
1470
|
+
<!-- Input -->
|
|
1471
|
+
<div class="input-bar">
|
|
1472
|
+
<div class="input-row">
|
|
1473
|
+
<textarea class="input-field" placeholder="Ask a follow-up question or request changes..." rows="1"></textarea>
|
|
1474
|
+
<button class="send-btn">↑</button>
|
|
1475
|
+
</div>
|
|
1476
|
+
<div class="input-hint">You can ask Claude to adjust the summary, focus on different areas, or run a different outcome.</div>
|
|
1477
|
+
</div>
|
|
1478
|
+
</div>
|
|
1479
|
+
|
|
1480
|
+
<!-- RIGHT: OUTPUT PANEL -->
|
|
1481
|
+
<div class="output-panel">
|
|
1482
|
+
<div class="output-header">
|
|
1483
|
+
<div>
|
|
1484
|
+
<div class="output-label">Output</div>
|
|
1485
|
+
<div class="output-filename">summarize-2026-03-19.md</div>
|
|
1486
|
+
</div>
|
|
1487
|
+
<div class="output-actions">
|
|
1488
|
+
<button class="action-btn">📋 Copy</button>
|
|
1489
|
+
<button class="action-btn action-btn-primary">⬇ Download</button>
|
|
1490
|
+
</div>
|
|
1491
|
+
</div>
|
|
1492
|
+
<div class="output-content">
|
|
1493
|
+
<div class="output-meta">
|
|
1494
|
+
<span class="meta-chip">24 files scanned</span>
|
|
1495
|
+
<span class="meta-chip">1,842 words</span>
|
|
1496
|
+
<span class="meta-chip">48 seconds</span>
|
|
1497
|
+
</div>
|
|
1498
|
+
|
|
1499
|
+
<h2>Executive Summary</h2>
|
|
1500
|
+
<p>Q4 2025 showed <strong>strong revenue growth of 23% YoY</strong>, driven primarily by enterprise expansion in APAC and EMEA regions. Total revenue reached <strong>$4.2M</strong>, exceeding the forecast of $3.8M by 10.5%.</p>
|
|
1501
|
+
|
|
1502
|
+
<h2>Key Financial Highlights</h2>
|
|
1503
|
+
<ul>
|
|
1504
|
+
<li><strong>Revenue:</strong> $4.2M (↑23% YoY, ↑8% QoQ)</li>
|
|
1505
|
+
<li><strong>Operating expenses:</strong> $2.8M (↑12% YoY) — below the 15% budget ceiling</li>
|
|
1506
|
+
<li><strong>Net margin:</strong> 33.3%, up from 28.1% in Q3</li>
|
|
1507
|
+
<li><strong>Cash position:</strong> $6.1M, providing 14 months of runway at current burn</li>
|
|
1508
|
+
</ul>
|
|
1509
|
+
|
|
1510
|
+
<h2>Themes Across Documents</h2>
|
|
1511
|
+
<p><strong>1. Enterprise pipeline acceleration:</strong> 6 of the 12 PDF reports reference the new enterprise pricing tier as a growth driver. Close rates improved from 18% to 27%.</p>
|
|
1512
|
+
<p><strong>2. APAC expansion costs:</strong> The XLSX expense data shows a 34% increase in APAC operational costs, but revenue from the region grew 67% — a favorable ratio.</p>
|
|
1513
|
+
<p><strong>3. Headcount concerns:</strong> Three board presentations flag engineering hiring as a bottleneck. Current team of 42 engineers is 8 below the approved headcount of 50.</p>
|
|
1514
|
+
<p><strong>4. Compliance readiness:</strong> Two review documents highlight upcoming SOC 2 Type II requirements for Q1 2026 with an estimated $180K cost.</p>
|
|
1515
|
+
|
|
1516
|
+
<h2>Skipped Files</h2>
|
|
1517
|
+
<ul>
|
|
1518
|
+
<li><em>team-photo.png</em> — image file, not readable</li>
|
|
1519
|
+
<li><em>archive.zip</em> — compressed archive</li>
|
|
1520
|
+
</ul>
|
|
1521
|
+
|
|
1522
|
+
<div class="output-saved">
|
|
1523
|
+
✓ Saved to ~/Documents/Q4-reports/output/summarize-2026-03-19.md
|
|
1524
|
+
</div>
|
|
1525
|
+
|
|
1526
|
+
<div class="save-template-cta">
|
|
1527
|
+
<div class="save-template-cta-icon">⭐</div>
|
|
1528
|
+
<div class="save-template-cta-text">
|
|
1529
|
+
<div class="save-template-cta-title">Like this style? Save it as a template</div>
|
|
1530
|
+
<div class="save-template-cta-desc">Use this output as a reference for future summaries</div>
|
|
1531
|
+
</div>
|
|
1532
|
+
<button class="save-template-cta-btn">Save style</button>
|
|
1533
|
+
</div>
|
|
1534
|
+
</div>
|
|
1535
|
+
</div>
|
|
1536
|
+
</div>
|
|
1537
|
+
|
|
1538
|
+
<script>
|
|
1539
|
+
function toggleTerminal() {
|
|
1540
|
+
const overlay = document.getElementById('terminalOverlay');
|
|
1541
|
+
const btn = document.getElementById('hoodBtn');
|
|
1542
|
+
const isVisible = !overlay.classList.contains('overlay-hidden');
|
|
1543
|
+
if (isVisible) {
|
|
1544
|
+
overlay.classList.add('overlay-hidden');
|
|
1545
|
+
btn.classList.remove('active');
|
|
1546
|
+
} else {
|
|
1547
|
+
overlay.classList.remove('overlay-hidden');
|
|
1548
|
+
overlay.style.animation = 'none';
|
|
1549
|
+
overlay.offsetHeight;
|
|
1550
|
+
overlay.style.animation = '';
|
|
1551
|
+
btn.classList.add('active');
|
|
1552
|
+
}
|
|
1553
|
+
}
|
|
1554
|
+
</script>
|
|
1555
|
+
</body>
|
|
1556
|
+
</html>
|