@deploid/studio 2.0.4 → 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,109 +6,630 @@
6
6
  <title>Deploid Studio</title>
7
7
  <style>
8
8
  :root {
9
- --bg: #0b1210;
10
- --card: #15241f;
11
- --line: #254037;
12
- --text: #e7fff3;
13
- --muted: #9ec8b6;
14
- --accent: #56d9a1;
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;
15
22
  }
23
+
24
+ * {
25
+ box-sizing: border-box;
26
+ }
27
+
16
28
  body {
17
29
  margin: 0;
18
- font-family: "Segoe UI", Arial, sans-serif;
19
- background: radial-gradient(circle at top right, #133226, var(--bg) 50%);
30
+ min-height: 100vh;
20
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%);
21
37
  }
38
+
22
39
  .wrap {
23
- max-width: 980px;
24
- margin: 24px auto;
25
- padding: 0 16px;
40
+ max-width: 1380px;
41
+ margin: 0 auto;
42
+ padding: 28px 24px 40px;
43
+ }
44
+
45
+ .hero {
46
+ display: grid;
47
+ grid-template-columns: minmax(280px, 1.2fr) minmax(240px, 0.8fr);
48
+ gap: 18px;
49
+ margin-bottom: 18px;
26
50
  }
27
- .card {
28
- background: linear-gradient(180deg, #1a2f29, var(--card));
51
+
52
+ .panel {
53
+ background: var(--panel);
29
54
  border: 1px solid var(--line);
30
- border-radius: 10px;
31
- padding: 16px;
55
+ border-radius: var(--radius);
56
+ box-shadow: var(--shadow);
32
57
  }
33
- .row {
34
- display: flex;
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
+
89
+ h1 {
90
+ margin: 14px 0 8px;
91
+ font-size: clamp(34px, 4vw, 52px);
92
+ line-height: 0.96;
93
+ letter-spacing: -0.04em;
94
+ }
95
+
96
+ .subhead {
97
+ max-width: 64ch;
98
+ color: var(--muted);
99
+ font-size: 15px;
100
+ line-height: 1.5;
101
+ }
102
+
103
+ .hero-meta {
104
+ display: grid;
105
+ grid-template-columns: repeat(3, minmax(0, 1fr));
35
106
  gap: 12px;
107
+ margin-top: 22px;
108
+ }
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);
115
+ }
116
+
117
+ .meta-label {
118
+ color: var(--muted);
119
+ font-size: 12px;
120
+ text-transform: uppercase;
121
+ letter-spacing: 0.05em;
122
+ }
123
+
124
+ .meta-value {
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;
134
+ }
135
+
136
+ .status-panel,
137
+ .picker-panel {
138
+ padding: 22px;
139
+ }
140
+
141
+ .status-chip {
142
+ display: inline-flex;
36
143
  align-items: center;
144
+ gap: 8px;
145
+ padding: 8px 12px;
146
+ border-radius: 999px;
147
+ background: rgba(20, 111, 82, 0.1);
148
+ color: var(--accent-strong);
149
+ font-weight: 700;
150
+ font-size: 13px;
151
+ }
152
+
153
+ .status-chip.running {
154
+ background: rgba(212, 138, 31, 0.12);
155
+ color: #85540a;
156
+ }
157
+
158
+ .status-chip.error {
159
+ background: rgba(179, 60, 41, 0.12);
160
+ color: #8f2b1c;
161
+ }
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;
175
+ }
176
+
177
+ .picker-row,
178
+ .action-row,
179
+ .toolbar {
180
+ display: flex;
181
+ gap: 10px;
37
182
  flex-wrap: wrap;
183
+ align-items: center;
184
+ }
185
+
186
+ .picker-row {
187
+ margin-top: 14px;
38
188
  }
39
- input, select, button {
40
- border-radius: 8px;
189
+
190
+ input,
191
+ select,
192
+ button {
193
+ border-radius: 14px;
41
194
  border: 1px solid var(--line);
42
- background: #0f1d19;
195
+ background: rgba(255, 255, 255, 0.92);
43
196
  color: var(--text);
44
- padding: 10px 12px;
197
+ font-size: 14px;
198
+ }
199
+
200
+ input,
201
+ select {
202
+ padding: 12px 14px;
45
203
  }
204
+
46
205
  input {
47
206
  flex: 1;
48
- min-width: 320px;
207
+ min-width: 220px;
49
208
  }
209
+
50
210
  button {
211
+ padding: 11px 14px;
51
212
  cursor: pointer;
213
+ transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
214
+ }
215
+
216
+ button:hover {
217
+ transform: translateY(-1px);
52
218
  }
219
+
53
220
  button.primary {
54
221
  background: var(--accent);
55
- color: #062517;
56
- border: none;
222
+ color: #fff;
223
+ border-color: var(--accent-strong);
57
224
  font-weight: 700;
58
225
  }
59
- #logs {
226
+
227
+ button.primary:hover {
228
+ background: var(--accent-strong);
229
+ }
230
+
231
+ button.ghost {
232
+ background: rgba(255, 255, 255, 0.74);
233
+ }
234
+
235
+ button:disabled {
236
+ opacity: 0.55;
237
+ cursor: not-allowed;
238
+ transform: none;
239
+ }
240
+
241
+ .recents {
242
+ display: flex;
243
+ flex-wrap: wrap;
244
+ gap: 8px;
245
+ margin-top: 12px;
246
+ }
247
+
248
+ .recent-pill {
249
+ padding: 8px 10px;
250
+ border-radius: 999px;
251
+ font-size: 12px;
252
+ }
253
+
254
+ .main-grid {
255
+ display: grid;
256
+ grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.8fr);
257
+ gap: 18px;
258
+ }
259
+
260
+ .stack {
261
+ display: grid;
262
+ gap: 18px;
263
+ }
264
+
265
+ .section {
266
+ padding: 22px;
267
+ }
268
+
269
+ .section-header {
270
+ display: flex;
271
+ justify-content: space-between;
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;
299
+ font-weight: 700;
300
+ }
301
+
302
+ .workflow-score {
303
+ font-size: 28px;
304
+ font-weight: 800;
305
+ letter-spacing: -0.04em;
306
+ }
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;
319
+ color: var(--muted);
320
+ font-size: 13px;
321
+ line-height: 1.4;
322
+ }
323
+
324
+ .workflow-action {
60
325
  margin-top: 14px;
61
- background: #07110e;
62
- border: 1px solid var(--line);
63
- border-radius: 8px;
64
- height: 430px;
326
+ width: 100%;
327
+ }
328
+
329
+ .list {
330
+ display: grid;
331
+ gap: 10px;
332
+ }
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 {
344
+ display: flex;
345
+ justify-content: space-between;
346
+ gap: 12px;
347
+ align-items: start;
348
+ }
349
+
350
+ .list-title {
351
+ font-weight: 700;
352
+ }
353
+
354
+ .badge {
355
+ display: inline-flex;
356
+ align-items: center;
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;
364
+ }
365
+
366
+ .badge.fail {
367
+ background: rgba(179, 60, 41, 0.12);
368
+ color: var(--danger);
369
+ }
370
+
371
+ .badge.warn {
372
+ background: rgba(212, 138, 31, 0.14);
373
+ color: var(--warning);
374
+ }
375
+
376
+ .badge.pass {
377
+ background: rgba(20, 111, 82, 0.1);
378
+ color: var(--accent-strong);
379
+ }
380
+
381
+ .artifact-path,
382
+ .device-line {
383
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
384
+ font-size: 12px;
385
+ color: var(--muted);
386
+ word-break: break-all;
387
+ }
388
+
389
+ .quick-grid {
390
+ display: grid;
391
+ gap: 10px;
392
+ }
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;
401
+ }
402
+
403
+ .quick-action small {
404
+ display: block;
405
+ margin-top: 6px;
406
+ color: rgba(246, 250, 247, 0.72);
407
+ font-size: 12px;
408
+ }
409
+
410
+ .activity {
411
+ background: #0d1613;
412
+ color: #dff7e9;
413
+ }
414
+
415
+ #logs {
416
+ height: 320px;
65
417
  overflow: auto;
66
- padding: 12px;
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);
67
422
  white-space: pre-wrap;
68
423
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
69
424
  font-size: 12px;
70
425
  }
71
- .muted {
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);
72
444
  color: var(--muted);
73
- font-size: 12px;
445
+ font-size: 14px;
446
+ }
447
+
448
+ .subgrid {
449
+ display: grid;
450
+ grid-template-columns: repeat(2, minmax(0, 1fr));
451
+ gap: 18px;
74
452
  }
75
- @media (max-width: 640px) {
76
- input {
77
- min-width: 100%;
453
+
454
+ @media (max-width: 1160px) {
455
+ .hero,
456
+ .main-grid,
457
+ .subgrid {
458
+ grid-template-columns: 1fr;
459
+ }
460
+ }
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 {
476
+ grid-template-columns: 1fr;
78
477
  }
79
478
  }
80
479
  </style>
81
480
  </head>
82
481
  <body>
83
482
  <div class="wrap">
84
- <div class="card">
85
- <h2>Deploid Studio</h2>
86
- <p class="muted">Run Deploid commands in a selected project folder.</p>
87
- <div class="row">
88
- <input id="cwd" type="text" placeholder="Project folder..." />
89
- <button id="pick">Choose Folder</button>
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">
521
+ <input id="cwd" type="text" placeholder="Select your project folder..." />
522
+ <button id="pick" class="ghost">Browse</button>
523
+ </div>
524
+ <div id="recentWrap" class="recents"></div>
525
+ </div>
526
+ </div>
527
+ </section>
528
+
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>
539
+ </div>
540
+
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>
550
+ </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>
558
+ </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>
571
+ </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>
581
+ </div>
582
+ <div id="devicesList" class="list"></div>
583
+ </div>
584
+ </div>
90
585
  </div>
91
- <div class="row" style="margin-top: 10px;">
92
- <select id="cmd">
93
- <option value="init">init</option>
94
- <option value="assets">assets</option>
95
- <option value="package">package</option>
96
- <option value="build">build</option>
97
- <option value="deploy">deploy</option>
98
- <option value="devices">devices</option>
99
- <option value="logs">logs</option>
100
- <option value="uninstall">uninstall</option>
101
- <option value="debug">debug</option>
102
- <option value="ios">ios</option>
103
- <option value="ios:handbook">ios:handbook</option>
104
- </select>
105
- <button id="run" class="primary">Run Command</button>
106
- <button id="stop">Stop</button>
586
+
587
+ <div class="stack">
588
+ <div class="panel section activity">
589
+ <div class="section-header">
590
+ <div>
591
+ <h2>Activity</h2>
592
+ <p class="panel-copy">Raw output is still here, but it’s no longer the whole product.</p>
593
+ </div>
594
+ <div class="toolbar">
595
+ <select id="logFilter">
596
+ <option value="all">All output</option>
597
+ <option value="stdout">Standard output</option>
598
+ <option value="stderr">Errors only</option>
599
+ <option value="system">System messages</option>
600
+ </select>
601
+ <button id="copyLogs" class="ghost">Copy</button>
602
+ <button id="clearLogs" class="ghost">Clear</button>
603
+ </div>
604
+ </div>
605
+ <div id="logs"></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>
629
+ </div>
107
630
  </div>
108
- <div id="status" class="muted" style="margin-top: 10px;">Idle</div>
109
- <div id="logs"></div>
110
- </div>
631
+ </section>
111
632
  </div>
112
633
  <script src="./renderer.js"></script>
113
634
  </body>
114
- </html>
635
+ </html>