@deploid/studio 2.0.5 → 2.0.6

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.
@@ -6,257 +6,473 @@
6
6
  <title>Deploid Studio</title>
7
7
  <style>
8
8
  :root {
9
- --bg: #f2f6f3;
10
- --panel: #ffffff;
11
- --line: #d4dfd8;
12
- --text: #112019;
13
- --muted: #52685d;
14
- --accent: #1ea96a;
15
- --accent-strong: #0f7f4c;
16
- --warning: #f3a62a;
17
- --error: #cf3d2e;
18
- --shadow: 0 14px 38px rgba(31, 61, 45, 0.1);
9
+ --bg: #edf1ea;
10
+ --panel: rgba(255, 252, 246, 0.94);
11
+ --panel-strong: #fff8ea;
12
+ --line: rgba(39, 54, 40, 0.12);
13
+ --text: #182119;
14
+ --muted: #5f6c61;
15
+ --accent: #146f52;
16
+ --accent-strong: #0a5a41;
17
+ --gold: #b8872f;
18
+ --danger: #b33c29;
19
+ --warning: #d48a1f;
20
+ --shadow: 0 24px 60px rgba(36, 49, 37, 0.12);
21
+ --radius: 24px;
19
22
  }
23
+
20
24
  * {
21
25
  box-sizing: border-box;
22
26
  }
27
+
23
28
  body {
24
29
  margin: 0;
25
- font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
26
- background:
27
- radial-gradient(circle at top right, rgba(31, 169, 106, 0.18), transparent 34%),
28
- radial-gradient(circle at top left, rgba(45, 123, 180, 0.12), transparent 24%),
29
- var(--bg);
30
- color: var(--text);
31
30
  min-height: 100vh;
31
+ color: var(--text);
32
+ font-family: "Avenir Next", "Segoe UI", sans-serif;
33
+ background:
34
+ radial-gradient(circle at top left, rgba(20, 111, 82, 0.18), transparent 26%),
35
+ radial-gradient(circle at 80% 10%, rgba(184, 135, 47, 0.2), transparent 22%),
36
+ linear-gradient(160deg, #eef4ec 0%, #e7ece2 52%, #f5efe4 100%);
32
37
  }
38
+
33
39
  .wrap {
34
- max-width: 1140px;
35
- margin: 32px auto 48px;
36
- padding: 0 20px;
40
+ max-width: 1380px;
41
+ margin: 0 auto;
42
+ padding: 28px 24px 40px;
37
43
  }
38
- .shell {
44
+
45
+ .hero {
39
46
  display: grid;
40
- grid-template-columns: 360px 1fr;
47
+ grid-template-columns: minmax(280px, 1.2fr) minmax(240px, 0.8fr);
41
48
  gap: 18px;
49
+ margin-bottom: 18px;
42
50
  }
43
- .card {
51
+
52
+ .panel {
44
53
  background: var(--panel);
45
54
  border: 1px solid var(--line);
46
- border-radius: 16px;
47
- padding: 18px;
55
+ border-radius: var(--radius);
48
56
  box-shadow: var(--shadow);
49
57
  }
58
+
59
+ .hero-main {
60
+ padding: 28px;
61
+ position: relative;
62
+ overflow: hidden;
63
+ }
64
+
65
+ .hero-main::after {
66
+ content: "";
67
+ position: absolute;
68
+ inset: auto -40px -60px auto;
69
+ width: 220px;
70
+ height: 220px;
71
+ border-radius: 999px;
72
+ background: radial-gradient(circle, rgba(20, 111, 82, 0.18), transparent 70%);
73
+ }
74
+
75
+ .eyebrow {
76
+ display: inline-flex;
77
+ align-items: center;
78
+ gap: 8px;
79
+ padding: 7px 12px;
80
+ border-radius: 999px;
81
+ background: rgba(20, 111, 82, 0.08);
82
+ color: var(--accent-strong);
83
+ font-size: 12px;
84
+ font-weight: 700;
85
+ letter-spacing: 0.04em;
86
+ text-transform: uppercase;
87
+ }
88
+
50
89
  h1 {
51
- margin: 0;
52
- font-size: 26px;
53
- letter-spacing: -0.02em;
90
+ margin: 14px 0 8px;
91
+ font-size: clamp(34px, 4vw, 52px);
92
+ line-height: 0.96;
93
+ letter-spacing: -0.04em;
54
94
  }
55
- h2 {
56
- margin: 0 0 8px;
57
- font-size: 18px;
95
+
96
+ .subhead {
97
+ max-width: 64ch;
98
+ color: var(--muted);
99
+ font-size: 15px;
100
+ line-height: 1.5;
58
101
  }
59
- p {
60
- margin: 0;
102
+
103
+ .hero-meta {
104
+ display: grid;
105
+ grid-template-columns: repeat(3, minmax(0, 1fr));
106
+ gap: 12px;
107
+ margin-top: 22px;
61
108
  }
62
- .hero {
63
- margin-bottom: 14px;
109
+
110
+ .meta-card {
111
+ padding: 14px 16px;
112
+ border-radius: 18px;
113
+ background: rgba(255, 255, 255, 0.66);
114
+ border: 1px solid rgba(39, 54, 40, 0.08);
64
115
  }
65
- .hero p {
116
+
117
+ .meta-label {
66
118
  color: var(--muted);
119
+ font-size: 12px;
120
+ text-transform: uppercase;
121
+ letter-spacing: 0.05em;
122
+ }
123
+
124
+ .meta-value {
67
125
  margin-top: 6px;
126
+ font-size: 22px;
127
+ font-weight: 700;
128
+ letter-spacing: -0.03em;
129
+ }
130
+
131
+ .hero-side {
132
+ display: grid;
133
+ gap: 18px;
68
134
  }
69
- .status-pill {
135
+
136
+ .status-panel,
137
+ .picker-panel {
138
+ padding: 22px;
139
+ }
140
+
141
+ .status-chip {
70
142
  display: inline-flex;
71
143
  align-items: center;
72
- gap: 6px;
73
- padding: 7px 11px;
144
+ gap: 8px;
145
+ padding: 8px 12px;
74
146
  border-radius: 999px;
75
- font-weight: 600;
76
- border: 1px solid #b7dac9;
77
- color: #165f3d;
78
- background: #ecf9f3;
79
- margin-top: 12px;
147
+ background: rgba(20, 111, 82, 0.1);
148
+ color: var(--accent-strong);
149
+ font-weight: 700;
150
+ font-size: 13px;
80
151
  }
81
- .status-pill.running {
82
- color: #754b00;
83
- border-color: #efddba;
84
- background: #fff7e7;
152
+
153
+ .status-chip.running {
154
+ background: rgba(212, 138, 31, 0.12);
155
+ color: #85540a;
85
156
  }
86
- .status-pill.error {
87
- color: #7a1f14;
88
- border-color: #efcabf;
89
- background: #ffefeb;
157
+
158
+ .status-chip.error {
159
+ background: rgba(179, 60, 41, 0.12);
160
+ color: #8f2b1c;
90
161
  }
91
- .left-col,
92
- .right-col {
93
- display: flex;
94
- flex-direction: column;
95
- gap: 14px;
162
+
163
+ .status-panel h2,
164
+ .picker-panel h2,
165
+ .section-header h2 {
166
+ margin: 12px 0 6px;
167
+ font-size: 18px;
168
+ }
169
+
170
+ .status-note,
171
+ .panel-copy {
172
+ color: var(--muted);
173
+ font-size: 14px;
174
+ line-height: 1.45;
96
175
  }
97
- .row {
176
+
177
+ .picker-row,
178
+ .action-row,
179
+ .toolbar {
98
180
  display: flex;
99
- gap: 12px;
100
- align-items: stretch;
181
+ gap: 10px;
101
182
  flex-wrap: wrap;
183
+ align-items: center;
102
184
  }
103
- .row.stack {
104
- flex-direction: column;
105
- }
106
- label {
107
- font-size: 13px;
108
- color: var(--muted);
109
- font-weight: 600;
110
- margin-bottom: 8px;
111
- display: block;
185
+
186
+ .picker-row {
187
+ margin-top: 14px;
112
188
  }
189
+
113
190
  input,
114
191
  select,
115
192
  button {
116
- border-radius: 10px;
193
+ border-radius: 14px;
117
194
  border: 1px solid var(--line);
118
- background: #ffffff;
195
+ background: rgba(255, 255, 255, 0.92);
119
196
  color: var(--text);
120
- padding: 10px 12px;
121
197
  font-size: 14px;
122
198
  }
199
+
200
+ input,
201
+ select {
202
+ padding: 12px 14px;
203
+ }
204
+
123
205
  input {
124
206
  flex: 1;
125
- min-width: 180px;
207
+ min-width: 220px;
126
208
  }
209
+
127
210
  button {
211
+ padding: 11px 14px;
128
212
  cursor: pointer;
129
- transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
213
+ transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
130
214
  }
215
+
131
216
  button:hover {
132
217
  transform: translateY(-1px);
133
218
  }
219
+
134
220
  button.primary {
135
221
  background: var(--accent);
136
- color: #ffffff;
222
+ color: #fff;
137
223
  border-color: var(--accent-strong);
138
224
  font-weight: 700;
139
225
  }
226
+
140
227
  button.primary:hover {
141
228
  background: var(--accent-strong);
142
229
  }
230
+
143
231
  button.ghost {
144
- background: #f7faf8;
232
+ background: rgba(255, 255, 255, 0.74);
145
233
  }
234
+
146
235
  button:disabled {
147
- opacity: 0.6;
236
+ opacity: 0.55;
148
237
  cursor: not-allowed;
149
238
  transform: none;
150
239
  }
151
- .commands {
152
- display: grid;
153
- grid-template-columns: 1fr;
240
+
241
+ .recents {
242
+ display: flex;
243
+ flex-wrap: wrap;
154
244
  gap: 8px;
245
+ margin-top: 12px;
155
246
  }
156
- .command {
157
- text-align: left;
158
- border-radius: 12px;
159
- padding: 12px;
160
- border: 1px solid var(--line);
161
- background: #ffffff;
247
+
248
+ .recent-pill {
249
+ padding: 8px 10px;
250
+ border-radius: 999px;
251
+ font-size: 12px;
162
252
  }
163
- .command:hover {
164
- border-color: #9ed0b8;
165
- background: #f6fcf9;
253
+
254
+ .main-grid {
255
+ display: grid;
256
+ grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.8fr);
257
+ gap: 18px;
166
258
  }
167
- .command.active {
168
- border-color: var(--accent);
169
- background: #eefaf4;
259
+
260
+ .stack {
261
+ display: grid;
262
+ gap: 18px;
170
263
  }
171
- .command-title {
264
+
265
+ .section {
266
+ padding: 22px;
267
+ }
268
+
269
+ .section-header {
172
270
  display: flex;
173
271
  justify-content: space-between;
174
- align-items: center;
272
+ align-items: end;
273
+ gap: 12px;
274
+ margin-bottom: 14px;
275
+ }
276
+
277
+ .workflow-grid {
278
+ display: grid;
279
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
280
+ gap: 12px;
281
+ }
282
+
283
+ .workflow-card {
284
+ padding: 16px;
285
+ border-radius: 20px;
286
+ border: 1px solid rgba(39, 54, 40, 0.08);
287
+ background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(247, 243, 234, 0.92));
288
+ }
289
+
290
+ .workflow-top {
291
+ display: flex;
292
+ justify-content: space-between;
293
+ gap: 12px;
294
+ align-items: start;
295
+ }
296
+
297
+ .workflow-name {
298
+ font-size: 16px;
175
299
  font-weight: 700;
176
- margin-bottom: 4px;
177
300
  }
178
- .command-tag {
179
- font-size: 11px;
180
- padding: 4px 8px;
181
- border-radius: 999px;
182
- background: #edf4f0;
183
- color: #395245;
301
+
302
+ .workflow-score {
303
+ font-size: 28px;
304
+ font-weight: 800;
305
+ letter-spacing: -0.04em;
184
306
  }
185
- .command-desc {
307
+
308
+ .workflow-state {
309
+ margin-top: 10px;
310
+ font-size: 12px;
311
+ font-weight: 700;
312
+ text-transform: uppercase;
313
+ letter-spacing: 0.06em;
314
+ }
315
+
316
+ .workflow-note {
317
+ margin-top: 8px;
318
+ min-height: 42px;
186
319
  color: var(--muted);
187
320
  font-size: 13px;
321
+ line-height: 1.4;
188
322
  }
189
- .recent {
190
- margin-top: 10px;
191
- display: flex;
192
- flex-wrap: wrap;
193
- gap: 8px;
323
+
324
+ .workflow-action {
325
+ margin-top: 14px;
326
+ width: 100%;
194
327
  }
195
- .recent button {
196
- padding: 7px 10px;
197
- font-size: 12px;
198
- background: #f3f8f5;
328
+
329
+ .list {
330
+ display: grid;
331
+ gap: 10px;
199
332
  }
200
- .log-toolbar {
333
+
334
+ .list-item {
335
+ display: grid;
336
+ gap: 6px;
337
+ padding: 14px 16px;
338
+ border-radius: 18px;
339
+ background: rgba(255, 255, 255, 0.84);
340
+ border: 1px solid rgba(39, 54, 40, 0.08);
341
+ }
342
+
343
+ .list-top {
201
344
  display: flex;
202
345
  justify-content: space-between;
203
- gap: 8px;
346
+ gap: 12px;
347
+ align-items: start;
348
+ }
349
+
350
+ .list-title {
351
+ font-weight: 700;
352
+ }
353
+
354
+ .badge {
355
+ display: inline-flex;
204
356
  align-items: center;
205
- margin-bottom: 8px;
357
+ gap: 6px;
358
+ padding: 6px 9px;
359
+ border-radius: 999px;
360
+ font-size: 11px;
361
+ font-weight: 800;
362
+ text-transform: uppercase;
363
+ letter-spacing: 0.05em;
206
364
  }
207
- .log-toolbar .row {
208
- gap: 8px;
365
+
366
+ .badge.fail {
367
+ background: rgba(179, 60, 41, 0.12);
368
+ color: var(--danger);
209
369
  }
210
- #logs {
211
- margin-top: 10px;
212
- background: #0f1a15;
213
- border: 1px solid var(--line);
214
- color: #d9fce9;
215
- border-radius: 10px;
216
- height: 470px;
217
- overflow: auto;
218
- padding: 12px;
219
- white-space: pre-wrap;
220
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
221
- font-size: 12px;
370
+
371
+ .badge.warn {
372
+ background: rgba(212, 138, 31, 0.14);
373
+ color: var(--warning);
222
374
  }
223
- .muted {
224
- color: var(--muted);
225
- font-size: 13px;
375
+
376
+ .badge.pass {
377
+ background: rgba(20, 111, 82, 0.1);
378
+ color: var(--accent-strong);
226
379
  }
227
- .hint {
228
- margin-top: 8px;
380
+
381
+ .artifact-path,
382
+ .device-line {
383
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
229
384
  font-size: 12px;
385
+ color: var(--muted);
386
+ word-break: break-all;
230
387
  }
231
- .kpi {
388
+
389
+ .quick-grid {
232
390
  display: grid;
233
- grid-template-columns: repeat(3, 1fr);
234
- gap: 8px;
235
- margin-top: 12px;
391
+ gap: 10px;
236
392
  }
237
- .kpi-item {
238
- border: 1px solid var(--line);
239
- border-radius: 12px;
240
- padding: 10px;
241
- background: #fbfdfc;
393
+
394
+ .quick-action {
395
+ padding: 16px;
396
+ border-radius: 20px;
397
+ background: linear-gradient(145deg, rgba(15, 111, 82, 0.95), rgba(10, 71, 55, 0.98));
398
+ color: #f6faf7;
399
+ border: 0;
400
+ text-align: left;
242
401
  }
243
- .kpi-label {
402
+
403
+ .quick-action small {
404
+ display: block;
405
+ margin-top: 6px;
406
+ color: rgba(246, 250, 247, 0.72);
244
407
  font-size: 12px;
408
+ }
409
+
410
+ .activity {
411
+ background: #0d1613;
412
+ color: #dff7e9;
413
+ }
414
+
415
+ #logs {
416
+ height: 320px;
417
+ overflow: auto;
418
+ padding: 16px;
419
+ border-radius: 18px;
420
+ background: rgba(255, 255, 255, 0.03);
421
+ border: 1px solid rgba(223, 247, 233, 0.1);
422
+ white-space: pre-wrap;
423
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
424
+ font-size: 12px;
425
+ }
426
+
427
+ .activity .panel-copy,
428
+ .activity .section-header h2,
429
+ .activity .status-note {
430
+ color: #dff7e9;
431
+ }
432
+
433
+ .toolbar select,
434
+ .toolbar button {
435
+ background: rgba(255, 255, 255, 0.08);
436
+ color: #effaf4;
437
+ border-color: rgba(255, 255, 255, 0.14);
438
+ }
439
+
440
+ .empty {
441
+ padding: 18px;
442
+ border-radius: 18px;
443
+ border: 1px dashed rgba(39, 54, 40, 0.16);
245
444
  color: var(--muted);
445
+ font-size: 14px;
246
446
  }
247
- .kpi-value {
248
- margin-top: 4px;
249
- font-size: 16px;
250
- font-weight: 700;
447
+
448
+ .subgrid {
449
+ display: grid;
450
+ grid-template-columns: repeat(2, minmax(0, 1fr));
451
+ gap: 18px;
251
452
  }
252
- @media (max-width: 640px) {
253
- .wrap {
254
- margin: 16px auto 24px;
255
- padding: 0 12px;
453
+
454
+ @media (max-width: 1160px) {
455
+ .hero,
456
+ .main-grid,
457
+ .subgrid {
458
+ grid-template-columns: 1fr;
256
459
  }
257
460
  }
258
- @media (max-width: 980px) {
259
- .shell {
461
+
462
+ @media (max-width: 720px) {
463
+ .wrap {
464
+ padding: 18px 14px 28px;
465
+ }
466
+
467
+ .hero-main,
468
+ .status-panel,
469
+ .picker-panel,
470
+ .section {
471
+ padding: 18px;
472
+ }
473
+
474
+ .hero-meta,
475
+ .workflow-grid {
260
476
  grid-template-columns: 1fr;
261
477
  }
262
478
  }
@@ -264,64 +480,118 @@
264
480
  </head>
265
481
  <body>
266
482
  <div class="wrap">
267
- <div class="hero">
268
- <h1>Deploid Studio</h1>
269
- <p>Build and ship your mobile app through a guided workflow, not a terminal window.</p>
270
- <div id="statusPill" class="status-pill">Ready</div>
271
- </div>
272
-
273
- <div class="shell">
274
- <div class="left-col">
275
- <div class="card">
276
- <h2>Project</h2>
277
- <p class="muted">Pick the app folder you want to work on.</p>
278
- <label for="cwd" style="margin-top: 14px;">Project folder</label>
279
- <div class="row">
483
+ <section class="hero">
484
+ <div class="panel hero-main">
485
+ <div class="eyebrow">Release Control</div>
486
+ <h1 id="projectTitle">Deploid Studio</h1>
487
+ <p id="projectSubtitle" class="subhead">
488
+ Studio now starts from readiness, blockers, and release momentum instead of asking you to think in raw commands.
489
+ </p>
490
+ <div class="hero-meta">
491
+ <div class="meta-card">
492
+ <div class="meta-label">Overall Status</div>
493
+ <div id="metaStatus" class="meta-value">No project</div>
494
+ </div>
495
+ <div class="meta-card">
496
+ <div class="meta-label">Artifacts</div>
497
+ <div id="metaArtifacts" class="meta-value">0</div>
498
+ </div>
499
+ <div class="meta-card">
500
+ <div class="meta-label">Devices</div>
501
+ <div id="metaDevices" class="meta-value">0</div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <div class="hero-side">
507
+ <div class="panel status-panel">
508
+ <div id="statusPill" class="status-chip">Ready</div>
509
+ <h2 id="runStateTitle">No task running</h2>
510
+ <p id="status" class="status-note">Choose a project and Studio will pull readiness, blockers, and quick actions automatically.</p>
511
+ <div class="action-row" style="margin-top: 16px;">
512
+ <button id="run" class="primary">Run Selected Action</button>
513
+ <button id="stop" class="ghost">Stop</button>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="panel picker-panel">
518
+ <h2>Project Focus</h2>
519
+ <p class="panel-copy">Pick the folder you want to inspect and ship.</p>
520
+ <div class="picker-row">
280
521
  <input id="cwd" type="text" placeholder="Select your project folder..." />
281
522
  <button id="pick" class="ghost">Browse</button>
282
523
  </div>
283
- <div class="hint muted">Default is the folder Studio was launched from.</div>
284
- <div id="recentWrap" class="recent"></div>
524
+ <div id="recentWrap" class="recents"></div>
285
525
  </div>
526
+ </div>
527
+ </section>
286
528
 
287
- <div class="card">
288
- <h2>What do you want to do?</h2>
289
- <p class="muted">Choose a task. Studio will run the matching Deploid command.</p>
290
- <div id="commands" class="commands" style="margin-top: 12px;"></div>
291
- <input id="cmd" type="hidden" value="build" />
529
+ <section class="main-grid">
530
+ <div class="stack">
531
+ <div class="panel section">
532
+ <div class="section-header">
533
+ <div>
534
+ <h2>Workflow Board</h2>
535
+ <p class="panel-copy">Each lane shows readiness and the next meaningful action, not just a command list.</p>
536
+ </div>
537
+ </div>
538
+ <div id="workflowGrid" class="workflow-grid"></div>
292
539
  </div>
293
540
 
294
- <div class="card">
295
- <h2>Run</h2>
296
- <div class="row">
297
- <button id="run" class="primary">Run Task</button>
298
- <button id="stop" class="ghost">Stop</button>
541
+ <div class="subgrid">
542
+ <div class="panel section">
543
+ <div class="section-header">
544
+ <div>
545
+ <h2>Blockers & Warnings</h2>
546
+ <p class="panel-copy">What is actually stopping you from shipping right now.</p>
547
+ </div>
548
+ </div>
549
+ <div id="blockersList" class="list"></div>
299
550
  </div>
300
- <div class="kpi">
301
- <div class="kpi-item">
302
- <div class="kpi-label">Current task</div>
303
- <div id="kpiTask" class="kpi-value">build</div>
551
+
552
+ <div class="panel section">
553
+ <div class="section-header">
554
+ <div>
555
+ <h2>Quick Actions</h2>
556
+ <p class="panel-copy">Opinionated next moves based on the current project state.</p>
557
+ </div>
304
558
  </div>
305
- <div class="kpi-item">
306
- <div class="kpi-label">Runs this session</div>
307
- <div id="kpiRuns" class="kpi-value">0</div>
559
+ <div id="quickActions" class="quick-grid"></div>
560
+ <input id="cmd" type="hidden" value="doctor --summary" />
561
+ </div>
562
+ </div>
563
+
564
+ <div class="subgrid">
565
+ <div class="panel section">
566
+ <div class="section-header">
567
+ <div>
568
+ <h2>Artifacts</h2>
569
+ <p class="panel-copy">Latest build outputs that Studio can see in the selected project.</p>
570
+ </div>
308
571
  </div>
309
- <div class="kpi-item">
310
- <div class="kpi-label">Last result</div>
311
- <div id="kpiResult" class="kpi-value">Idle</div>
572
+ <div id="artifactsList" class="list"></div>
573
+ </div>
574
+
575
+ <div class="panel section">
576
+ <div class="section-header">
577
+ <div>
578
+ <h2>Devices & Surface</h2>
579
+ <p class="panel-copy">Connected Android targets plus packaging surface already present in the project.</p>
580
+ </div>
312
581
  </div>
582
+ <div id="devicesList" class="list"></div>
313
583
  </div>
314
584
  </div>
315
585
  </div>
316
586
 
317
- <div class="right-col">
318
- <div class="card">
319
- <div class="log-toolbar">
587
+ <div class="stack">
588
+ <div class="panel section activity">
589
+ <div class="section-header">
320
590
  <div>
321
- <h2 style="margin-bottom: 4px;">Activity</h2>
322
- <p class="muted">Live output from your selected task.</p>
591
+ <h2>Activity</h2>
592
+ <p class="panel-copy">Raw output is still here, but it’s no longer the whole product.</p>
323
593
  </div>
324
- <div class="row">
594
+ <div class="toolbar">
325
595
  <select id="logFilter">
326
596
  <option value="all">All output</option>
327
597
  <option value="stdout">Standard output</option>
@@ -333,10 +603,32 @@
333
603
  </div>
334
604
  </div>
335
605
  <div id="logs"></div>
336
- <div id="status" class="muted" style="margin-top: 10px;">Ready to run</div>
606
+ </div>
607
+
608
+ <div class="panel section">
609
+ <div class="section-header">
610
+ <div>
611
+ <h2>Session Pulse</h2>
612
+ <p class="panel-copy">A minimal run summary for the current Studio session.</p>
613
+ </div>
614
+ </div>
615
+ <div class="hero-meta">
616
+ <div class="meta-card">
617
+ <div class="meta-label">Selected Action</div>
618
+ <div id="kpiTask" class="meta-value">doctor --summary</div>
619
+ </div>
620
+ <div class="meta-card">
621
+ <div class="meta-label">Runs This Session</div>
622
+ <div id="kpiRuns" class="meta-value">0</div>
623
+ </div>
624
+ <div class="meta-card">
625
+ <div class="meta-label">Last Result</div>
626
+ <div id="kpiResult" class="meta-value">Idle</div>
627
+ </div>
628
+ </div>
337
629
  </div>
338
630
  </div>
339
- </div>
631
+ </section>
340
632
  </div>
341
633
  <script src="./renderer.js"></script>
342
634
  </body>