@firstpick/pi-package-webui 0.1.5 → 0.1.7

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/public/styles.css CHANGED
@@ -58,6 +58,11 @@
58
58
  --background-glow-pink: rgba(245, 194, 231, 0.34);
59
59
  --background-glow-blue: rgba(137, 180, 250, 0.32);
60
60
  --background-glow-teal: rgba(148, 226, 213, 0.20);
61
+ --theme-background-image: none;
62
+ --theme-background-overlay: linear-gradient(180deg, rgba(17, 17, 27, 0), rgba(17, 17, 27, 0));
63
+ --theme-background-size: cover;
64
+ --theme-background-position: center;
65
+ --theme-background-repeat: no-repeat;
61
66
  --button-primary-text: #11111b;
62
67
  --visual-viewport-height: 100dvh;
63
68
  --visual-viewport-offset-top: 0px;
@@ -75,11 +80,35 @@ body {
75
80
  min-height: 0;
76
81
  overflow: hidden;
77
82
  color: var(--text);
78
- background:
83
+ background-color: var(--ctp-crust);
84
+ background-image:
85
+ var(--theme-background-overlay),
86
+ var(--theme-background-image),
79
87
  radial-gradient(circle at 8% -8%, var(--background-glow-pink) 0, transparent 31rem),
80
88
  radial-gradient(circle at 82% 2%, var(--background-glow-blue) 0, transparent 34rem),
81
89
  radial-gradient(circle at 52% 112%, var(--background-glow-teal) 0, transparent 30rem),
82
90
  linear-gradient(135deg, var(--ctp-crust) 0%, var(--ctp-mantle) 45%, var(--ctp-base) 100%);
91
+ background-size:
92
+ cover,
93
+ var(--theme-background-size),
94
+ auto,
95
+ auto,
96
+ auto,
97
+ auto;
98
+ background-position:
99
+ center,
100
+ var(--theme-background-position),
101
+ 8% -8%,
102
+ 82% 2%,
103
+ 52% 112%,
104
+ center;
105
+ background-repeat:
106
+ no-repeat,
107
+ var(--theme-background-repeat),
108
+ no-repeat,
109
+ no-repeat,
110
+ no-repeat,
111
+ no-repeat;
83
112
  }
84
113
  body::before,
85
114
  body::after {
@@ -142,6 +171,7 @@ button.danger {
142
171
  box-shadow: 0 0 1.1rem rgba(243, 139, 168, 0.42);
143
172
  }
144
173
  button:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
174
+ button[hidden] { display: none !important; }
145
175
  button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible {
146
176
  border-color: var(--ctp-teal);
147
177
  box-shadow: 0 0 0 3px rgba(148, 226, 213, 0.15), 0 0 1rem var(--glow-teal);
@@ -279,6 +309,72 @@ body.side-panel-collapsed .side-panel {
279
309
  .side-panel-backdrop {
280
310
  display: none;
281
311
  }
312
+ .server-offline-panel[hidden] {
313
+ display: none !important;
314
+ }
315
+ .server-offline-panel {
316
+ position: fixed;
317
+ inset: 1rem;
318
+ z-index: 60;
319
+ display: grid;
320
+ place-items: center;
321
+ padding: 1rem;
322
+ pointer-events: none;
323
+ }
324
+ .server-offline-card {
325
+ position: relative;
326
+ width: min(44rem, 100%);
327
+ pointer-events: auto;
328
+ padding: clamp(1.2rem, 4vw, 2rem);
329
+ border: 1px solid rgba(249, 226, 175, 0.38);
330
+ border-radius: 1.2rem;
331
+ background:
332
+ radial-gradient(circle at 12% 0, rgba(249, 226, 175, 0.16), transparent 18rem),
333
+ linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.96), rgba(var(--ctp-crust-rgb), 0.98));
334
+ box-shadow: 0 1.2rem 4rem rgba(var(--ctp-crust-rgb), 0.74), 0 0 2rem rgba(249, 226, 175, 0.14), inset 0 1px 0 rgba(255,255,255,0.07);
335
+ }
336
+ .server-offline-kicker {
337
+ display: inline-block;
338
+ margin-bottom: 0.6rem;
339
+ color: var(--warning);
340
+ font-size: 0.76rem;
341
+ font-weight: 800;
342
+ letter-spacing: 0.12em;
343
+ text-transform: uppercase;
344
+ }
345
+ .server-offline-card h1 {
346
+ margin: 0 0 0.55rem;
347
+ font-size: clamp(1.35rem, 4vw, 2.1rem);
348
+ }
349
+ .server-offline-card p {
350
+ margin: 0 0 1rem;
351
+ }
352
+ .server-offline-command {
353
+ display: block;
354
+ margin: 0.9rem 0 1rem;
355
+ padding: 0.9rem 1rem;
356
+ overflow-x: auto;
357
+ white-space: pre;
358
+ border: 1px solid rgba(148, 226, 213, 0.26);
359
+ border-radius: 0.85rem;
360
+ color: var(--ctp-teal);
361
+ background: rgba(var(--ctp-crust-rgb), 0.72);
362
+ box-shadow: inset 0 0 1.2rem rgba(var(--ctp-crust-rgb), 0.46);
363
+ }
364
+ .server-offline-actions {
365
+ display: flex;
366
+ flex-wrap: wrap;
367
+ gap: 0.7rem;
368
+ }
369
+ .server-offline-note {
370
+ margin: 1rem 0 0;
371
+ font-size: 0.86rem;
372
+ }
373
+ body.server-offline .layout {
374
+ opacity: 0.42;
375
+ filter: blur(2px);
376
+ pointer-events: none;
377
+ }
282
378
  .side-panel-expand-button {
283
379
  position: fixed;
284
380
  top: 1rem;
@@ -455,15 +551,61 @@ body.side-panel-collapsed .terminal-tabs-shell {
455
551
  padding: 1rem;
456
552
  scrollbar-gutter: stable;
457
553
  }
458
- .side-panel h2 {
459
- font-size: 0.78rem;
460
- margin: 1.1rem 0 0.55rem;
554
+ .side-panel-section {
555
+ display: grid;
556
+ gap: 0.55rem;
557
+ }
558
+ .side-panel-section + .side-panel-section { margin-top: 0.78rem; }
559
+ .side-panel-section h2 {
560
+ margin: 0;
561
+ font-size: inherit;
562
+ }
563
+ .side-panel-section-toggle {
564
+ display: flex;
565
+ align-items: center;
566
+ justify-content: space-between;
567
+ gap: 0.65rem;
568
+ width: 100%;
569
+ min-height: 44px;
570
+ padding: 0.48rem 0.68rem;
461
571
  color: var(--ctp-pink);
572
+ text-align: left;
462
573
  text-transform: uppercase;
463
574
  letter-spacing: 0.16em;
575
+ border-color: rgba(245, 194, 231, 0.20);
576
+ border-radius: 0.78rem;
577
+ background:
578
+ linear-gradient(120deg, rgba(245, 194, 231, 0.10), rgba(148, 226, 213, 0.06)),
579
+ rgba(var(--ctp-crust-rgb), 0.52);
580
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 1rem rgba(245, 194, 231, 0.05);
581
+ font-size: 0.78rem;
582
+ font-weight: 900;
464
583
  text-shadow: 0 0 1rem var(--glow-pink);
465
584
  }
466
- .side-panel-body h2:first-child { margin-top: 0; }
585
+ .side-panel-section-toggle:hover,
586
+ .side-panel-section-toggle:focus-visible {
587
+ transform: none;
588
+ color: var(--ctp-teal);
589
+ border-color: rgba(148, 226, 213, 0.46);
590
+ box-shadow: 0 0 1.1rem rgba(148, 226, 213, 0.12), inset 0 1px 0 rgba(255,255,255,0.05);
591
+ }
592
+ .side-panel-section-toggle[aria-expanded="true"] {
593
+ border-color: rgba(245, 194, 231, 0.32);
594
+ }
595
+ .side-panel-section-chevron {
596
+ flex: 0 0 auto;
597
+ color: var(--ctp-teal);
598
+ font-size: 1rem;
599
+ line-height: 1;
600
+ transition: transform 160ms ease, color 160ms ease;
601
+ }
602
+ .side-panel-section:not(.collapsed) .side-panel-section-chevron {
603
+ transform: rotate(90deg);
604
+ }
605
+ .side-panel-section.collapsed .side-panel-section-content,
606
+ .side-panel-section-content[hidden] {
607
+ display: none;
608
+ }
467
609
  .side-panel-controls {
468
610
  display: grid;
469
611
  gap: 0.75rem;
@@ -490,6 +632,42 @@ body.side-panel-collapsed .terminal-tabs-shell {
490
632
  width: 100%;
491
633
  min-width: 0;
492
634
  }
635
+ .background-input {
636
+ position: absolute;
637
+ width: 1px;
638
+ height: 1px;
639
+ overflow: hidden;
640
+ clip: rect(0 0 0 0);
641
+ clip-path: inset(50%);
642
+ white-space: nowrap;
643
+ }
644
+ .background-control-row {
645
+ display: grid;
646
+ grid-template-columns: minmax(0, 1fr) auto;
647
+ gap: 0.42rem;
648
+ align-items: center;
649
+ }
650
+ .background-clear-button {
651
+ width: 44px !important;
652
+ min-width: 44px !important;
653
+ padding-inline: 0;
654
+ color: var(--ctp-red);
655
+ font-size: 1.25rem;
656
+ font-weight: 900;
657
+ line-height: 1;
658
+ }
659
+ .background-status {
660
+ min-width: 0;
661
+ padding: 0.5rem 0.58rem;
662
+ overflow-wrap: anywhere;
663
+ color: rgba(var(--ctp-subtext-rgb), 0.74);
664
+ border: 1px solid rgba(180, 190, 254, 0.14);
665
+ border-radius: 0.62rem;
666
+ background: rgba(var(--ctp-crust-rgb), 0.42);
667
+ font-size: 0.72rem;
668
+ font-weight: 750;
669
+ line-height: 1.35;
670
+ }
493
671
  .toggle-control {
494
672
  display: grid;
495
673
  grid-template-columns: auto minmax(0, 1fr);
@@ -621,9 +799,6 @@ body.side-panel-collapsed .terminal-tabs-shell {
621
799
  border-color: transparent;
622
800
  background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-peach), var(--ctp-red));
623
801
  }
624
- .side-panel-controls .danger {
625
- margin-top: 0.15rem;
626
- }
627
802
  .optional-features-box {
628
803
  display: grid;
629
804
  gap: 0.6rem;
@@ -1810,6 +1985,25 @@ button.footer-meta {
1810
1985
  background: linear-gradient(145deg, rgba(249, 226, 175, 0.11), rgba(var(--ctp-surface-rgb), 0.58));
1811
1986
  padding: 0;
1812
1987
  }
1988
+ .message.toolExecution {
1989
+ border-color: rgba(249, 226, 175, 0.34);
1990
+ background: linear-gradient(145deg, rgba(249, 226, 175, 0.12), rgba(var(--ctp-surface-rgb), 0.58));
1991
+ transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
1992
+ }
1993
+ .message.toolExecution .message-role {
1994
+ color: var(--ctp-yellow);
1995
+ text-shadow: 0 0 0.85rem rgba(249, 226, 175, 0.30);
1996
+ }
1997
+ .message.toolExecution.tool-running {
1998
+ border-color: rgba(148, 226, 213, 0.48);
1999
+ box-shadow: 0 0 1rem rgba(148, 226, 213, 0.18), 0 0.8rem 1.8rem rgba(var(--ctp-crust-rgb), 0.34);
2000
+ }
2001
+ .message.toolExecution.tool-success {
2002
+ border-color: rgba(166, 227, 161, 0.38);
2003
+ }
2004
+ .message.toolExecution.tool-error {
2005
+ border-color: rgba(243, 139, 168, 0.72);
2006
+ }
1813
2007
  .message.streaming {
1814
2008
  outline: 1px solid rgba(148, 226, 213, 0.72);
1815
2009
  box-shadow: 0 0 1.7rem var(--glow-teal), 0 0.8rem 2rem rgba(var(--ctp-crust-rgb), 0.4);
@@ -1916,6 +2110,123 @@ button.footer-meta {
1916
2110
  margin: 0;
1917
2111
  color: rgba(var(--ctp-text-rgb), 0.78);
1918
2112
  }
2113
+ .tool-title-line {
2114
+ display: flex;
2115
+ align-items: baseline;
2116
+ gap: 0.5rem;
2117
+ flex-wrap: wrap;
2118
+ margin: 0.15rem 0 0.35rem;
2119
+ }
2120
+ .tool-name {
2121
+ color: var(--ctp-yellow);
2122
+ font-weight: 900;
2123
+ text-transform: uppercase;
2124
+ letter-spacing: 0.12em;
2125
+ }
2126
+ .tool-subject {
2127
+ color: rgba(var(--ctp-text-rgb), 0.86);
2128
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
2129
+ overflow-wrap: anywhere;
2130
+ }
2131
+ .tool-meta-line {
2132
+ display: flex;
2133
+ gap: 0.35rem;
2134
+ flex-wrap: wrap;
2135
+ margin: 0.2rem 0 0.45rem;
2136
+ }
2137
+ .tool-meta-pill {
2138
+ border: 1px solid rgba(249, 226, 175, 0.20);
2139
+ border-radius: 999px;
2140
+ padding: 0.12rem 0.46rem;
2141
+ color: rgba(var(--ctp-subtext-rgb), 0.82);
2142
+ background: rgba(var(--ctp-crust-rgb), 0.46);
2143
+ font-size: 0.72rem;
2144
+ font-weight: 800;
2145
+ }
2146
+ .tool-command-line {
2147
+ margin: 0.1rem 0 0.4rem;
2148
+ white-space: pre-wrap;
2149
+ overflow-wrap: anywhere;
2150
+ color: var(--ctp-yellow);
2151
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
2152
+ font-weight: 900;
2153
+ }
2154
+ .tool-output-details {
2155
+ margin: 0.45rem 0 0;
2156
+ }
2157
+ .tool-output-summary {
2158
+ color: var(--ctp-yellow);
2159
+ font-weight: 900;
2160
+ letter-spacing: 0.04em;
2161
+ }
2162
+ .tool-output-details[open] + .tool-output-preview {
2163
+ display: none;
2164
+ }
2165
+ .tool-output-preview {
2166
+ margin-top: 0.4rem;
2167
+ }
2168
+ .tool-output-preview-text {
2169
+ color: rgba(var(--ctp-text-rgb), 0.78);
2170
+ }
2171
+ .tool-raw-details {
2172
+ margin-top: 0.58rem;
2173
+ border-color: rgba(180, 190, 254, 0.14);
2174
+ background: rgba(var(--ctp-crust-rgb), 0.30);
2175
+ }
2176
+ .tool-raw-summary {
2177
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
2178
+ font-size: 0.74rem;
2179
+ font-weight: 900;
2180
+ letter-spacing: 0.08em;
2181
+ text-transform: uppercase;
2182
+ }
2183
+ .tool-raw-code {
2184
+ max-height: 18rem;
2185
+ color: rgba(var(--ctp-text-rgb), 0.76);
2186
+ font-size: 0.78rem;
2187
+ }
2188
+ .muted-output {
2189
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
2190
+ }
2191
+ .tool-warnings {
2192
+ display: grid;
2193
+ gap: 0.2rem;
2194
+ margin-top: 0.45rem;
2195
+ }
2196
+ .tool-warning {
2197
+ color: var(--ctp-yellow);
2198
+ font-size: 0.78rem;
2199
+ font-weight: 800;
2200
+ }
2201
+ .tool-diff {
2202
+ overflow: auto;
2203
+ margin: 0.45rem 0;
2204
+ border: 1px solid rgba(203, 166, 247, 0.20);
2205
+ border-radius: 0.75rem;
2206
+ background: rgba(var(--ctp-crust-rgb), 0.82);
2207
+ padding: 0.55rem 0;
2208
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
2209
+ font-size: 0.86rem;
2210
+ }
2211
+ .tool-diff > div {
2212
+ padding: 0 0.72rem;
2213
+ white-space: pre;
2214
+ }
2215
+ .tool-diff .diff-added {
2216
+ color: var(--ctp-green);
2217
+ background: rgba(166, 227, 161, 0.10);
2218
+ }
2219
+ .tool-diff .diff-removed {
2220
+ color: var(--ctp-red);
2221
+ background: rgba(243, 139, 168, 0.10);
2222
+ }
2223
+ .tool-diff .diff-hunk {
2224
+ color: var(--ctp-mauve);
2225
+ background: rgba(203, 166, 247, 0.10);
2226
+ }
2227
+ .tool-diff .diff-file {
2228
+ color: var(--ctp-yellow);
2229
+ }
1919
2230
  .message.toolResult:not(.error) .message-collapse:not([open]) > summary.message-header,
1920
2231
  .message.bashExecution .message-collapse:not([open]) > summary.message-header,
1921
2232
  .message.compactionSummary .message-collapse:not([open]) > summary.message-header {
@@ -1980,6 +2291,127 @@ button.footer-meta {
1980
2291
  color: #11111b;
1981
2292
  background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-mauve));
1982
2293
  }
2294
+ .markdown-body {
2295
+ display: block;
2296
+ color: rgba(var(--ctp-text-rgb), 0.94);
2297
+ line-height: 1.58;
2298
+ overflow-wrap: anywhere;
2299
+ }
2300
+ .markdown-body > :first-child { margin-top: 0; }
2301
+ .markdown-body > :last-child { margin-bottom: 0; }
2302
+ .markdown-body p {
2303
+ margin: 0.45rem 0;
2304
+ }
2305
+ .markdown-heading {
2306
+ margin: 0.7rem 0 0.35rem;
2307
+ color: var(--ctp-teal);
2308
+ line-height: 1.25;
2309
+ letter-spacing: 0.01em;
2310
+ text-shadow: 0 0 0.9rem rgba(148, 226, 213, 0.18);
2311
+ }
2312
+ .markdown-heading-1 { font-size: 1.35rem; }
2313
+ .markdown-heading-2 { font-size: 1.18rem; }
2314
+ .markdown-heading-3 { font-size: 1.05rem; }
2315
+ .markdown-heading-4,
2316
+ .markdown-heading-5,
2317
+ .markdown-heading-6 { font-size: 0.96rem; color: var(--ctp-mauve); }
2318
+ .markdown-body a {
2319
+ color: var(--ctp-blue);
2320
+ text-decoration-color: rgba(137, 180, 250, 0.45);
2321
+ text-underline-offset: 0.16em;
2322
+ }
2323
+ .markdown-body a:hover { color: var(--ctp-teal); }
2324
+ .markdown-inline-code {
2325
+ border: 1px solid rgba(203, 166, 247, 0.18);
2326
+ border-radius: 0.35rem;
2327
+ padding: 0.05rem 0.28rem;
2328
+ color: var(--ctp-yellow);
2329
+ background: rgba(var(--ctp-crust-rgb), 0.60);
2330
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
2331
+ font-size: 0.92em;
2332
+ }
2333
+ .markdown-code-block {
2334
+ position: relative;
2335
+ margin: 0.55rem 0;
2336
+ }
2337
+ .markdown-code-language {
2338
+ position: absolute;
2339
+ top: 0.42rem;
2340
+ right: 0.55rem;
2341
+ z-index: 1;
2342
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
2343
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
2344
+ font-size: 0.68rem;
2345
+ font-weight: 900;
2346
+ letter-spacing: 0.08em;
2347
+ text-transform: uppercase;
2348
+ }
2349
+ .markdown-code code {
2350
+ display: block;
2351
+ min-width: max-content;
2352
+ }
2353
+ .markdown-list {
2354
+ margin: 0.45rem 0 0.55rem 1.2rem;
2355
+ padding-left: 1rem;
2356
+ }
2357
+ .markdown-list li { margin: 0.18rem 0; }
2358
+ .markdown-task-item {
2359
+ list-style: none;
2360
+ margin-left: -1.25rem;
2361
+ }
2362
+ .markdown-task-checkbox {
2363
+ min-width: 0;
2364
+ min-height: 0;
2365
+ width: 0.95rem;
2366
+ height: 0.95rem;
2367
+ margin: 0 0.45rem 0 0;
2368
+ vertical-align: -0.12rem;
2369
+ accent-color: var(--ctp-green);
2370
+ }
2371
+ .markdown-blockquote {
2372
+ margin: 0.55rem 0;
2373
+ padding: 0.5rem 0.75rem;
2374
+ border-left: 3px solid rgba(203, 166, 247, 0.56);
2375
+ color: rgba(var(--ctp-text-rgb), 0.84);
2376
+ background: rgba(var(--ctp-crust-rgb), 0.42);
2377
+ border-radius: 0.45rem;
2378
+ }
2379
+ .markdown-rule {
2380
+ height: 1px;
2381
+ margin: 0.8rem 0;
2382
+ border: 0;
2383
+ background: linear-gradient(90deg, transparent, rgba(203, 166, 247, 0.45), transparent);
2384
+ }
2385
+ .markdown-table-wrapper {
2386
+ overflow-x: auto;
2387
+ margin: 0.6rem 0;
2388
+ border: 1px solid rgba(203, 166, 247, 0.20);
2389
+ border-radius: 0.7rem;
2390
+ background: rgba(var(--ctp-crust-rgb), 0.46);
2391
+ }
2392
+ .markdown-table {
2393
+ width: 100%;
2394
+ border-collapse: collapse;
2395
+ min-width: max-content;
2396
+ }
2397
+ .markdown-table th,
2398
+ .markdown-table td {
2399
+ padding: 0.42rem 0.58rem;
2400
+ border-bottom: 1px solid rgba(180, 190, 254, 0.12);
2401
+ text-align: left;
2402
+ vertical-align: top;
2403
+ }
2404
+ .markdown-table th {
2405
+ color: var(--ctp-yellow);
2406
+ font-size: 0.78rem;
2407
+ letter-spacing: 0.05em;
2408
+ text-transform: uppercase;
2409
+ background: rgba(var(--ctp-surface-rgb), 0.42);
2410
+ }
2411
+ .markdown-table tr:last-child td { border-bottom: 0; }
2412
+ .streaming-markdown {
2413
+ min-height: 1.35rem;
2414
+ }
1983
2415
  .text-block, .code-block {
1984
2416
  margin: 0.35rem 0;
1985
2417
  white-space: pre-wrap;
@@ -2055,7 +2487,90 @@ summary { cursor: pointer; color: var(--warning); }
2055
2487
  background: linear-gradient(90deg, transparent, var(--ctp-pink), var(--ctp-blue), var(--ctp-teal), transparent);
2056
2488
  opacity: 0.8;
2057
2489
  }
2490
+ .composer-input-row {
2491
+ display: grid;
2492
+ grid-template-columns: minmax(0, 1fr) auto;
2493
+ gap: 0.55rem;
2494
+ align-items: stretch;
2495
+ }
2496
+ .composer-icon-button {
2497
+ display: inline-flex;
2498
+ align-items: center;
2499
+ justify-content: center;
2500
+ min-width: 2.9rem;
2501
+ min-height: 2.9rem;
2502
+ padding: 0.62rem;
2503
+ border-radius: 0.95rem;
2504
+ line-height: 1;
2505
+ }
2506
+ .composer-icon {
2507
+ display: block;
2508
+ width: 1.18rem;
2509
+ height: 1.18rem;
2510
+ flex: 0 0 auto;
2511
+ }
2512
+ .composer-icon-github {
2513
+ width: 1.12rem;
2514
+ height: 1.12rem;
2515
+ }
2516
+ .composer-attach-button {
2517
+ align-self: stretch;
2518
+ width: 3.05rem;
2519
+ margin: 0;
2520
+ }
2058
2521
  .command-suggest[hidden] { display: none; }
2522
+ .attachment-input { display: none; }
2523
+ .attachment-tray[hidden] { display: none; }
2524
+ .attachment-tray {
2525
+ display: flex;
2526
+ flex-wrap: wrap;
2527
+ gap: 0.45rem;
2528
+ margin-top: 0.55rem;
2529
+ }
2530
+ .attachment-pill {
2531
+ display: inline-flex;
2532
+ align-items: center;
2533
+ gap: 0.42rem;
2534
+ max-width: min(100%, 28rem);
2535
+ padding: 0.38rem 0.48rem 0.38rem 0.6rem;
2536
+ border: 1px solid rgba(137, 180, 250, 0.32);
2537
+ border-radius: 999px;
2538
+ color: var(--text);
2539
+ background: linear-gradient(135deg, rgba(var(--ctp-surface-rgb), 0.82), rgba(var(--ctp-crust-rgb), 0.78));
2540
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0.85rem rgba(137, 180, 250, 0.08);
2541
+ }
2542
+ .attachment-pill-icon { flex: 0 0 auto; }
2543
+ .attachment-pill-name {
2544
+ min-width: 0;
2545
+ overflow: hidden;
2546
+ text-overflow: ellipsis;
2547
+ white-space: nowrap;
2548
+ font-weight: 800;
2549
+ }
2550
+ .attachment-pill-meta {
2551
+ flex: 0 0 auto;
2552
+ color: rgba(var(--ctp-subtext-rgb), 0.72);
2553
+ font-size: 0.78rem;
2554
+ }
2555
+ .attachment-remove-button {
2556
+ min-height: 0;
2557
+ padding: 0.12rem 0.34rem;
2558
+ border-radius: 999px;
2559
+ color: var(--ctp-red);
2560
+ border-color: rgba(243, 139, 168, 0.32);
2561
+ background: rgba(243, 139, 168, 0.08);
2562
+ box-shadow: none;
2563
+ }
2564
+ .attachment-remove-button:hover {
2565
+ color: #11111b;
2566
+ background: var(--ctp-red);
2567
+ border-color: transparent;
2568
+ }
2569
+ .composer.drag-over {
2570
+ outline: 2px dashed rgba(137, 180, 250, 0.72);
2571
+ outline-offset: -0.42rem;
2572
+ background: linear-gradient(180deg, rgba(137, 180, 250, 0.14), rgba(var(--ctp-crust-rgb), 0.86));
2573
+ }
2059
2574
  .command-suggest {
2060
2575
  margin-top: 0.5rem;
2061
2576
  max-height: 15rem;
@@ -2131,6 +2646,32 @@ summary { cursor: pointer; color: var(--warning); }
2131
2646
  }
2132
2647
  .composer-actions-button { display: none; }
2133
2648
  .composer-actions-panel { display: contents; }
2649
+ .composer-abort-button,
2650
+ .composer-row button.primary {
2651
+ min-width: 5.8rem;
2652
+ }
2653
+ .composer-abort-button {
2654
+ position: relative;
2655
+ overflow: hidden;
2656
+ box-shadow: 0 0 1rem rgba(243, 139, 168, 0.30), inset 0 1px 0 rgba(255,255,255,0.05);
2657
+ }
2658
+ .composer-abort-button.long-pressing {
2659
+ transform: translateY(0);
2660
+ box-shadow: 0 0 1.4rem rgba(243, 139, 168, 0.50), inset 0 1px 0 rgba(255,255,255,0.08);
2661
+ }
2662
+ .composer-abort-button.long-pressing::after {
2663
+ content: "";
2664
+ position: absolute;
2665
+ inset: 0;
2666
+ pointer-events: none;
2667
+ background: linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
2668
+ transform: scaleX(0);
2669
+ transform-origin: left center;
2670
+ animation: abort-long-press-fill 700ms linear forwards;
2671
+ }
2672
+ @keyframes abort-long-press-fill {
2673
+ to { transform: scaleX(1); }
2674
+ }
2134
2675
  .composer-row label {
2135
2676
  display: flex;
2136
2677
  align-items: center;
@@ -2160,6 +2701,11 @@ summary { cursor: pointer; color: var(--warning); }
2160
2701
  .composer-publish-menu.open {
2161
2702
  z-index: 100;
2162
2703
  }
2704
+ .composer-git-button,
2705
+ .composer-publish-button {
2706
+ width: 2.9rem;
2707
+ }
2708
+ .composer-attach-button,
2163
2709
  .composer-compact-button,
2164
2710
  .composer-git-button,
2165
2711
  .composer-publish-button {
@@ -2184,6 +2730,7 @@ summary { cursor: pointer; color: var(--warning); }
2184
2730
  linear-gradient(120deg, rgba(250, 179, 135, 0.13), rgba(245, 194, 231, 0.10)),
2185
2731
  linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
2186
2732
  }
2733
+ .composer-attach-button:hover,
2187
2734
  .composer-compact-button:hover,
2188
2735
  .composer-git-button:hover,
2189
2736
  .composer-publish-button:hover,
@@ -2248,15 +2795,21 @@ summary { cursor: pointer; color: var(--warning); }
2248
2795
  background: linear-gradient(120deg, var(--ctp-peach), var(--ctp-yellow));
2249
2796
  box-shadow: 0 0 1rem rgba(250, 179, 135, 0.20);
2250
2797
  }
2798
+ .composer button[data-tooltip] {
2799
+ position: relative;
2800
+ }
2251
2801
  .composer-row button[data-tooltip]::before,
2252
- .composer-row button[data-tooltip]::after {
2802
+ .composer-row button[data-tooltip]::after,
2803
+ .composer-input-row button[data-tooltip]::before,
2804
+ .composer-input-row button[data-tooltip]::after {
2253
2805
  position: absolute;
2254
2806
  right: 0;
2255
2807
  pointer-events: none;
2256
2808
  opacity: 0;
2257
2809
  transition: opacity 140ms ease, transform 140ms ease;
2258
2810
  }
2259
- .composer-row button[data-tooltip]::before {
2811
+ .composer-row button[data-tooltip]::before,
2812
+ .composer-input-row button[data-tooltip]::before {
2260
2813
  content: "";
2261
2814
  bottom: calc(100% + 0.42rem);
2262
2815
  width: 0.72rem;
@@ -2267,7 +2820,8 @@ summary { cursor: pointer; color: var(--warning); }
2267
2820
  transform: translate(-1.2rem, 0.24rem) rotate(45deg);
2268
2821
  z-index: 29;
2269
2822
  }
2270
- .composer-row button[data-tooltip]::after {
2823
+ .composer-row button[data-tooltip]::after,
2824
+ .composer-input-row button[data-tooltip]::after {
2271
2825
  content: attr(data-tooltip);
2272
2826
  bottom: calc(100% + 0.72rem);
2273
2827
  z-index: 30;
@@ -2295,13 +2849,22 @@ summary { cursor: pointer; color: var(--warning); }
2295
2849
  .composer-row button[data-tooltip]:focus-visible::before,
2296
2850
  .composer-row button[data-tooltip]:focus-visible::after,
2297
2851
  .composer-row button[data-tooltip].tooltip-open::before,
2298
- .composer-row button[data-tooltip].tooltip-open::after {
2852
+ .composer-row button[data-tooltip].tooltip-open::after,
2853
+ .composer-input-row button[data-tooltip]:hover::before,
2854
+ .composer-input-row button[data-tooltip]:hover::after,
2855
+ .composer-input-row button[data-tooltip]:focus-visible::before,
2856
+ .composer-input-row button[data-tooltip]:focus-visible::after,
2857
+ .composer-input-row button[data-tooltip].tooltip-open::before,
2858
+ .composer-input-row button[data-tooltip].tooltip-open::after {
2299
2859
  opacity: 1;
2300
2860
  transform: translateY(0);
2301
2861
  }
2302
2862
  .composer-row button[data-tooltip]:hover::before,
2303
2863
  .composer-row button[data-tooltip]:focus-visible::before,
2304
- .composer-row button[data-tooltip].tooltip-open::before {
2864
+ .composer-row button[data-tooltip].tooltip-open::before,
2865
+ .composer-input-row button[data-tooltip]:hover::before,
2866
+ .composer-input-row button[data-tooltip]:focus-visible::before,
2867
+ .composer-input-row button[data-tooltip].tooltip-open::before {
2305
2868
  transform: translate(-1.2rem, 0) rotate(45deg);
2306
2869
  }
2307
2870
 
@@ -2470,6 +3033,118 @@ summary { cursor: pointer; color: var(--warning); }
2470
3033
  .dialog-input { width: 100%; padding: 0.7rem; }
2471
3034
  .dialog-editor { width: 100%; min-height: 12rem; padding: 0.7rem; }
2472
3035
 
3036
+ .native-command-dialog {
3037
+ width: min(56rem, calc(100vw - 2rem));
3038
+ }
3039
+ .native-command-search {
3040
+ margin: 0.6rem 0 0.7rem;
3041
+ }
3042
+ .native-command-body {
3043
+ display: grid;
3044
+ gap: 0.7rem;
3045
+ max-height: min(34rem, 58vh);
3046
+ overflow: auto;
3047
+ padding-right: 0.12rem;
3048
+ }
3049
+ .native-command-empty,
3050
+ .native-command-note {
3051
+ margin: 0;
3052
+ padding: 0.72rem 0.82rem;
3053
+ border: 1px solid rgba(180, 190, 254, 0.14);
3054
+ border-radius: 0.82rem;
3055
+ background: rgba(var(--ctp-crust-rgb), 0.46);
3056
+ white-space: pre-wrap;
3057
+ }
3058
+ .native-selector-list {
3059
+ display: grid;
3060
+ gap: 0.45rem;
3061
+ }
3062
+ .native-selector-item {
3063
+ display: grid;
3064
+ gap: 0.18rem;
3065
+ justify-items: stretch;
3066
+ width: 100%;
3067
+ padding: 0.62rem 0.72rem 0.62rem calc(0.72rem + (var(--tree-depth, 0) * 1rem));
3068
+ text-align: left;
3069
+ border-color: rgba(180, 190, 254, 0.16);
3070
+ background: rgba(var(--ctp-surface-rgb), 0.36);
3071
+ }
3072
+ .native-selector-item:hover,
3073
+ .native-selector-item:focus-visible,
3074
+ .native-selector-item.active {
3075
+ border-color: rgba(148, 226, 213, 0.45);
3076
+ background: linear-gradient(90deg, rgba(148, 226, 213, 0.16), rgba(137, 180, 250, 0.10));
3077
+ }
3078
+ .native-selector-item:disabled {
3079
+ cursor: default;
3080
+ opacity: 0.62;
3081
+ }
3082
+ .native-selector-title {
3083
+ display: flex;
3084
+ flex-wrap: wrap;
3085
+ gap: 0.45rem;
3086
+ align-items: center;
3087
+ color: var(--text);
3088
+ }
3089
+ .native-selector-badge {
3090
+ padding: 0.1rem 0.38rem;
3091
+ border: 1px solid rgba(166, 227, 161, 0.32);
3092
+ border-radius: 999px;
3093
+ color: var(--ctp-green);
3094
+ font-size: 0.68rem;
3095
+ font-weight: 900;
3096
+ text-transform: uppercase;
3097
+ letter-spacing: 0.07em;
3098
+ }
3099
+ .native-selector-detail,
3100
+ .native-selector-meta,
3101
+ .native-settings-hint {
3102
+ color: rgba(var(--ctp-subtext-rgb), 0.74);
3103
+ overflow-wrap: anywhere;
3104
+ }
3105
+ .native-selector-meta {
3106
+ font-size: 0.76rem;
3107
+ }
3108
+ .native-settings-grid,
3109
+ .native-tree-options {
3110
+ display: grid;
3111
+ grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
3112
+ gap: 0.72rem;
3113
+ }
3114
+ .native-settings-field,
3115
+ .native-settings-toggle {
3116
+ display: grid;
3117
+ gap: 0.42rem;
3118
+ padding: 0.72rem;
3119
+ border: 1px solid rgba(180, 190, 254, 0.14);
3120
+ border-radius: 0.82rem;
3121
+ background: rgba(var(--ctp-crust-rgb), 0.44);
3122
+ }
3123
+ .native-settings-toggle {
3124
+ grid-template-columns: auto minmax(0, 1fr);
3125
+ align-items: start;
3126
+ }
3127
+ .native-settings-label {
3128
+ color: rgba(var(--ctp-text-rgb), 0.74);
3129
+ font-size: 0.72rem;
3130
+ font-weight: 900;
3131
+ letter-spacing: 0.08em;
3132
+ text-transform: uppercase;
3133
+ }
3134
+ .native-settings-hint {
3135
+ display: block;
3136
+ margin-top: 0.18rem;
3137
+ font-size: 0.78rem;
3138
+ font-weight: 500;
3139
+ }
3140
+ .native-tree-options {
3141
+ position: sticky;
3142
+ top: 0;
3143
+ z-index: 1;
3144
+ padding-bottom: 0.45rem;
3145
+ background: linear-gradient(180deg, rgba(var(--ctp-mantle-rgb), 0.98), rgba(var(--ctp-mantle-rgb), 0.86));
3146
+ }
3147
+
2473
3148
  .path-picker-dialog {
2474
3149
  width: min(48rem, calc(100vw - 2rem));
2475
3150
  }
@@ -2984,12 +3659,11 @@ summary { cursor: pointer; color: var(--warning); }
2984
3659
  margin-top: 0.35rem;
2985
3660
  }
2986
3661
  body.mobile-keyboard-open .composer-actions-button,
2987
- body.mobile-keyboard-open #steerButton,
2988
- body.mobile-keyboard-open #followUpButton,
2989
3662
  body.mobile-keyboard-open .composer-actions-panel {
2990
3663
  display: none !important;
2991
3664
  }
2992
- body.mobile-keyboard-open .composer-row button.primary {
3665
+ body.mobile-keyboard-open .composer-row button.primary,
3666
+ body.mobile-keyboard-open .composer-abort-button:not([hidden]) {
2993
3667
  grid-column: 1 / -1;
2994
3668
  min-height: 44px;
2995
3669
  }
@@ -3036,6 +3710,8 @@ summary { cursor: pointer; color: var(--warning); }
3036
3710
  font-size: 0.92rem;
3037
3711
  }
3038
3712
  body:not(.pi-run-active):not(.mobile-keyboard-open) .composer-row button.primary { grid-column: span 4; }
3713
+ body.pi-run-active:not(.mobile-keyboard-open) .composer-abort-button:not([hidden]) { grid-column: span 2; }
3714
+ body.pi-run-active:not(.mobile-keyboard-open) .composer-row button.primary { grid-column: span 4; }
3039
3715
  .composer-row > #followUpButton,
3040
3716
  .composer-row > #steerButton,
3041
3717
  .composer-actions-button { grid-column: span 2; }
@@ -3149,6 +3825,9 @@ summary { cursor: pointer; color: var(--warning); }
3149
3825
  .composer-row button[data-tooltip].tooltip-open::after { display: block; }
3150
3826
  .git-workflow-actions button,
3151
3827
  #gitWorkflowCancelButton { min-height: 44px; }
3828
+ .native-command-body { max-height: min(28rem, 54dvh); }
3829
+ .native-settings-grid,
3830
+ .native-tree-options { grid-template-columns: 1fr; }
3152
3831
  .path-picker-current-row { grid-template-columns: 1fr; }
3153
3832
  .path-picker-add-fast-pick { width: 100%; }
3154
3833
  .path-picker-fast-pick { grid-template-columns: minmax(0, 1fr) 44px; }