anentrypoint-design 0.0.200 → 0.0.202
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/app-shell.css +67 -2
- package/chat.css +159 -0
- package/dist/247420.css +226 -2
- package/dist/247420.js +13 -13
- package/package.json +1 -1
- package/src/components/agent-chat.js +110 -9
- package/src/components/chat.js +129 -24
- package/src/components/content.js +71 -9
- package/src/components/context-pane.js +14 -3
- package/src/components/files-modals.js +83 -24
- package/src/components/files.js +58 -10
- package/src/components/sessions.js +102 -19
- package/src/components.js +4 -4
- package/src/markdown-cache.js +15 -11
- package/src/markdown.js +15 -0
package/app-shell.css
CHANGED
|
@@ -1299,6 +1299,19 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
|
|
|
1299
1299
|
.ds-upload-item.done .ds-upload-pct { color: var(--success); }
|
|
1300
1300
|
.ds-upload-item.error .ds-upload-fill { background: var(--warn); }
|
|
1301
1301
|
.ds-upload-item.error .ds-upload-pct { color: var(--warn); }
|
|
1302
|
+
/* Per-row upload recovery actions (replace / dismiss) — error rows are not dead ends. */
|
|
1303
|
+
.ds-upload-item { grid-template-columns: minmax(0, 1fr) 120px 44px auto; }
|
|
1304
|
+
.ds-upload-actions { display: inline-flex; gap: var(--space-1); justify-content: flex-end; }
|
|
1305
|
+
.ds-upload-act {
|
|
1306
|
+
padding: 2px 10px; min-height: 24px; cursor: pointer;
|
|
1307
|
+
background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
|
|
1308
|
+
color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
|
|
1309
|
+
}
|
|
1310
|
+
.ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
|
|
1311
|
+
.ds-upload-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
1312
|
+
@media (hover: none), (pointer: coarse) {
|
|
1313
|
+
.ds-upload-act { min-height: 44px; min-width: 44px; }
|
|
1314
|
+
}
|
|
1302
1315
|
|
|
1303
1316
|
/* Empty state */
|
|
1304
1317
|
.ds-file-empty {
|
|
@@ -1356,6 +1369,14 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
|
|
|
1356
1369
|
font-family: inherit; font-size: var(--fs-sm);
|
|
1357
1370
|
}
|
|
1358
1371
|
.ds-modal-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
1372
|
+
/* In-body modal error (role=alert): mutation failures (409/403) surface INSIDE
|
|
1373
|
+
the dialog, not behind the fixed overlay. */
|
|
1374
|
+
.ds-modal-error {
|
|
1375
|
+
margin: var(--space-2) 0 0; padding: 8px 10px;
|
|
1376
|
+
border: var(--bw-hair) solid var(--flame); border-radius: var(--r-2);
|
|
1377
|
+
background: color-mix(in oklab, var(--flame) 12%, var(--bg));
|
|
1378
|
+
color: var(--flame); font-size: var(--fs-xs);
|
|
1379
|
+
}
|
|
1359
1380
|
.btn-primary.danger {
|
|
1360
1381
|
background: var(--warn);
|
|
1361
1382
|
border-color: var(--warn);
|
|
@@ -1485,10 +1506,12 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
|
|
|
1485
1506
|
.ds-file-row:hover .ds-file-check,
|
|
1486
1507
|
.ds-file-row:focus-within .ds-file-check,
|
|
1487
1508
|
.ds-file-check.on { opacity: 1; }
|
|
1488
|
-
/* Touch / coarse-pointer devices have no hover — keep checkboxes
|
|
1489
|
-
|
|
1509
|
+
/* Touch / coarse-pointer devices have no hover — keep checkboxes AND the
|
|
1510
|
+
per-row action buttons (rename/delete/download) visible so the file manager
|
|
1511
|
+
is fully reachable without a pointer (e.g. an iPad in landscape). */
|
|
1490
1512
|
@media (hover: none), (pointer: coarse) {
|
|
1491
1513
|
.ds-file-check { opacity: 1; }
|
|
1514
|
+
.ds-file-actions { opacity: 1; }
|
|
1492
1515
|
}
|
|
1493
1516
|
.ds-file-check.on { background: var(--accent); border-color: var(--accent); }
|
|
1494
1517
|
.ds-file-row.selected {
|
|
@@ -2907,3 +2930,45 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
|
|
|
2907
2930
|
.ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
|
|
2908
2931
|
.ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
2909
2932
|
.ws-scrim { display: none; }
|
|
2933
|
+
|
|
2934
|
+
/* ============================================================
|
|
2935
|
+
Row title highlight, expanded-row actions, filter pills.
|
|
2936
|
+
============================================================ */
|
|
2937
|
+
|
|
2938
|
+
/* Highlighted match inside a Row title (Row `highlight` prop). */
|
|
2939
|
+
.ds-hl { background: color-mix(in oklab, var(--accent) 25%, transparent); color: inherit; border-radius: 2px; }
|
|
2940
|
+
|
|
2941
|
+
/* Action strip rendered inside an EXPANDED Row (Row `actions` prop). The
|
|
2942
|
+
buttons stop propagation so they never fire the row onClick. */
|
|
2943
|
+
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; padding-top: var(--space-2); }
|
|
2944
|
+
.row-act {
|
|
2945
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
2946
|
+
padding: 4px 10px; min-height: 28px;
|
|
2947
|
+
background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1);
|
|
2948
|
+
color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-tiny); cursor: pointer;
|
|
2949
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
2950
|
+
}
|
|
2951
|
+
.row-act:hover { background: var(--bg-3); color: var(--fg); }
|
|
2952
|
+
.row-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
2953
|
+
|
|
2954
|
+
/* FilterPills - a group of pill toggle buttons (aria-pressed). */
|
|
2955
|
+
.ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
|
2956
|
+
.ds-filter-pill {
|
|
2957
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
2958
|
+
padding: 4px 12px; min-height: 28px;
|
|
2959
|
+
background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: 999px;
|
|
2960
|
+
color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-tiny); cursor: pointer;
|
|
2961
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
2962
|
+
}
|
|
2963
|
+
.ds-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
|
|
2964
|
+
.ds-filter-pill.active { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
|
|
2965
|
+
.ds-filter-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
2966
|
+
|
|
2967
|
+
/* Touch floor for the new small controls. */
|
|
2968
|
+
@media (pointer: coarse) {
|
|
2969
|
+
.row-act, .ds-filter-pill { min-height: 44px; }
|
|
2970
|
+
}
|
|
2971
|
+
|
|
2972
|
+
/* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
|
|
2973
|
+
.ds-file-act:disabled { opacity: .45; cursor: default; }
|
|
2974
|
+
.ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
|
package/chat.css
CHANGED
|
@@ -190,6 +190,50 @@
|
|
|
190
190
|
.agentchat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
|
|
191
191
|
.agentchat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
|
|
192
192
|
|
|
193
|
+
/* Guided install path in the empty state: copy line + monospaced command rows
|
|
194
|
+
(each with its own copy button) + a recheck button. No animation. */
|
|
195
|
+
.agentchat-install {
|
|
196
|
+
margin-top: var(--space-4, 16px);
|
|
197
|
+
display: flex;
|
|
198
|
+
flex-direction: column;
|
|
199
|
+
gap: var(--space-2, 8px);
|
|
200
|
+
text-align: left;
|
|
201
|
+
width: 100%;
|
|
202
|
+
}
|
|
203
|
+
.agentchat-install-text { margin: 0; font-size: .9em; color: var(--fg-3); }
|
|
204
|
+
.agentchat-install-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1, 4px); }
|
|
205
|
+
.agentchat-install-row {
|
|
206
|
+
display: flex; align-items: center; gap: var(--space-2, 8px);
|
|
207
|
+
padding: var(--space-1, 4px) var(--space-2, 8px);
|
|
208
|
+
border: var(--bw-hair) solid var(--rule);
|
|
209
|
+
border-radius: var(--r-1, 4px);
|
|
210
|
+
background: var(--bg-2);
|
|
211
|
+
}
|
|
212
|
+
.agentchat-install-agent { flex: 0 0 auto; font-size: var(--fs-tiny); color: var(--fg-3); min-width: 8ch; }
|
|
213
|
+
.agentchat-install-cmd {
|
|
214
|
+
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
215
|
+
font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg-2, var(--fg));
|
|
216
|
+
}
|
|
217
|
+
.agentchat-install-copy {
|
|
218
|
+
flex: 0 0 auto; cursor: pointer; padding: 2px 8px; min-height: 24px;
|
|
219
|
+
border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 4px);
|
|
220
|
+
background: none; color: var(--fg-3);
|
|
221
|
+
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
222
|
+
}
|
|
223
|
+
.agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
|
|
224
|
+
.agentchat-install-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
225
|
+
.agentchat-install-actions { display: flex; justify-content: flex-start; }
|
|
226
|
+
|
|
227
|
+
/* Host-supplied transcript export actions riding the controls row. */
|
|
228
|
+
.agentchat-export-act {
|
|
229
|
+
cursor: pointer; padding: 4px 10px; min-height: 32px;
|
|
230
|
+
border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 4px);
|
|
231
|
+
background: none; color: var(--fg-3);
|
|
232
|
+
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
233
|
+
}
|
|
234
|
+
.agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
|
|
235
|
+
.agentchat-export-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
236
|
+
|
|
193
237
|
/* "working" tail: a long silent tool call shouldn't read as frozen. */
|
|
194
238
|
.agentchat-working {
|
|
195
239
|
display: flex;
|
|
@@ -472,4 +516,119 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
|
|
|
472
516
|
.chat-msg-action { min-width: 44px; height: 44px; }
|
|
473
517
|
.ds-dash-select { min-width: 44px; min-height: 44px; }
|
|
474
518
|
.ds-file-more-btn, .ds-roots-tab, .ds-dash-errors-toggle { min-height: 44px; }
|
|
519
|
+
.agentchat-export-act { min-height: 44px; }
|
|
520
|
+
.agentchat-install-copy { min-height: 44px; min-width: 44px; }
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
/* --- SessionMeta: middot-separated session metadata strip. Class is
|
|
524
|
+
.ds-session-meta-strip (.ds-session-meta is taken by ConversationList row
|
|
525
|
+
meta above). Wraps at narrow widths. --- */
|
|
526
|
+
.ds-session-meta-strip {
|
|
527
|
+
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
|
|
528
|
+
font-size: var(--fs-tiny); color: var(--fg-3);
|
|
529
|
+
}
|
|
530
|
+
.ds-session-meta-item { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
|
|
531
|
+
.ds-session-meta-item + .ds-session-meta-item::before { content: '\00B7'; color: var(--fg-3); margin-right: var(--space-1); }
|
|
532
|
+
.ds-session-meta-label { color: var(--fg-3); }
|
|
533
|
+
.ds-session-meta-value { font-family: var(--ff-mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
534
|
+
.ds-session-meta-copy {
|
|
535
|
+
padding: 2px 8px; min-height: 24px; cursor: pointer;
|
|
536
|
+
background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1);
|
|
537
|
+
color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
|
|
538
|
+
}
|
|
539
|
+
.ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
|
|
540
|
+
.ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
541
|
+
@media (pointer: coarse), (max-width: 640px) {
|
|
542
|
+
.ds-session-meta-copy { min-height: 44px; min-width: 44px; }
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
/* ============================================================================
|
|
546
|
+
Logic/predictability sweep (2026-06-10): composer ergonomics, turn notices,
|
|
547
|
+
windowed thread, dashboard stopping/external states, cwd validation.
|
|
548
|
+
============================================================================ */
|
|
549
|
+
|
|
550
|
+
/* Enter-to-send hint: visible while the composer is focused or carries a
|
|
551
|
+
draft; hidden under 420px to save rows. */
|
|
552
|
+
.chat-composer-hint {
|
|
553
|
+
display: none; padding: 2px var(--space-3) 0;
|
|
554
|
+
font-size: var(--fs-micro); color: var(--fg-3);
|
|
555
|
+
}
|
|
556
|
+
.chat-composer:focus-within .chat-composer-hint,
|
|
557
|
+
.chat-composer.has-draft .chat-composer-hint { display: block; }
|
|
558
|
+
@media (max-width: 420px) {
|
|
559
|
+
.chat-composer .chat-composer-hint { display: none; }
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
/* Transient composer note (paste/drop not supported), aria-live polite. */
|
|
563
|
+
.chat-composer-note {
|
|
564
|
+
padding: 4px var(--space-3); font-size: var(--fs-tiny); color: var(--fg-2);
|
|
475
565
|
}
|
|
566
|
+
|
|
567
|
+
/* Drag-over ring: token accent, never a hex. */
|
|
568
|
+
.chat-composer.dragover { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
|
|
569
|
+
|
|
570
|
+
/* Per-bit composer context: only the bit that owns a control is a button. */
|
|
571
|
+
.chat-composer-context-bit {
|
|
572
|
+
display: inline; padding: 0; margin: 0;
|
|
573
|
+
background: none; border: none; cursor: pointer;
|
|
574
|
+
font: inherit; color: inherit; text-decoration: underline dotted;
|
|
575
|
+
}
|
|
576
|
+
.chat-composer-context-bit:hover { color: var(--fg-2); }
|
|
577
|
+
.chat-composer-context-bit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
578
|
+
@media (pointer: coarse) {
|
|
579
|
+
.chat-composer-context-bit { min-height: 44px; }
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
/* Out-of-band turn notices: neutral tone (NOT error red) — a stopped or
|
|
583
|
+
incomplete turn must not read as a finished answer. */
|
|
584
|
+
.chat-msg-notice {
|
|
585
|
+
margin-top: var(--space-1); padding: 6px 10px;
|
|
586
|
+
border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
|
|
587
|
+
background: var(--bg-2); color: var(--fg-2); font-size: var(--fs-tiny);
|
|
588
|
+
}
|
|
589
|
+
.chat-msg-notice.is-incomplete { border-style: dashed; }
|
|
590
|
+
|
|
591
|
+
/* Tail-window streaming head ('streaming · N KB so far'). */
|
|
592
|
+
.chat-stream-head {
|
|
593
|
+
padding: 2px 0 6px; font-family: var(--ff-mono);
|
|
594
|
+
font-size: var(--fs-micro); color: var(--fg-3);
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
/* Windowed thread: 'show N earlier turns' control at the top. */
|
|
598
|
+
.agentchat-earlier {
|
|
599
|
+
display: flex; align-items: center; justify-content: center;
|
|
600
|
+
gap: var(--space-3); padding: var(--space-2) var(--space-3);
|
|
601
|
+
}
|
|
602
|
+
.agentchat-earlier-count { font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
603
|
+
.agentchat-earlier-btn {
|
|
604
|
+
padding: 4px 12px; min-height: 32px; border: var(--bw-hair) solid var(--bg-3);
|
|
605
|
+
border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
|
|
606
|
+
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
607
|
+
}
|
|
608
|
+
.agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
609
|
+
@media (pointer: coarse) {
|
|
610
|
+
.agentchat-earlier-btn { min-height: 44px; }
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
/* Inline cwd validation line (checking / error) under the cwd input. */
|
|
614
|
+
.agentchat-cwd-hint { font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
615
|
+
.agentchat-cwd-hint.is-error { color: var(--flame); }
|
|
616
|
+
|
|
617
|
+
/* Dashboard: shared session title heading (same string as the rails). */
|
|
618
|
+
.ds-dash-title {
|
|
619
|
+
font-size: var(--fs-body); font-weight: 600; color: var(--fg);
|
|
620
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
/* Stopping state: in-flight cancel reads distinctly from running/error. */
|
|
624
|
+
.ds-dash-status.is-stopping { color: var(--amber, #d9a93a); }
|
|
625
|
+
|
|
626
|
+
/* External (observed, not owned) session card: no stop control exists. */
|
|
627
|
+
.ds-dash-external {
|
|
628
|
+
padding: 1px 6px; border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-pill);
|
|
629
|
+
font-size: var(--fs-micro); color: var(--fg-3); text-transform: uppercase; letter-spacing: .03em;
|
|
630
|
+
}
|
|
631
|
+
.ds-dash-card.is-external { border-style: dashed; }
|
|
632
|
+
|
|
633
|
+
/* One connection vocabulary: offline (is-lost kept as legacy alias). */
|
|
634
|
+
.ds-dash-stream.is-offline { color: var(--flame); }
|
package/dist/247420.css
CHANGED
|
@@ -1700,6 +1700,19 @@
|
|
|
1700
1700
|
.ds-247420 .ds-upload-item.done .ds-upload-pct { color: var(--success); }
|
|
1701
1701
|
.ds-247420 .ds-upload-item.error .ds-upload-fill { background: var(--warn); }
|
|
1702
1702
|
.ds-247420 .ds-upload-item.error .ds-upload-pct { color: var(--warn); }
|
|
1703
|
+
/* Per-row upload recovery actions (replace / dismiss) — error rows are not dead ends. */
|
|
1704
|
+
.ds-247420 .ds-upload-item { grid-template-columns: minmax(0, 1fr) 120px 44px auto; }
|
|
1705
|
+
.ds-247420 .ds-upload-actions { display: inline-flex; gap: var(--space-1); justify-content: flex-end; }
|
|
1706
|
+
.ds-247420 .ds-upload-act {
|
|
1707
|
+
padding: 2px 10px; min-height: 24px; cursor: pointer;
|
|
1708
|
+
background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
|
|
1709
|
+
color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
|
|
1710
|
+
}
|
|
1711
|
+
.ds-247420 .ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
|
|
1712
|
+
.ds-247420 .ds-upload-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
1713
|
+
@media (hover: none), (pointer: coarse) {
|
|
1714
|
+
.ds-247420 .ds-upload-act { min-height: 44px; min-width: 44px; }
|
|
1715
|
+
}
|
|
1703
1716
|
|
|
1704
1717
|
/* Empty state */
|
|
1705
1718
|
.ds-247420 .ds-file-empty {
|
|
@@ -1757,6 +1770,14 @@
|
|
|
1757
1770
|
font-family: inherit; font-size: var(--fs-sm);
|
|
1758
1771
|
}
|
|
1759
1772
|
.ds-247420 .ds-modal-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
1773
|
+
/* In-body modal error (role=alert): mutation failures (409/403) surface INSIDE
|
|
1774
|
+
the dialog, not behind the fixed overlay. */
|
|
1775
|
+
.ds-247420 .ds-modal-error {
|
|
1776
|
+
margin: var(--space-2) 0 0; padding: 8px 10px;
|
|
1777
|
+
border: var(--bw-hair) solid var(--flame); border-radius: var(--r-2);
|
|
1778
|
+
background: color-mix(in oklab, var(--flame) 12%, var(--bg));
|
|
1779
|
+
color: var(--flame); font-size: var(--fs-xs);
|
|
1780
|
+
}
|
|
1760
1781
|
.ds-247420 .btn-primary.danger {
|
|
1761
1782
|
background: var(--warn);
|
|
1762
1783
|
border-color: var(--warn);
|
|
@@ -1886,10 +1907,12 @@
|
|
|
1886
1907
|
.ds-247420 .ds-file-row:hover .ds-file-check,
|
|
1887
1908
|
.ds-247420 .ds-file-row:focus-within .ds-file-check,
|
|
1888
1909
|
.ds-247420 .ds-file-check.on { opacity: 1; }
|
|
1889
|
-
/* Touch / coarse-pointer devices have no hover — keep checkboxes
|
|
1890
|
-
|
|
1910
|
+
/* Touch / coarse-pointer devices have no hover — keep checkboxes AND the
|
|
1911
|
+
per-row action buttons (rename/delete/download) visible so the file manager
|
|
1912
|
+
is fully reachable without a pointer (e.g. an iPad in landscape). */
|
|
1891
1913
|
@media (hover: none), (pointer: coarse) {
|
|
1892
1914
|
.ds-247420 .ds-file-check { opacity: 1; }
|
|
1915
|
+
.ds-247420 .ds-file-actions { opacity: 1; }
|
|
1893
1916
|
}
|
|
1894
1917
|
.ds-247420 .ds-file-check.on { background: var(--accent); border-color: var(--accent); }
|
|
1895
1918
|
.ds-247420 .ds-file-row.selected {
|
|
@@ -3300,6 +3323,48 @@
|
|
|
3300
3323
|
.ds-247420 .ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
3301
3324
|
.ds-247420 .ws-scrim { display: none; }
|
|
3302
3325
|
|
|
3326
|
+
/* ============================================================
|
|
3327
|
+
Row title highlight, expanded-row actions, filter pills.
|
|
3328
|
+
============================================================ */
|
|
3329
|
+
|
|
3330
|
+
/* Highlighted match inside a Row title (Row `highlight` prop). */
|
|
3331
|
+
.ds-247420 .ds-hl { background: color-mix(in oklab, var(--accent) 25%, transparent); color: inherit; border-radius: 2px; }
|
|
3332
|
+
|
|
3333
|
+
/* Action strip rendered inside an EXPANDED Row (Row `actions` prop). The
|
|
3334
|
+
buttons stop propagation so they never fire the row onClick. */
|
|
3335
|
+
.ds-247420 .row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; padding-top: var(--space-2); }
|
|
3336
|
+
.ds-247420 .row-act {
|
|
3337
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
3338
|
+
padding: 4px 10px; min-height: 28px;
|
|
3339
|
+
background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1);
|
|
3340
|
+
color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-tiny); cursor: pointer;
|
|
3341
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
3342
|
+
}
|
|
3343
|
+
.ds-247420 .row-act:hover { background: var(--bg-3); color: var(--fg); }
|
|
3344
|
+
.ds-247420 .row-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
3345
|
+
|
|
3346
|
+
/* FilterPills - a group of pill toggle buttons (aria-pressed). */
|
|
3347
|
+
.ds-247420 .ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
|
3348
|
+
.ds-247420 .ds-filter-pill {
|
|
3349
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
3350
|
+
padding: 4px 12px; min-height: 28px;
|
|
3351
|
+
background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: 999px;
|
|
3352
|
+
color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-tiny); cursor: pointer;
|
|
3353
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
3354
|
+
}
|
|
3355
|
+
.ds-247420 .ds-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
|
|
3356
|
+
.ds-247420 .ds-filter-pill.active { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
|
|
3357
|
+
.ds-247420 .ds-filter-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
3358
|
+
|
|
3359
|
+
/* Touch floor for the new small controls. */
|
|
3360
|
+
@media (pointer: coarse) {
|
|
3361
|
+
.ds-247420 .row-act, .ds-247420 .ds-filter-pill { min-height: 44px; }
|
|
3362
|
+
}
|
|
3363
|
+
|
|
3364
|
+
/* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
|
|
3365
|
+
.ds-247420 .ds-file-act:disabled { opacity: .45; cursor: default; }
|
|
3366
|
+
.ds-247420 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
|
|
3367
|
+
|
|
3303
3368
|
/* community.css */
|
|
3304
3369
|
/* ============================================================
|
|
3305
3370
|
247420 design system — community surface (Discord-style chat)
|
|
@@ -5021,6 +5086,50 @@
|
|
|
5021
5086
|
.ds-247420 .agentchat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
|
|
5022
5087
|
.ds-247420 .agentchat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
|
|
5023
5088
|
|
|
5089
|
+
/* Guided install path in the empty state: copy line + monospaced command rows
|
|
5090
|
+
(each with its own copy button) + a recheck button. No animation. */
|
|
5091
|
+
.ds-247420 .agentchat-install {
|
|
5092
|
+
margin-top: var(--space-4, 16px);
|
|
5093
|
+
display: flex;
|
|
5094
|
+
flex-direction: column;
|
|
5095
|
+
gap: var(--space-2, 8px);
|
|
5096
|
+
text-align: left;
|
|
5097
|
+
width: 100%;
|
|
5098
|
+
}
|
|
5099
|
+
.ds-247420 .agentchat-install-text { margin: 0; font-size: .9em; color: var(--fg-3); }
|
|
5100
|
+
.ds-247420 .agentchat-install-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1, 4px); }
|
|
5101
|
+
.ds-247420 .agentchat-install-row {
|
|
5102
|
+
display: flex; align-items: center; gap: var(--space-2, 8px);
|
|
5103
|
+
padding: var(--space-1, 4px) var(--space-2, 8px);
|
|
5104
|
+
border: var(--bw-hair) solid var(--rule);
|
|
5105
|
+
border-radius: var(--r-1, 4px);
|
|
5106
|
+
background: var(--bg-2);
|
|
5107
|
+
}
|
|
5108
|
+
.ds-247420 .agentchat-install-agent { flex: 0 0 auto; font-size: var(--fs-tiny); color: var(--fg-3); min-width: 8ch; }
|
|
5109
|
+
.ds-247420 .agentchat-install-cmd {
|
|
5110
|
+
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
5111
|
+
font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg-2, var(--fg));
|
|
5112
|
+
}
|
|
5113
|
+
.ds-247420 .agentchat-install-copy {
|
|
5114
|
+
flex: 0 0 auto; cursor: pointer; padding: 2px 8px; min-height: 24px;
|
|
5115
|
+
border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 4px);
|
|
5116
|
+
background: none; color: var(--fg-3);
|
|
5117
|
+
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
5118
|
+
}
|
|
5119
|
+
.ds-247420 .agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
|
|
5120
|
+
.ds-247420 .agentchat-install-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
5121
|
+
.ds-247420 .agentchat-install-actions { display: flex; justify-content: flex-start; }
|
|
5122
|
+
|
|
5123
|
+
/* Host-supplied transcript export actions riding the controls row. */
|
|
5124
|
+
.ds-247420 .agentchat-export-act {
|
|
5125
|
+
cursor: pointer; padding: 4px 10px; min-height: 32px;
|
|
5126
|
+
border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 4px);
|
|
5127
|
+
background: none; color: var(--fg-3);
|
|
5128
|
+
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
5129
|
+
}
|
|
5130
|
+
.ds-247420 .agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
|
|
5131
|
+
.ds-247420 .agentchat-export-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
5132
|
+
|
|
5024
5133
|
/* "working" tail: a long silent tool call shouldn't read as frozen. */
|
|
5025
5134
|
.ds-247420 .agentchat-working {
|
|
5026
5135
|
display: flex;
|
|
@@ -5303,8 +5412,123 @@
|
|
|
5303
5412
|
.ds-247420 .chat-msg-action { min-width: 44px; height: 44px; }
|
|
5304
5413
|
.ds-247420 .ds-dash-select { min-width: 44px; min-height: 44px; }
|
|
5305
5414
|
.ds-247420 .ds-file-more-btn, .ds-247420 .ds-roots-tab, .ds-247420 .ds-dash-errors-toggle { min-height: 44px; }
|
|
5415
|
+
.ds-247420 .agentchat-export-act { min-height: 44px; }
|
|
5416
|
+
.ds-247420 .agentchat-install-copy { min-height: 44px; min-width: 44px; }
|
|
5417
|
+
}
|
|
5418
|
+
|
|
5419
|
+
/* --- SessionMeta: middot-separated session metadata strip. Class is
|
|
5420
|
+
.ds-session-meta-strip (.ds-session-meta is taken by ConversationList row
|
|
5421
|
+
meta above). Wraps at narrow widths. --- */
|
|
5422
|
+
.ds-247420 .ds-session-meta-strip {
|
|
5423
|
+
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
|
|
5424
|
+
font-size: var(--fs-tiny); color: var(--fg-3);
|
|
5425
|
+
}
|
|
5426
|
+
.ds-247420 .ds-session-meta-item { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
|
|
5427
|
+
.ds-247420 .ds-session-meta-item + .ds-session-meta-item::before { content: '\00B7'; color: var(--fg-3); margin-right: var(--space-1); }
|
|
5428
|
+
.ds-247420 .ds-session-meta-label { color: var(--fg-3); }
|
|
5429
|
+
.ds-247420 .ds-session-meta-value { font-family: var(--ff-mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
5430
|
+
.ds-247420 .ds-session-meta-copy {
|
|
5431
|
+
padding: 2px 8px; min-height: 24px; cursor: pointer;
|
|
5432
|
+
background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1);
|
|
5433
|
+
color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
|
|
5434
|
+
}
|
|
5435
|
+
.ds-247420 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
|
|
5436
|
+
.ds-247420 .ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
5437
|
+
@media (pointer: coarse), (max-width: 640px) {
|
|
5438
|
+
.ds-247420 .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
|
|
5439
|
+
}
|
|
5440
|
+
|
|
5441
|
+
/* ============================================================================
|
|
5442
|
+
Logic/predictability sweep (2026-06-10): composer ergonomics, turn notices,
|
|
5443
|
+
windowed thread, dashboard stopping/external states, cwd validation.
|
|
5444
|
+
============================================================================ */
|
|
5445
|
+
|
|
5446
|
+
/* Enter-to-send hint: visible while the composer is focused or carries a
|
|
5447
|
+
draft; hidden under 420px to save rows. */
|
|
5448
|
+
.ds-247420 .chat-composer-hint {
|
|
5449
|
+
display: none; padding: 2px var(--space-3) 0;
|
|
5450
|
+
font-size: var(--fs-micro); color: var(--fg-3);
|
|
5451
|
+
}
|
|
5452
|
+
.ds-247420 .chat-composer:focus-within .chat-composer-hint,
|
|
5453
|
+
.ds-247420 .chat-composer.has-draft .chat-composer-hint { display: block; }
|
|
5454
|
+
@media (max-width: 420px) {
|
|
5455
|
+
.ds-247420 .chat-composer .chat-composer-hint { display: none; }
|
|
5456
|
+
}
|
|
5457
|
+
|
|
5458
|
+
/* Transient composer note (paste/drop not supported), aria-live polite. */
|
|
5459
|
+
.ds-247420 .chat-composer-note {
|
|
5460
|
+
padding: 4px var(--space-3); font-size: var(--fs-tiny); color: var(--fg-2);
|
|
5461
|
+
}
|
|
5462
|
+
|
|
5463
|
+
/* Drag-over ring: token accent, never a hex. */
|
|
5464
|
+
.ds-247420 .chat-composer.dragover { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
|
|
5465
|
+
|
|
5466
|
+
/* Per-bit composer context: only the bit that owns a control is a button. */
|
|
5467
|
+
.ds-247420 .chat-composer-context-bit {
|
|
5468
|
+
display: inline; padding: 0; margin: 0;
|
|
5469
|
+
background: none; border: none; cursor: pointer;
|
|
5470
|
+
font: inherit; color: inherit; text-decoration: underline dotted;
|
|
5471
|
+
}
|
|
5472
|
+
.ds-247420 .chat-composer-context-bit:hover { color: var(--fg-2); }
|
|
5473
|
+
.ds-247420 .chat-composer-context-bit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
5474
|
+
@media (pointer: coarse) {
|
|
5475
|
+
.ds-247420 .chat-composer-context-bit { min-height: 44px; }
|
|
5476
|
+
}
|
|
5477
|
+
|
|
5478
|
+
/* Out-of-band turn notices: neutral tone (NOT error red) — a stopped or
|
|
5479
|
+
incomplete turn must not read as a finished answer. */
|
|
5480
|
+
.ds-247420 .chat-msg-notice {
|
|
5481
|
+
margin-top: var(--space-1); padding: 6px 10px;
|
|
5482
|
+
border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
|
|
5483
|
+
background: var(--bg-2); color: var(--fg-2); font-size: var(--fs-tiny);
|
|
5484
|
+
}
|
|
5485
|
+
.ds-247420 .chat-msg-notice.is-incomplete { border-style: dashed; }
|
|
5486
|
+
|
|
5487
|
+
/* Tail-window streaming head ('streaming · N KB so far'). */
|
|
5488
|
+
.ds-247420 .chat-stream-head {
|
|
5489
|
+
padding: 2px 0 6px; font-family: var(--ff-mono);
|
|
5490
|
+
font-size: var(--fs-micro); color: var(--fg-3);
|
|
5491
|
+
}
|
|
5492
|
+
|
|
5493
|
+
/* Windowed thread: 'show N earlier turns' control at the top. */
|
|
5494
|
+
.ds-247420 .agentchat-earlier {
|
|
5495
|
+
display: flex; align-items: center; justify-content: center;
|
|
5496
|
+
gap: var(--space-3); padding: var(--space-2) var(--space-3);
|
|
5497
|
+
}
|
|
5498
|
+
.ds-247420 .agentchat-earlier-count { font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
5499
|
+
.ds-247420 .agentchat-earlier-btn {
|
|
5500
|
+
padding: 4px 12px; min-height: 32px; border: var(--bw-hair) solid var(--bg-3);
|
|
5501
|
+
border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
|
|
5502
|
+
font-family: var(--ff-body); font-size: var(--fs-tiny);
|
|
5503
|
+
}
|
|
5504
|
+
.ds-247420 .agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
5505
|
+
@media (pointer: coarse) {
|
|
5506
|
+
.ds-247420 .agentchat-earlier-btn { min-height: 44px; }
|
|
5507
|
+
}
|
|
5508
|
+
|
|
5509
|
+
/* Inline cwd validation line (checking / error) under the cwd input. */
|
|
5510
|
+
.ds-247420 .agentchat-cwd-hint { font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
5511
|
+
.ds-247420 .agentchat-cwd-hint.is-error { color: var(--flame); }
|
|
5512
|
+
|
|
5513
|
+
/* Dashboard: shared session title heading (same string as the rails). */
|
|
5514
|
+
.ds-247420 .ds-dash-title {
|
|
5515
|
+
font-size: var(--fs-body); font-weight: 600; color: var(--fg);
|
|
5516
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
5306
5517
|
}
|
|
5307
5518
|
|
|
5519
|
+
/* Stopping state: in-flight cancel reads distinctly from running/error. */
|
|
5520
|
+
.ds-247420 .ds-dash-status.is-stopping { color: var(--amber, #d9a93a); }
|
|
5521
|
+
|
|
5522
|
+
/* External (observed, not owned) session card: no stop control exists. */
|
|
5523
|
+
.ds-247420 .ds-dash-external {
|
|
5524
|
+
padding: 1px 6px; border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-pill);
|
|
5525
|
+
font-size: var(--fs-micro); color: var(--fg-3); text-transform: uppercase; letter-spacing: .03em;
|
|
5526
|
+
}
|
|
5527
|
+
.ds-247420 .ds-dash-card.is-external { border-style: dashed; }
|
|
5528
|
+
|
|
5529
|
+
/* One connection vocabulary: offline (is-lost kept as legacy alias). */
|
|
5530
|
+
.ds-247420 .ds-dash-stream.is-offline { color: var(--flame); }
|
|
5531
|
+
|
|
5308
5532
|
/* editor-primitives.css */
|
|
5309
5533
|
/* editor-primitives.css — chrome for in-engine editors, inspectors, IDEs,
|
|
5310
5534
|
debug HUDs. All rules under .ds-247420 scope (build prefixes). Tokens
|