@firstpick/pi-package-webui 0.3.4 → 0.3.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.
- package/README.md +4 -1
- package/bin/pi-webui.mjs +360 -0
- package/package.json +1 -1
- package/public/app.js +738 -5
- package/public/index.html +52 -3
- package/public/styles.css +354 -35
- package/tests/mobile-static.test.mjs +59 -4
package/public/index.html
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
13
13
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
14
14
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
15
|
-
<link rel="stylesheet" href="/styles.css?v=
|
|
15
|
+
<link rel="stylesheet" href="/styles.css?v=39" />
|
|
16
16
|
</head>
|
|
17
17
|
<body>
|
|
18
18
|
<button id="sidePanelExpandButton" class="side-panel-expand-button" type="button" aria-controls="sidePanel" aria-expanded="false" aria-label="Expand side panel" title="Expand side panel">
|
|
@@ -45,6 +45,19 @@
|
|
|
45
45
|
</div>
|
|
46
46
|
</section>
|
|
47
47
|
|
|
48
|
+
<section id="updateNotification" class="update-notification" aria-live="polite" hidden>
|
|
49
|
+
<div class="update-notification-card" role="status">
|
|
50
|
+
<span class="update-notification-kicker">Update available</span>
|
|
51
|
+
<h2 id="updateNotificationTitle">Pi update available</h2>
|
|
52
|
+
<p id="updateNotificationMessage">A newer Pi version is available.</p>
|
|
53
|
+
<p id="updateNotificationDetail" class="update-notification-detail muted"></p>
|
|
54
|
+
<div class="update-notification-actions">
|
|
55
|
+
<button id="updateNotificationUpdateButton" class="primary" type="button">Update & restart</button>
|
|
56
|
+
<button id="updateNotificationDismissButton" type="button">Later</button>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</section>
|
|
60
|
+
|
|
48
61
|
<main class="layout">
|
|
49
62
|
<section class="chat-panel">
|
|
50
63
|
<header class="terminal-tabs-shell">
|
|
@@ -84,7 +97,30 @@
|
|
|
84
97
|
<div id="gitWorkflowActions" class="git-workflow-actions"></div>
|
|
85
98
|
</section>
|
|
86
99
|
<form id="composer" class="composer">
|
|
100
|
+
<div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command and path suggestions" hidden></div>
|
|
87
101
|
<div class="composer-input-row">
|
|
102
|
+
<div class="composer-context-tags">
|
|
103
|
+
<button
|
|
104
|
+
id="busyPromptBehaviorTag"
|
|
105
|
+
class="composer-busy-mode-tag"
|
|
106
|
+
type="button"
|
|
107
|
+
aria-haspopup="menu"
|
|
108
|
+
aria-expanded="false"
|
|
109
|
+
aria-controls="busyPromptBehaviorMenu"
|
|
110
|
+
aria-live="polite"
|
|
111
|
+
>Follow-up</button>
|
|
112
|
+
<div id="sessionSkillTags" class="composer-skill-tags" aria-live="polite" hidden></div>
|
|
113
|
+
</div>
|
|
114
|
+
<div id="busyPromptBehaviorMenu" class="composer-busy-mode-menu" role="menu" aria-labelledby="busyPromptBehaviorTag" hidden>
|
|
115
|
+
<button class="composer-busy-mode-menu-item" type="button" role="menuitemradio" data-busy-prompt-behavior="followUp" aria-checked="true">
|
|
116
|
+
<span class="composer-busy-mode-menu-label">Follow-up</span>
|
|
117
|
+
<span class="composer-busy-mode-menu-description">Queue as the next prompt after this run.</span>
|
|
118
|
+
</button>
|
|
119
|
+
<button class="composer-busy-mode-menu-item" type="button" role="menuitemradio" data-busy-prompt-behavior="steer" aria-checked="false">
|
|
120
|
+
<span class="composer-busy-mode-menu-label">Steer</span>
|
|
121
|
+
<span class="composer-busy-mode-menu-description">Guide the active run immediately.</span>
|
|
122
|
+
</button>
|
|
123
|
+
</div>
|
|
88
124
|
<textarea id="promptInput" rows="1" enterkeyhint="enter" placeholder="Ask Pi…" autofocus></textarea>
|
|
89
125
|
<button
|
|
90
126
|
id="attachButton"
|
|
@@ -96,7 +132,6 @@
|
|
|
96
132
|
><svg class="composer-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.82-2.82l8.48-8.49" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
|
97
133
|
<input id="attachmentInput" class="attachment-input" type="file" multiple accept="image/*,video/*,audio/*,text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/json,application/xml,.md,.markdown,.csv,.ts,.tsx,.js,.jsx,.mjs,.cjs,.py,.rs,.go,.java,.c,.cpp,.h,.hpp,.sh,.bash,.zsh,.fish,.yaml,.yml,.toml,.ini,.log" />
|
|
98
134
|
</div>
|
|
99
|
-
<div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command and path suggestions" hidden></div>
|
|
100
135
|
<div id="attachmentTray" class="attachment-tray" aria-live="polite" hidden></div>
|
|
101
136
|
<div class="composer-row">
|
|
102
137
|
<button id="composerActionsButton" class="composer-actions-button" type="button" aria-controls="composerActionsPanel" aria-expanded="false" title="Open session, workflow, and follow-up actions">Actions</button>
|
|
@@ -326,6 +361,7 @@
|
|
|
326
361
|
<select id="serverActionSelect" title="Server action" aria-label="Server action">
|
|
327
362
|
<option value="" selected>Choose action…</option>
|
|
328
363
|
<option value="restart">Restart Server</option>
|
|
364
|
+
<option value="update">Update Pi & Restart</option>
|
|
329
365
|
<option value="stop">Stop Server</option>
|
|
330
366
|
</select>
|
|
331
367
|
<button id="runServerActionButton" type="button" disabled>Run</button>
|
|
@@ -508,6 +544,19 @@
|
|
|
508
544
|
</form>
|
|
509
545
|
</dialog>
|
|
510
546
|
|
|
547
|
+
<dialog id="skillEditorDialog" class="extension-dialog skill-editor-dialog">
|
|
548
|
+
<form method="dialog">
|
|
549
|
+
<h2 id="skillEditorTitle">Edit skill</h2>
|
|
550
|
+
<p id="skillEditorMeta" class="skill-editor-meta muted"></p>
|
|
551
|
+
<textarea id="skillEditorText" class="dialog-editor skill-editor-text" spellcheck="false" aria-label="Skill file contents"></textarea>
|
|
552
|
+
<p id="skillEditorStatus" class="skill-editor-status muted" role="status" aria-live="polite" hidden></p>
|
|
553
|
+
<menu>
|
|
554
|
+
<button id="skillEditorCancelButton" type="button">Cancel</button>
|
|
555
|
+
<button id="skillEditorSaveButton" class="primary" type="button">Save skill</button>
|
|
556
|
+
</menu>
|
|
557
|
+
</form>
|
|
558
|
+
</dialog>
|
|
559
|
+
|
|
511
560
|
<dialog id="promptListDialog" class="extension-dialog prompt-list-dialog">
|
|
512
561
|
<form method="dialog">
|
|
513
562
|
<h2 id="promptListDialogTitle">Create prompt list</h2>
|
|
@@ -549,6 +598,6 @@
|
|
|
549
598
|
</form>
|
|
550
599
|
</dialog>
|
|
551
600
|
|
|
552
|
-
<script type="module" src="/app.js?v=
|
|
601
|
+
<script type="module" src="/app.js?v=38"></script>
|
|
553
602
|
</body>
|
|
554
603
|
</html>
|
package/public/styles.css
CHANGED
|
@@ -434,6 +434,79 @@ body.server-restarting .layout {
|
|
|
434
434
|
@keyframes server-restart-spin {
|
|
435
435
|
to { transform: rotate(360deg); }
|
|
436
436
|
}
|
|
437
|
+
.update-notification[hidden] {
|
|
438
|
+
display: none !important;
|
|
439
|
+
}
|
|
440
|
+
.update-notification {
|
|
441
|
+
position: fixed;
|
|
442
|
+
top: calc(env(safe-area-inset-top, 0px) + 1rem);
|
|
443
|
+
right: calc(env(safe-area-inset-right, 0px) + 1rem);
|
|
444
|
+
z-index: 64;
|
|
445
|
+
width: min(28rem, calc(100vw - 2rem));
|
|
446
|
+
opacity: 0;
|
|
447
|
+
transform: translateY(-1.6rem);
|
|
448
|
+
pointer-events: none;
|
|
449
|
+
transition: opacity 320ms ease, transform 1050ms cubic-bezier(0.18, 0.92, 0.24, 1);
|
|
450
|
+
}
|
|
451
|
+
.update-notification.show {
|
|
452
|
+
opacity: 1;
|
|
453
|
+
transform: translateY(0);
|
|
454
|
+
pointer-events: auto;
|
|
455
|
+
animation: update-notification-slide-down 1100ms cubic-bezier(0.18, 0.92, 0.24, 1);
|
|
456
|
+
}
|
|
457
|
+
.update-notification-card {
|
|
458
|
+
position: relative;
|
|
459
|
+
overflow: hidden;
|
|
460
|
+
padding: 1rem;
|
|
461
|
+
border: 1px solid rgba(166, 227, 161, 0.42);
|
|
462
|
+
border-radius: 1rem;
|
|
463
|
+
background:
|
|
464
|
+
radial-gradient(circle at 100% 0, rgba(166, 227, 161, 0.18), transparent 13rem),
|
|
465
|
+
linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.96), rgba(var(--ctp-crust-rgb), 0.98));
|
|
466
|
+
box-shadow: 0 1.1rem 3.2rem rgba(var(--ctp-crust-rgb), 0.72), 0 0 1.8rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.08);
|
|
467
|
+
backdrop-filter: blur(18px) saturate(145%);
|
|
468
|
+
}
|
|
469
|
+
.update-notification-card::before {
|
|
470
|
+
content: "";
|
|
471
|
+
position: absolute;
|
|
472
|
+
inset: 0 0 auto;
|
|
473
|
+
height: 2px;
|
|
474
|
+
background: linear-gradient(90deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
|
|
475
|
+
box-shadow: 0 0 1rem rgba(166, 227, 161, 0.42);
|
|
476
|
+
}
|
|
477
|
+
.update-notification-kicker {
|
|
478
|
+
display: inline-block;
|
|
479
|
+
margin-bottom: 0.45rem;
|
|
480
|
+
color: var(--ok);
|
|
481
|
+
font-size: 0.72rem;
|
|
482
|
+
font-weight: 900;
|
|
483
|
+
letter-spacing: 0.12em;
|
|
484
|
+
text-transform: uppercase;
|
|
485
|
+
}
|
|
486
|
+
.update-notification h2 {
|
|
487
|
+
margin: 0 0 0.45rem;
|
|
488
|
+
font-size: 1.1rem;
|
|
489
|
+
}
|
|
490
|
+
.update-notification p {
|
|
491
|
+
margin: 0 0 0.65rem;
|
|
492
|
+
color: rgba(var(--ctp-text-rgb), 0.88);
|
|
493
|
+
line-height: 1.45;
|
|
494
|
+
}
|
|
495
|
+
.update-notification-detail {
|
|
496
|
+
font-size: 0.86rem;
|
|
497
|
+
}
|
|
498
|
+
.update-notification-actions {
|
|
499
|
+
display: flex;
|
|
500
|
+
flex-wrap: wrap;
|
|
501
|
+
gap: 0.55rem;
|
|
502
|
+
justify-content: flex-end;
|
|
503
|
+
margin-top: 0.85rem;
|
|
504
|
+
}
|
|
505
|
+
@keyframes update-notification-slide-down {
|
|
506
|
+
0% { opacity: 0; transform: translateY(-2.4rem); }
|
|
507
|
+
70% { opacity: 1; transform: translateY(0.18rem); }
|
|
508
|
+
100% { opacity: 1; transform: translateY(0); }
|
|
509
|
+
}
|
|
437
510
|
.side-panel-expand-button {
|
|
438
511
|
position: fixed;
|
|
439
512
|
top: 1rem;
|
|
@@ -1362,39 +1435,39 @@ body.side-panel-collapsed .terminal-tabs-shell {
|
|
|
1362
1435
|
background: rgba(var(--ctp-subtext-rgb), 0.38);
|
|
1363
1436
|
box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 0.45rem rgba(var(--ctp-subtext-rgb), 0.10);
|
|
1364
1437
|
}
|
|
1365
|
-
.terminal-tab.activity-working .terminal-tab-activity-indicator {
|
|
1438
|
+
.terminal-tab.activity-working > .terminal-tab-button .terminal-tab-activity-indicator {
|
|
1366
1439
|
background: var(--ctp-yellow);
|
|
1367
1440
|
box-shadow: 0 0 0 1px rgba(249, 226, 175, 0.34), 0 0 0.8rem rgba(249, 226, 175, 0.52);
|
|
1368
1441
|
animation: terminal-tab-working-pulse 1.15s ease-in-out infinite;
|
|
1369
1442
|
}
|
|
1370
|
-
.terminal-tab.activity-blocked .terminal-tab-activity-indicator {
|
|
1443
|
+
.terminal-tab.activity-blocked > .terminal-tab-button .terminal-tab-activity-indicator {
|
|
1371
1444
|
background: var(--ctp-peach);
|
|
1372
1445
|
box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.38), 0 0 0.85rem rgba(250, 179, 135, 0.58);
|
|
1373
1446
|
animation: terminal-tab-working-pulse 1.35s ease-in-out infinite;
|
|
1374
1447
|
}
|
|
1375
|
-
.terminal-tab.activity-done .terminal-tab-activity-indicator {
|
|
1448
|
+
.terminal-tab.activity-done > .terminal-tab-button .terminal-tab-activity-indicator {
|
|
1376
1449
|
background: var(--ctp-green);
|
|
1377
1450
|
box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.34), 0 0 0.8rem rgba(166, 227, 161, 0.48);
|
|
1378
1451
|
}
|
|
1379
|
-
.terminal-tab.stopped .terminal-tab-activity-indicator {
|
|
1452
|
+
.terminal-tab.stopped > .terminal-tab-button .terminal-tab-activity-indicator {
|
|
1380
1453
|
background: var(--ctp-red);
|
|
1381
1454
|
box-shadow: 0 0 0 1px rgba(243, 139, 168, 0.28), 0 0 0.6rem rgba(243, 139, 168, 0.24);
|
|
1382
1455
|
}
|
|
1383
|
-
.terminal-tab-group-item.activity-working .terminal-tab-activity-indicator {
|
|
1456
|
+
.terminal-tab-group-item.activity-working > .terminal-tab-button .terminal-tab-activity-indicator {
|
|
1384
1457
|
background: var(--ctp-yellow);
|
|
1385
1458
|
box-shadow: 0 0 0 1px rgba(249, 226, 175, 0.34), 0 0 0.8rem rgba(249, 226, 175, 0.52);
|
|
1386
1459
|
animation: terminal-tab-working-pulse 1.15s ease-in-out infinite;
|
|
1387
1460
|
}
|
|
1388
|
-
.terminal-tab-group-item.activity-blocked .terminal-tab-activity-indicator {
|
|
1461
|
+
.terminal-tab-group-item.activity-blocked > .terminal-tab-button .terminal-tab-activity-indicator {
|
|
1389
1462
|
background: var(--ctp-peach);
|
|
1390
1463
|
box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.38), 0 0 0.85rem rgba(250, 179, 135, 0.58);
|
|
1391
1464
|
animation: terminal-tab-working-pulse 1.35s ease-in-out infinite;
|
|
1392
1465
|
}
|
|
1393
|
-
.terminal-tab-group-item.activity-done .terminal-tab-activity-indicator {
|
|
1466
|
+
.terminal-tab-group-item.activity-done > .terminal-tab-button .terminal-tab-activity-indicator {
|
|
1394
1467
|
background: var(--ctp-green);
|
|
1395
1468
|
box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.34), 0 0 0.8rem rgba(166, 227, 161, 0.48);
|
|
1396
1469
|
}
|
|
1397
|
-
.terminal-tab-group-item.stopped .terminal-tab-activity-indicator {
|
|
1470
|
+
.terminal-tab-group-item.stopped > .terminal-tab-button .terminal-tab-activity-indicator {
|
|
1398
1471
|
background: var(--ctp-red);
|
|
1399
1472
|
box-shadow: 0 0 0 1px rgba(243, 139, 168, 0.28), 0 0 0.6rem rgba(243, 139, 168, 0.24);
|
|
1400
1473
|
}
|
|
@@ -1426,17 +1499,17 @@ body.side-panel-collapsed .terminal-tabs-shell {
|
|
|
1426
1499
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
1427
1500
|
font-size: 0.68rem;
|
|
1428
1501
|
}
|
|
1429
|
-
.terminal-tab.active .terminal-tab-title,
|
|
1430
|
-
.terminal-tab-group-item.active .terminal-tab-title {
|
|
1502
|
+
.terminal-tab.active > .terminal-tab-button .terminal-tab-title,
|
|
1503
|
+
.terminal-tab-group-item.active > .terminal-tab-button .terminal-tab-title {
|
|
1431
1504
|
color: var(--ctp-teal);
|
|
1432
1505
|
text-shadow: 0 0 0.8rem var(--glow-teal);
|
|
1433
1506
|
}
|
|
1434
|
-
.terminal-tab.activity-working .terminal-tab-meta,
|
|
1435
|
-
.terminal-tab-group-item.activity-working .terminal-tab-meta { color: rgba(249, 226, 175, 0.82); }
|
|
1436
|
-
.terminal-tab.activity-blocked .terminal-tab-meta,
|
|
1437
|
-
.terminal-tab-group-item.activity-blocked .terminal-tab-meta { color: rgba(250, 179, 135, 0.88); }
|
|
1438
|
-
.terminal-tab.activity-done .terminal-tab-meta,
|
|
1439
|
-
.terminal-tab-group-item.activity-done .terminal-tab-meta { color: rgba(166, 227, 161, 0.82); }
|
|
1507
|
+
.terminal-tab.activity-working > .terminal-tab-button .terminal-tab-meta,
|
|
1508
|
+
.terminal-tab-group-item.activity-working > .terminal-tab-button .terminal-tab-meta { color: rgba(249, 226, 175, 0.82); }
|
|
1509
|
+
.terminal-tab.activity-blocked > .terminal-tab-button .terminal-tab-meta,
|
|
1510
|
+
.terminal-tab-group-item.activity-blocked > .terminal-tab-button .terminal-tab-meta { color: rgba(250, 179, 135, 0.88); }
|
|
1511
|
+
.terminal-tab.activity-done > .terminal-tab-button .terminal-tab-meta,
|
|
1512
|
+
.terminal-tab-group-item.activity-done > .terminal-tab-button .terminal-tab-meta { color: rgba(166, 227, 161, 0.82); }
|
|
1440
1513
|
.terminal-tab-close {
|
|
1441
1514
|
flex: 0 0 2.1rem;
|
|
1442
1515
|
color: rgba(var(--ctp-subtext-rgb), 0.72);
|
|
@@ -3329,11 +3402,182 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
3329
3402
|
opacity: 0.8;
|
|
3330
3403
|
}
|
|
3331
3404
|
.composer-input-row {
|
|
3405
|
+
position: relative;
|
|
3332
3406
|
display: grid;
|
|
3333
3407
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
3334
3408
|
gap: 0.55rem;
|
|
3335
3409
|
align-items: stretch;
|
|
3336
3410
|
}
|
|
3411
|
+
.composer-context-tags {
|
|
3412
|
+
position: absolute;
|
|
3413
|
+
top: -0.48rem;
|
|
3414
|
+
left: 0.75rem;
|
|
3415
|
+
z-index: 3;
|
|
3416
|
+
display: inline-flex;
|
|
3417
|
+
align-items: center;
|
|
3418
|
+
gap: 0.32rem;
|
|
3419
|
+
max-width: calc(100% - 4.5rem);
|
|
3420
|
+
}
|
|
3421
|
+
.composer-busy-mode-tag {
|
|
3422
|
+
position: relative;
|
|
3423
|
+
flex: 0 1 auto;
|
|
3424
|
+
display: inline-flex;
|
|
3425
|
+
align-items: center;
|
|
3426
|
+
max-width: min(12rem, 100%);
|
|
3427
|
+
overflow: hidden;
|
|
3428
|
+
min-width: 0;
|
|
3429
|
+
min-height: 0;
|
|
3430
|
+
margin: 0;
|
|
3431
|
+
padding: 0.14rem 0.52rem;
|
|
3432
|
+
border: 1px solid rgba(137, 180, 250, 0.34);
|
|
3433
|
+
border-radius: 999px;
|
|
3434
|
+
color: var(--ctp-blue);
|
|
3435
|
+
background:
|
|
3436
|
+
linear-gradient(120deg, rgba(137, 180, 250, 0.24), rgba(137, 180, 250, 0.08)),
|
|
3437
|
+
var(--ctp-crust);
|
|
3438
|
+
box-shadow: 0 0.42rem 1rem rgba(var(--ctp-crust-rgb), 0.42), 0 0 0.8rem rgba(137, 180, 250, 0.14);
|
|
3439
|
+
cursor: pointer;
|
|
3440
|
+
font-size: 0.62rem;
|
|
3441
|
+
font-weight: 900;
|
|
3442
|
+
letter-spacing: 0.08em;
|
|
3443
|
+
line-height: 1.1;
|
|
3444
|
+
text-overflow: ellipsis;
|
|
3445
|
+
text-transform: uppercase;
|
|
3446
|
+
white-space: nowrap;
|
|
3447
|
+
}
|
|
3448
|
+
.composer-busy-mode-tag:hover,
|
|
3449
|
+
.composer-busy-mode-tag:focus-visible,
|
|
3450
|
+
.composer-busy-mode-tag.menu-open {
|
|
3451
|
+
border-color: rgba(137, 180, 250, 0.62);
|
|
3452
|
+
box-shadow: 0 0.42rem 1rem rgba(var(--ctp-crust-rgb), 0.42), 0 0 1rem rgba(137, 180, 250, 0.24);
|
|
3453
|
+
transform: translateY(-1px);
|
|
3454
|
+
}
|
|
3455
|
+
.composer-busy-mode-tag.steer {
|
|
3456
|
+
color: var(--ctp-mauve);
|
|
3457
|
+
border-color: rgba(203, 166, 247, 0.38);
|
|
3458
|
+
background:
|
|
3459
|
+
linear-gradient(120deg, rgba(203, 166, 247, 0.26), rgba(203, 166, 247, 0.08)),
|
|
3460
|
+
var(--ctp-crust);
|
|
3461
|
+
box-shadow: 0 0.42rem 1rem rgba(var(--ctp-crust-rgb), 0.42), 0 0 0.8rem rgba(203, 166, 247, 0.16);
|
|
3462
|
+
}
|
|
3463
|
+
.composer-busy-mode-tag.steer:hover,
|
|
3464
|
+
.composer-busy-mode-tag.steer:focus-visible,
|
|
3465
|
+
.composer-busy-mode-tag.steer.menu-open {
|
|
3466
|
+
border-color: rgba(203, 166, 247, 0.66);
|
|
3467
|
+
box-shadow: 0 0.42rem 1rem rgba(var(--ctp-crust-rgb), 0.42), 0 0 1rem rgba(203, 166, 247, 0.26);
|
|
3468
|
+
}
|
|
3469
|
+
.composer-busy-mode-tag.follow-up {
|
|
3470
|
+
color: var(--ctp-blue);
|
|
3471
|
+
border-color: rgba(137, 180, 250, 0.38);
|
|
3472
|
+
}
|
|
3473
|
+
.composer-skill-tags {
|
|
3474
|
+
display: inline-flex;
|
|
3475
|
+
align-items: center;
|
|
3476
|
+
gap: 0.28rem;
|
|
3477
|
+
min-width: 0;
|
|
3478
|
+
overflow: hidden;
|
|
3479
|
+
}
|
|
3480
|
+
.composer-skill-tags[hidden] {
|
|
3481
|
+
display: none !important;
|
|
3482
|
+
}
|
|
3483
|
+
.composer-skill-tag {
|
|
3484
|
+
display: inline-flex;
|
|
3485
|
+
align-items: center;
|
|
3486
|
+
min-width: 0;
|
|
3487
|
+
min-height: 0;
|
|
3488
|
+
max-width: 9.4rem;
|
|
3489
|
+
overflow: hidden;
|
|
3490
|
+
padding: 0.14rem 0.44rem;
|
|
3491
|
+
border: 1px solid rgba(249, 226, 175, 0.34);
|
|
3492
|
+
border-radius: 999px;
|
|
3493
|
+
color: var(--ctp-yellow);
|
|
3494
|
+
background:
|
|
3495
|
+
linear-gradient(120deg, rgba(249, 226, 175, 0.24), rgba(166, 227, 161, 0.08)),
|
|
3496
|
+
var(--ctp-crust);
|
|
3497
|
+
box-shadow: 0 0.35rem 0.9rem rgba(var(--ctp-crust-rgb), 0.40), 0 0 0.6rem rgba(249, 226, 175, 0.14);
|
|
3498
|
+
font-size: 0.58rem;
|
|
3499
|
+
font-weight: 900;
|
|
3500
|
+
letter-spacing: 0.06em;
|
|
3501
|
+
line-height: 1.1;
|
|
3502
|
+
text-align: left;
|
|
3503
|
+
text-overflow: ellipsis;
|
|
3504
|
+
text-transform: uppercase;
|
|
3505
|
+
white-space: nowrap;
|
|
3506
|
+
}
|
|
3507
|
+
button.composer-skill-tag:hover,
|
|
3508
|
+
button.composer-skill-tag:focus-visible {
|
|
3509
|
+
border-color: rgba(148, 226, 213, 0.68);
|
|
3510
|
+
box-shadow: 0 0.35rem 0.9rem rgba(var(--ctp-crust-rgb), 0.40), 0 0 0.9rem rgba(148, 226, 213, 0.24);
|
|
3511
|
+
transform: translateY(-1px);
|
|
3512
|
+
}
|
|
3513
|
+
.composer-skill-tag.read {
|
|
3514
|
+
color: var(--ctp-teal);
|
|
3515
|
+
border-color: rgba(148, 226, 213, 0.36);
|
|
3516
|
+
}
|
|
3517
|
+
.composer-skill-tag.loaded {
|
|
3518
|
+
color: var(--ctp-green);
|
|
3519
|
+
border-color: rgba(166, 227, 161, 0.36);
|
|
3520
|
+
}
|
|
3521
|
+
.composer-skill-tag.overflow {
|
|
3522
|
+
color: var(--ctp-subtext0);
|
|
3523
|
+
border-color: rgba(166, 173, 200, 0.30);
|
|
3524
|
+
background: linear-gradient(120deg, rgba(166, 173, 200, 0.22), rgba(166, 173, 200, 0.08)), var(--ctp-crust);
|
|
3525
|
+
}
|
|
3526
|
+
.composer-busy-mode-menu {
|
|
3527
|
+
position: absolute;
|
|
3528
|
+
top: auto;
|
|
3529
|
+
bottom: calc(100% + 0.22rem);
|
|
3530
|
+
left: 0.75rem;
|
|
3531
|
+
z-index: 120;
|
|
3532
|
+
display: flex;
|
|
3533
|
+
flex-direction: column;
|
|
3534
|
+
gap: 0.34rem;
|
|
3535
|
+
width: min(18rem, calc(100% - 4.5rem));
|
|
3536
|
+
padding: 0.42rem;
|
|
3537
|
+
border: 1px solid rgba(137, 180, 250, 0.32);
|
|
3538
|
+
border-radius: 0.95rem;
|
|
3539
|
+
background: var(--ctp-crust);
|
|
3540
|
+
box-shadow: 0 0.9rem 2.2rem rgba(var(--ctp-crust-rgb), 0.72), 0 0 1rem rgba(137, 180, 250, 0.14), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
3541
|
+
}
|
|
3542
|
+
.composer-busy-mode-menu[hidden] {
|
|
3543
|
+
display: none !important;
|
|
3544
|
+
}
|
|
3545
|
+
.composer-busy-mode-menu-item {
|
|
3546
|
+
display: grid;
|
|
3547
|
+
gap: 0.1rem;
|
|
3548
|
+
width: 100%;
|
|
3549
|
+
margin: 0;
|
|
3550
|
+
padding: 0.45rem 0.58rem;
|
|
3551
|
+
border-color: rgba(137, 180, 250, 0.24);
|
|
3552
|
+
border-radius: 0.72rem;
|
|
3553
|
+
color: var(--ctp-text);
|
|
3554
|
+
background:
|
|
3555
|
+
linear-gradient(120deg, rgba(137, 180, 250, 0.08), rgba(203, 166, 247, 0.06)),
|
|
3556
|
+
var(--ctp-mantle);
|
|
3557
|
+
text-align: left;
|
|
3558
|
+
}
|
|
3559
|
+
.composer-busy-mode-menu-item:hover,
|
|
3560
|
+
.composer-busy-mode-menu-item:focus-visible {
|
|
3561
|
+
border-color: rgba(148, 226, 213, 0.48);
|
|
3562
|
+
box-shadow: 0 0 0.8rem rgba(148, 226, 213, 0.14);
|
|
3563
|
+
transform: translateY(-1px);
|
|
3564
|
+
}
|
|
3565
|
+
.composer-busy-mode-menu-item[aria-checked="true"] {
|
|
3566
|
+
border-color: rgba(148, 226, 213, 0.52);
|
|
3567
|
+
background:
|
|
3568
|
+
linear-gradient(120deg, rgba(148, 226, 213, 0.18), rgba(137, 180, 250, 0.10)),
|
|
3569
|
+
var(--ctp-mantle);
|
|
3570
|
+
}
|
|
3571
|
+
.composer-busy-mode-menu-label {
|
|
3572
|
+
font-size: 0.76rem;
|
|
3573
|
+
font-weight: 900;
|
|
3574
|
+
letter-spacing: 0.04em;
|
|
3575
|
+
}
|
|
3576
|
+
.composer-busy-mode-menu-description {
|
|
3577
|
+
color: var(--muted);
|
|
3578
|
+
font-size: 0.68rem;
|
|
3579
|
+
line-height: 1.25;
|
|
3580
|
+
}
|
|
3337
3581
|
.composer-icon-button {
|
|
3338
3582
|
display: inline-flex;
|
|
3339
3583
|
align-items: center;
|
|
@@ -3428,7 +3672,7 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
3428
3672
|
background: linear-gradient(180deg, rgba(137, 180, 250, 0.14), rgba(var(--ctp-crust-rgb), 0.86));
|
|
3429
3673
|
}
|
|
3430
3674
|
.command-suggest {
|
|
3431
|
-
margin
|
|
3675
|
+
margin: 0 0 0.5rem;
|
|
3432
3676
|
max-height: 15rem;
|
|
3433
3677
|
overflow: auto;
|
|
3434
3678
|
background: rgba(var(--ctp-crust-rgb), 0.94);
|
|
@@ -4129,6 +4373,46 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
4129
4373
|
font-size: 0.72rem;
|
|
4130
4374
|
font-weight: 800;
|
|
4131
4375
|
}
|
|
4376
|
+
.extension-dialog.skill-editor-dialog {
|
|
4377
|
+
--skill-editor-size: min(152rem, calc(100vw - 1.5rem), calc(var(--visual-viewport-height, 100dvh) - 1.5rem));
|
|
4378
|
+
width: var(--skill-editor-size);
|
|
4379
|
+
height: var(--skill-editor-size);
|
|
4380
|
+
max-width: calc(100vw - 1.5rem);
|
|
4381
|
+
max-height: calc(var(--visual-viewport-height, 100dvh) - 1.5rem);
|
|
4382
|
+
aspect-ratio: 1 / 1;
|
|
4383
|
+
}
|
|
4384
|
+
.skill-editor-dialog form {
|
|
4385
|
+
display: grid;
|
|
4386
|
+
grid-template-rows: auto auto minmax(0, 1fr) auto auto;
|
|
4387
|
+
gap: 0.78rem;
|
|
4388
|
+
height: 100%;
|
|
4389
|
+
min-height: 0;
|
|
4390
|
+
}
|
|
4391
|
+
.skill-editor-meta {
|
|
4392
|
+
margin: 0;
|
|
4393
|
+
overflow-wrap: anywhere;
|
|
4394
|
+
font-size: 0.82rem;
|
|
4395
|
+
}
|
|
4396
|
+
.skill-editor-text {
|
|
4397
|
+
min-height: 0;
|
|
4398
|
+
resize: none;
|
|
4399
|
+
overflow: auto;
|
|
4400
|
+
overflow-x: hidden;
|
|
4401
|
+
overflow-wrap: anywhere;
|
|
4402
|
+
word-break: break-word;
|
|
4403
|
+
font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
|
|
4404
|
+
font-size: 0.82rem;
|
|
4405
|
+
line-height: 1.45;
|
|
4406
|
+
white-space: pre-wrap;
|
|
4407
|
+
}
|
|
4408
|
+
.skill-editor-status {
|
|
4409
|
+
margin: 0;
|
|
4410
|
+
min-height: 1.2rem;
|
|
4411
|
+
font-size: 0.84rem;
|
|
4412
|
+
}
|
|
4413
|
+
.skill-editor-status.ok { color: var(--ctp-green); }
|
|
4414
|
+
.skill-editor-status.warn { color: var(--ctp-yellow); }
|
|
4415
|
+
.skill-editor-status.error { color: var(--ctp-red); }
|
|
4132
4416
|
.prompt-list-dialog {
|
|
4133
4417
|
width: min(58rem, calc(100vw - 2rem));
|
|
4134
4418
|
}
|
|
@@ -5280,14 +5564,21 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
5280
5564
|
}
|
|
5281
5565
|
.terminal-tab { min-width: min(11rem, 100%); max-width: 100%; flex: 1 1 9rem; }
|
|
5282
5566
|
.terminal-tab-group {
|
|
5283
|
-
|
|
5567
|
+
display: grid;
|
|
5568
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
5569
|
+
align-items: stretch;
|
|
5284
5570
|
}
|
|
5285
5571
|
.terminal-tab-group:hover,
|
|
5286
5572
|
.terminal-tab-group:focus-within,
|
|
5287
5573
|
.terminal-tab-group.menu-open {
|
|
5288
5574
|
flex-basis: 100%;
|
|
5289
5575
|
}
|
|
5576
|
+
.terminal-tab-group-button {
|
|
5577
|
+
width: auto;
|
|
5578
|
+
min-width: 0;
|
|
5579
|
+
}
|
|
5290
5580
|
.terminal-tab-group-menu {
|
|
5581
|
+
grid-column: 1 / -1;
|
|
5291
5582
|
position: static;
|
|
5292
5583
|
flex-direction: column;
|
|
5293
5584
|
flex-wrap: nowrap;
|
|
@@ -5295,7 +5586,7 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
5295
5586
|
max-width: none;
|
|
5296
5587
|
max-height: none;
|
|
5297
5588
|
min-width: 0;
|
|
5298
|
-
margin: 0.34rem;
|
|
5589
|
+
margin: 0.34rem 0 0;
|
|
5299
5590
|
padding-top: 0;
|
|
5300
5591
|
overflow: visible;
|
|
5301
5592
|
}
|
|
@@ -5569,6 +5860,7 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
5569
5860
|
.composer {
|
|
5570
5861
|
position: sticky;
|
|
5571
5862
|
bottom: 0;
|
|
5863
|
+
z-index: 50;
|
|
5572
5864
|
padding: 0.55rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom));
|
|
5573
5865
|
background: linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.92), rgba(var(--ctp-crust-rgb), 0.98));
|
|
5574
5866
|
box-shadow: 0 -0.85rem 1.8rem rgba(var(--ctp-crust-rgb), 0.56), inset 0 1px 0 rgba(255,255,255,0.04);
|
|
@@ -5632,12 +5924,12 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
5632
5924
|
left: 0.55rem;
|
|
5633
5925
|
right: 0.55rem;
|
|
5634
5926
|
bottom: calc(100% + 0.42rem);
|
|
5635
|
-
z-index:
|
|
5927
|
+
z-index: 55;
|
|
5636
5928
|
display: none;
|
|
5637
5929
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
5638
5930
|
gap: 0.45rem;
|
|
5639
5931
|
max-height: min(42dvh, 22rem);
|
|
5640
|
-
overflow:
|
|
5932
|
+
overflow: visible;
|
|
5641
5933
|
padding: 0.68rem;
|
|
5642
5934
|
border: 1px solid rgba(249, 226, 175, 0.24);
|
|
5643
5935
|
border-radius: 0.95rem;
|
|
@@ -5670,8 +5962,17 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
5670
5962
|
font-size: 0.92rem;
|
|
5671
5963
|
}
|
|
5672
5964
|
body:not(.pi-run-active):not(.mobile-keyboard-open) .composer-row button.primary { grid-column: span 4; }
|
|
5673
|
-
body.pi-run-active:not(.mobile-keyboard-open) .composer-abort-button:not([hidden]) {
|
|
5674
|
-
|
|
5965
|
+
body.pi-run-active:not(.mobile-keyboard-open) .composer-abort-button:not([hidden]) {
|
|
5966
|
+
order: 1;
|
|
5967
|
+
grid-column: span 2;
|
|
5968
|
+
}
|
|
5969
|
+
body.pi-run-active:not(.mobile-keyboard-open) .composer-row > #steerButton { order: 2; }
|
|
5970
|
+
body.pi-run-active:not(.mobile-keyboard-open) .composer-row > #followUpButton { order: 3; }
|
|
5971
|
+
body.pi-run-active:not(.mobile-keyboard-open) .composer-actions-button { order: 4; }
|
|
5972
|
+
body.pi-run-active:not(.mobile-keyboard-open) .composer-row button.primary {
|
|
5973
|
+
order: 5;
|
|
5974
|
+
grid-column: span 4;
|
|
5975
|
+
}
|
|
5675
5976
|
.composer-row > #followUpButton,
|
|
5676
5977
|
.composer-row > #steerButton,
|
|
5677
5978
|
.composer-actions-button { grid-column: span 2; }
|
|
@@ -5685,31 +5986,49 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
5685
5986
|
width: 100%;
|
|
5686
5987
|
margin-right: 0;
|
|
5687
5988
|
}
|
|
5989
|
+
.composer-actions-panel > .composer-publish-menu::after {
|
|
5990
|
+
content: "";
|
|
5991
|
+
position: absolute;
|
|
5992
|
+
left: -0.32rem;
|
|
5993
|
+
right: -0.32rem;
|
|
5994
|
+
bottom: 100%;
|
|
5995
|
+
display: none;
|
|
5996
|
+
height: 0.8rem;
|
|
5997
|
+
pointer-events: auto;
|
|
5998
|
+
}
|
|
5999
|
+
.composer-actions-panel > .composer-publish-menu:hover::after,
|
|
6000
|
+
.composer-actions-panel > .composer-publish-menu:focus-within::after,
|
|
6001
|
+
.composer-actions-panel > .composer-publish-menu.open::after {
|
|
6002
|
+
display: block;
|
|
6003
|
+
}
|
|
5688
6004
|
.composer-actions-panel > .composer-publish-menu.open {
|
|
5689
|
-
|
|
5690
|
-
grid-column: 1 / -1;
|
|
5691
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
5692
|
-
gap: 0.42rem;
|
|
6005
|
+
z-index: 120;
|
|
5693
6006
|
}
|
|
5694
|
-
.composer-actions-panel > .composer-publish-menu.open .composer-publish-button
|
|
5695
|
-
|
|
5696
|
-
grid-column: 1 / -1;
|
|
6007
|
+
.composer-actions-panel > .composer-publish-menu.open .composer-publish-button {
|
|
6008
|
+
min-width: 0;
|
|
5697
6009
|
}
|
|
5698
6010
|
.composer-actions-panel > .composer-publish-menu .composer-publish-menu-panel {
|
|
5699
|
-
position:
|
|
6011
|
+
position: absolute;
|
|
6012
|
+
inset: auto auto calc(100% + 0.38rem) 0;
|
|
5700
6013
|
flex-direction: column;
|
|
5701
6014
|
width: 100%;
|
|
5702
6015
|
min-width: 0;
|
|
5703
6016
|
max-width: 100%;
|
|
5704
|
-
max-height:
|
|
5705
|
-
margin
|
|
6017
|
+
max-height: min(34dvh, 18rem);
|
|
6018
|
+
margin: 0;
|
|
5706
6019
|
padding-bottom: 0;
|
|
5707
|
-
overflow:
|
|
6020
|
+
overflow: auto;
|
|
6021
|
+
}
|
|
6022
|
+
.composer-actions-panel > .composer-options-menu .composer-publish-menu-panel {
|
|
6023
|
+
inset-inline: auto 0;
|
|
6024
|
+
max-height: min(76dvh, 34rem);
|
|
5708
6025
|
}
|
|
5709
6026
|
.composer-actions-panel > .composer-publish-menu .composer-publish-menu-item {
|
|
5710
6027
|
width: 100%;
|
|
6028
|
+
min-width: 0;
|
|
5711
6029
|
max-width: 100%;
|
|
5712
|
-
flex: 1 1
|
|
6030
|
+
flex: 1 1 auto;
|
|
6031
|
+
white-space: normal;
|
|
5713
6032
|
}
|
|
5714
6033
|
.command-suggest {
|
|
5715
6034
|
max-height: 35dvh;
|