anentrypoint-design 0.0.229 → 0.0.231
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 +21 -2
- package/chat.css +16 -13
- package/dist/247420.css +37 -15
- package/dist/247420.js +15 -15
- package/package.json +1 -1
- package/src/components/agent-chat.js +14 -3
- package/src/components/chat.js +64 -14
- package/src/components/context-pane.js +23 -8
- package/src/components/files-modals.js +21 -10
- package/src/components/files.js +3 -6
- package/src/components/overlay-primitives.js +84 -19
- package/src/components/sessions.js +15 -6
- package/src/components/shell.js +38 -16
- package/src/kits/os/theme.css +4 -0
package/app-shell.css
CHANGED
|
@@ -629,7 +629,7 @@ a.row:hover .meta, .row[role="button"]:hover .meta { color: var(--accent-ink); t
|
|
|
629
629
|
.row.rail-green::before,
|
|
630
630
|
.row.rail-purple::before,
|
|
631
631
|
.row.rail-flame::before { height: 56%; opacity: 1; }
|
|
632
|
-
.row.rail-green::before { background: var(--accent); }
|
|
632
|
+
.row.rail-green::before { background: var(--accent-ink); }
|
|
633
633
|
.row.rail-purple::before { background: var(--purple-2); }
|
|
634
634
|
.row.rail-flame::before { background: var(--flame); }
|
|
635
635
|
/* Differentiate the rail by SHAPE, not hue alone (color-blind safety): error
|
|
@@ -3331,6 +3331,8 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
|
|
|
3331
3331
|
.ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
|
|
3332
3332
|
.ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
|
3333
3333
|
.ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
3334
|
+
.ws-rail-item-flag { width: 6px; height: 6px; border-radius: 50%; flex: none; }
|
|
3335
|
+
.ws-rail-item-flag.tone-flame { background: var(--flame); box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 38%, transparent); }
|
|
3334
3336
|
.ws-rail-foot { margin-top: auto; padding-top: var(--space-2); border-top: var(--bw-hair) solid var(--bg-3); }
|
|
3335
3337
|
|
|
3336
3338
|
/* Collapsed rail: icon-only — hide text labels, center icons, drop toggle's far-right pin */
|
|
@@ -3356,7 +3358,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
|
|
|
3356
3358
|
/* Crumb band is the top chrome of the content column: a stable height so the
|
|
3357
3359
|
top edge aligns with the rail head, and a left gutter matching .ws-main so
|
|
3358
3360
|
the trail text is not flush against the rail border. */
|
|
3359
|
-
.ws-crumb { flex: 0 0 auto; min-height:
|
|
3361
|
+
.ws-crumb { flex: 0 0 auto; min-height: calc(var(--app-crumb-h) + var(--space-3)); padding: 0 var(--space-5); display: flex; align-items: center; gap: var(--space-1); border-bottom: var(--bw-hair) solid var(--bg-3); }
|
|
3360
3362
|
.ws-crumb-main { flex: 1 1 auto; min-width: 0; }
|
|
3361
3363
|
/* Content column gutter. Claude-Code-class calm: file grid / dashboard / event
|
|
3362
3364
|
list / history get a generous, consistent inner gutter instead of butting
|
|
@@ -3551,3 +3553,20 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
|
|
|
3551
3553
|
/* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
|
|
3552
3554
|
.ds-file-act:disabled { opacity: .45; cursor: default; }
|
|
3553
3555
|
.ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
|
|
3556
|
+
.ds-file-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
3557
|
+
|
|
3558
|
+
/* ============================================================
|
|
3559
|
+
Print — linearize WorkspaceShell so main content prints in full.
|
|
3560
|
+
The multi-column CSS grid with overflow:auto regions clips at
|
|
3561
|
+
the on-screen height in print/PDF; drop all chrome and let
|
|
3562
|
+
.ws-main expand to its natural document height.
|
|
3563
|
+
============================================================ */
|
|
3564
|
+
@media print {
|
|
3565
|
+
.ws-shell { display: block; }
|
|
3566
|
+
.ws-rail,
|
|
3567
|
+
.ws-sessions,
|
|
3568
|
+
.ws-pane,
|
|
3569
|
+
.ws-crumb,
|
|
3570
|
+
.app-status { display: none; }
|
|
3571
|
+
.ws-main { overflow: visible; height: auto; }
|
|
3572
|
+
}
|
package/chat.css
CHANGED
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
/* Live: a persistent faint concentric ring (resting shape channel, independent
|
|
335
335
|
of motion) with the pulse layered on top — so even at the pulse trough the
|
|
336
336
|
disc reads as solid-fill + ring, never a bare solid that aliases stale. */
|
|
337
|
-
.status-dot-disc.status-dot-live { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent); animation: status-disc-pulse 1.8s ease-in-out infinite; }
|
|
337
|
+
.status-dot-disc.status-dot-live { background: var(--accent-ink); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-ink) 30%, transparent); animation: status-disc-pulse 1.8s ease-in-out infinite; }
|
|
338
338
|
.status-dot-disc.status-dot-error { background: var(--flame); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--flame) 38%, transparent); }
|
|
339
339
|
.status-dot-disc.status-dot-connecting { background: transparent; box-shadow: inset 0 0 0 2px var(--amber); }
|
|
340
340
|
/* Stale: a muted ring with a hollow centre — silhouette distinct from live's
|
|
@@ -372,7 +372,7 @@
|
|
|
372
372
|
.ds-session-new:hover { background: var(--bg-2); color: var(--fg); }
|
|
373
373
|
/* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
|
|
374
374
|
radius/focus-ring); only the rail layout + touch floor live here. */
|
|
375
|
-
.ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; }
|
|
375
|
+
.ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
|
|
376
376
|
.ds-session-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
377
377
|
/* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
|
|
378
378
|
@media (pointer: coarse) {
|
|
@@ -384,7 +384,7 @@
|
|
|
384
384
|
label sticks to the top of the scroll area for Claude-Desktop-style headers. */
|
|
385
385
|
.ds-session-group { display: flex; flex-direction: column; }
|
|
386
386
|
.ds-session-group-rows { display: flex; flex-direction: column; gap: 2px; }
|
|
387
|
-
.ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-
|
|
387
|
+
.ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps); padding: var(--space-2) var(--space-2) var(--space-1); }
|
|
388
388
|
.ds-session-row {
|
|
389
389
|
position: relative; display: flex; align-items: center; gap: var(--space-2);
|
|
390
390
|
width: 100%; padding: var(--space-2); min-height: 52px; margin-bottom: 2px;
|
|
@@ -399,7 +399,7 @@
|
|
|
399
399
|
}
|
|
400
400
|
/* Rail tones MUST match .row.rail-* in app-shell.css so the same semantic state
|
|
401
401
|
reads as one colour across the conversation list and content rows. */
|
|
402
|
-
.ds-session-row.rail-green::before { background: var(--accent); }
|
|
402
|
+
.ds-session-row.rail-green::before { background: var(--accent-ink); }
|
|
403
403
|
.ds-session-row.rail-purple::before { background: var(--purple-2); }
|
|
404
404
|
.ds-session-row.rail-flame::before { background: var(--flame); }
|
|
405
405
|
.ds-session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
@@ -462,8 +462,8 @@
|
|
|
462
462
|
---------------------------------------------------------------------------- */
|
|
463
463
|
.ds-context { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
|
|
464
464
|
.ds-context .panel { background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-2); }
|
|
465
|
-
.ds-context .row .meta { font-family: var(--ff-mono); font-size: var(--fs-
|
|
466
|
-
.ds-context .row .sub { font-
|
|
465
|
+
.ds-context .row .meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-2); }
|
|
466
|
+
.ds-context .row .sub { font-size: var(--fs-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
467
467
|
.ds-context-actions { display: flex; gap: var(--space-2); }
|
|
468
468
|
|
|
469
469
|
/* ============================================================================
|
|
@@ -485,7 +485,7 @@
|
|
|
485
485
|
opacity: 0; transition: opacity var(--dur-snap, .12s) var(--ease, ease);
|
|
486
486
|
}
|
|
487
487
|
.chat-code-block:hover .chat-code-copy, .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
|
|
488
|
-
.chat-code-copy.is-copied { color: var(--accent); border-color: var(--accent); }
|
|
488
|
+
.chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
|
|
489
489
|
.chat-code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
|
|
490
490
|
/* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
|
|
491
491
|
.chat-code-head .spread { flex: 1; }
|
|
@@ -532,7 +532,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
|
|
|
532
532
|
|
|
533
533
|
/* --- C1: stale/idle dashboard status (static, NOT pulsing). --- */
|
|
534
534
|
.ds-dash-status.is-stale { color: var(--stale); }
|
|
535
|
-
.ds-dash-status.is-running { color: var(--accent); }
|
|
535
|
+
.ds-dash-status.is-running { color: var(--accent-ink); }
|
|
536
536
|
|
|
537
537
|
/* --- C2: dashboard sort/filter toolbar + stream-state line. --- */
|
|
538
538
|
/* The toolbar is part of the ONE header row (count | heartbeat ... filter,
|
|
@@ -548,6 +548,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
|
|
|
548
548
|
width: auto; border-radius: var(--r-1);
|
|
549
549
|
}
|
|
550
550
|
.ds-dash-stream { font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
551
|
+
.ds-dash-stream.is-connected { color: var(--accent-ink); }
|
|
551
552
|
.ds-dash-stream.is-lost { color: var(--flame); }
|
|
552
553
|
.ds-dash-stream.is-connecting { color: var(--amber); }
|
|
553
554
|
.ds-dash-header .spread { flex: 1; }
|
|
@@ -566,7 +567,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
|
|
|
566
567
|
border: none; background: none; color: var(--fg-3);
|
|
567
568
|
font-family: var(--ff-mono); font-size: var(--fs-sm);
|
|
568
569
|
}
|
|
569
|
-
.ds-dash-select[aria-checked="true"] { color: var(--accent); }
|
|
570
|
+
.ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
|
|
570
571
|
.ds-dash-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
571
572
|
|
|
572
573
|
/* --- C5: active dashboard card (current conversation). --- */
|
|
@@ -576,6 +577,8 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
|
|
|
576
577
|
agent is flagged in a dense grid, not merely faded near-invisibly. The word
|
|
577
578
|
'idle' co-carries state, so this stays colour-blind safe. */
|
|
578
579
|
.ds-dash-card.is-stale { box-shadow: inset 2px 0 0 var(--stale); }
|
|
580
|
+
/* Active identity always wins over stale amber when both classes are present. */
|
|
581
|
+
.ds-dash-card.is-active.is-stale { box-shadow: inset 2px 0 0 var(--accent); }
|
|
579
582
|
|
|
580
583
|
/* --- H3: dashboard live disc pulses; stale/error do not (handled by H1). --- */
|
|
581
584
|
|
|
@@ -728,7 +731,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
|
|
|
728
731
|
|
|
729
732
|
/* Dashboard: shared session title heading (same string as the rails). */
|
|
730
733
|
.ds-dash-title {
|
|
731
|
-
font-size: var(--fs-
|
|
734
|
+
font-size: var(--fs-sm); font-weight: 600; color: var(--fg);
|
|
732
735
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
733
736
|
}
|
|
734
737
|
|
|
@@ -762,7 +765,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
|
|
|
762
765
|
.chat-msg-flat .chat-stack { max-width: var(--measure); width: 100%; margin: 0; align-items: stretch; }
|
|
763
766
|
.chat-msg-flat.you .chat-stack { align-items: stretch; }
|
|
764
767
|
.chat-role { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); margin-bottom: var(--space-1); }
|
|
765
|
-
.chat-msg-flat.you .chat-role { color: var(--accent); }
|
|
768
|
+
.chat-msg-flat.you .chat-role { color: var(--accent-ink); }
|
|
766
769
|
.chat-msg-flat .chat-bubble { background: none; border: none; border-radius: 0; padding: 0; max-width: 100%; box-shadow: none; transform: none; }
|
|
767
770
|
.chat-msg-flat.you .chat-bubble { background: none; color: inherit; }
|
|
768
771
|
/* Flat user turns reset their bubble to transparent, but the messenger rule
|
|
@@ -835,7 +838,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
|
|
|
835
838
|
padding: 2px var(--space-2); border-radius: var(--r-pill);
|
|
836
839
|
background: color-mix(in oklab, var(--fg) 6%, transparent);
|
|
837
840
|
}
|
|
838
|
-
.chat-msg .chat-tool.tool-running .chat-tool-status { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
|
|
841
|
+
.chat-msg .chat-tool.tool-running .chat-tool-status { color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 12%, transparent); }
|
|
839
842
|
.chat-msg .chat-tool.tool-error .chat-tool-status { color: var(--flame); background: color-mix(in oklab, var(--flame) 12%, transparent); }
|
|
840
843
|
/* Completed tool: a positive (success) tone so done reads distinctly from the
|
|
841
844
|
neutral pill and from the accent-toned running pill (--success = green-2). */
|
|
@@ -900,7 +903,7 @@ button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(-
|
|
|
900
903
|
shape, not hue alone. CSS-drawn discs, not glyphs (glyph policy clean). */
|
|
901
904
|
.ds-dash-breakdown .seg { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }
|
|
902
905
|
.ds-dash-breakdown .seg::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; }
|
|
903
|
-
.ds-dash-breakdown .seg.is-running { color: var(--accent); }
|
|
906
|
+
.ds-dash-breakdown .seg.is-running { color: var(--accent-ink); }
|
|
904
907
|
.ds-dash-breakdown .seg.is-running::before { background: var(--accent); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 30%, transparent); }
|
|
905
908
|
.ds-dash-breakdown .seg.is-error { color: var(--flame); }
|
|
906
909
|
.ds-dash-breakdown .seg.is-error::before { background: var(--flame); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--flame) 38%, transparent); }
|
package/dist/247420.css
CHANGED
|
@@ -1129,7 +1129,7 @@
|
|
|
1129
1129
|
.ds-247420 .row.rail-green::before,
|
|
1130
1130
|
.ds-247420 .row.rail-purple::before,
|
|
1131
1131
|
.ds-247420 .row.rail-flame::before { height: 56%; opacity: 1; }
|
|
1132
|
-
.ds-247420 .row.rail-green::before { background: var(--accent); }
|
|
1132
|
+
.ds-247420 .row.rail-green::before { background: var(--accent-ink); }
|
|
1133
1133
|
.ds-247420 .row.rail-purple::before { background: var(--purple-2); }
|
|
1134
1134
|
.ds-247420 .row.rail-flame::before { background: var(--flame); }
|
|
1135
1135
|
/* Differentiate the rail by SHAPE, not hue alone (color-blind safety): error
|
|
@@ -3822,6 +3822,8 @@
|
|
|
3822
3822
|
.ds-247420 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
|
|
3823
3823
|
.ds-247420 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
|
3824
3824
|
.ds-247420 .ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
3825
|
+
.ds-247420 .ws-rail-item-flag { width: 6px; height: 6px; border-radius: 50%; flex: none; }
|
|
3826
|
+
.ds-247420 .ws-rail-item-flag.tone-flame { background: var(--flame); box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 38%, transparent); }
|
|
3825
3827
|
.ds-247420 .ws-rail-foot { margin-top: auto; padding-top: var(--space-2); border-top: var(--bw-hair) solid var(--bg-3); }
|
|
3826
3828
|
|
|
3827
3829
|
/* Collapsed rail: icon-only — hide text labels, center icons, drop toggle's far-right pin */
|
|
@@ -3847,7 +3849,7 @@
|
|
|
3847
3849
|
/* Crumb band is the top chrome of the content column: a stable height so the
|
|
3848
3850
|
top edge aligns with the rail head, and a left gutter matching .ws-main so
|
|
3849
3851
|
the trail text is not flush against the rail border. */
|
|
3850
|
-
.ds-247420 .ws-crumb { flex: 0 0 auto; min-height:
|
|
3852
|
+
.ds-247420 .ws-crumb { flex: 0 0 auto; min-height: calc(var(--app-crumb-h) + var(--space-3)); padding: 0 var(--space-5); display: flex; align-items: center; gap: var(--space-1); border-bottom: var(--bw-hair) solid var(--bg-3); }
|
|
3851
3853
|
.ds-247420 .ws-crumb-main { flex: 1 1 auto; min-width: 0; }
|
|
3852
3854
|
/* Content column gutter. Claude-Code-class calm: file grid / dashboard / event
|
|
3853
3855
|
list / history get a generous, consistent inner gutter instead of butting
|
|
@@ -4042,6 +4044,23 @@
|
|
|
4042
4044
|
/* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
|
|
4043
4045
|
.ds-247420 .ds-file-act:disabled { opacity: .45; cursor: default; }
|
|
4044
4046
|
.ds-247420 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
|
|
4047
|
+
.ds-247420 .ds-file-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
4048
|
+
|
|
4049
|
+
/* ============================================================
|
|
4050
|
+
Print — linearize WorkspaceShell so main content prints in full.
|
|
4051
|
+
The multi-column CSS grid with overflow:auto regions clips at
|
|
4052
|
+
the on-screen height in print/PDF; drop all chrome and let
|
|
4053
|
+
.ws-main expand to its natural document height.
|
|
4054
|
+
============================================================ */
|
|
4055
|
+
@media print {
|
|
4056
|
+
.ds-247420 .ws-shell { display: block; }
|
|
4057
|
+
.ds-247420 .ws-rail,
|
|
4058
|
+
.ds-247420 .ws-sessions,
|
|
4059
|
+
.ds-247420 .ws-pane,
|
|
4060
|
+
.ds-247420 .ws-crumb,
|
|
4061
|
+
.ds-247420 .app-status { display: none; }
|
|
4062
|
+
.ds-247420 .ws-main { overflow: visible; height: auto; }
|
|
4063
|
+
}
|
|
4045
4064
|
|
|
4046
4065
|
/* community.css */
|
|
4047
4066
|
/* ============================================================
|
|
@@ -5921,7 +5940,7 @@
|
|
|
5921
5940
|
/* Live: a persistent faint concentric ring (resting shape channel, independent
|
|
5922
5941
|
of motion) with the pulse layered on top — so even at the pulse trough the
|
|
5923
5942
|
disc reads as solid-fill + ring, never a bare solid that aliases stale. */
|
|
5924
|
-
.ds-247420 .status-dot-disc.status-dot-live { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent); animation: status-disc-pulse 1.8s ease-in-out infinite; }
|
|
5943
|
+
.ds-247420 .status-dot-disc.status-dot-live { background: var(--accent-ink); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-ink) 30%, transparent); animation: status-disc-pulse 1.8s ease-in-out infinite; }
|
|
5925
5944
|
.ds-247420 .status-dot-disc.status-dot-error { background: var(--flame); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--flame) 38%, transparent); }
|
|
5926
5945
|
.ds-247420 .status-dot-disc.status-dot-connecting { background: transparent; box-shadow: inset 0 0 0 2px var(--amber); }
|
|
5927
5946
|
/* Stale: a muted ring with a hollow centre — silhouette distinct from live's
|
|
@@ -5959,7 +5978,7 @@
|
|
|
5959
5978
|
.ds-247420 .ds-session-new:hover { background: var(--bg-2); color: var(--fg); }
|
|
5960
5979
|
/* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
|
|
5961
5980
|
radius/focus-ring); only the rail layout + touch floor live here. */
|
|
5962
|
-
.ds-247420 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; }
|
|
5981
|
+
.ds-247420 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
|
|
5963
5982
|
.ds-247420 .ds-session-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
5964
5983
|
/* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
|
|
5965
5984
|
@media (pointer: coarse) {
|
|
@@ -5971,7 +5990,7 @@
|
|
|
5971
5990
|
label sticks to the top of the scroll area for Claude-Desktop-style headers. */
|
|
5972
5991
|
.ds-247420 .ds-session-group { display: flex; flex-direction: column; }
|
|
5973
5992
|
.ds-247420 .ds-session-group-rows { display: flex; flex-direction: column; gap: 2px; }
|
|
5974
|
-
.ds-247420 .ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-
|
|
5993
|
+
.ds-247420 .ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps); padding: var(--space-2) var(--space-2) var(--space-1); }
|
|
5975
5994
|
.ds-247420 .ds-session-row {
|
|
5976
5995
|
position: relative; display: flex; align-items: center; gap: var(--space-2);
|
|
5977
5996
|
width: 100%; padding: var(--space-2); min-height: 52px; margin-bottom: 2px;
|
|
@@ -5986,7 +6005,7 @@
|
|
|
5986
6005
|
}
|
|
5987
6006
|
/* Rail tones MUST match .row.rail-* in app-shell.css so the same semantic state
|
|
5988
6007
|
reads as one colour across the conversation list and content rows. */
|
|
5989
|
-
.ds-247420 .ds-session-row.rail-green::before { background: var(--accent); }
|
|
6008
|
+
.ds-247420 .ds-session-row.rail-green::before { background: var(--accent-ink); }
|
|
5990
6009
|
.ds-247420 .ds-session-row.rail-purple::before { background: var(--purple-2); }
|
|
5991
6010
|
.ds-247420 .ds-session-row.rail-flame::before { background: var(--flame); }
|
|
5992
6011
|
.ds-247420 .ds-session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
@@ -6049,8 +6068,8 @@
|
|
|
6049
6068
|
---------------------------------------------------------------------------- */
|
|
6050
6069
|
.ds-247420 .ds-context { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
|
|
6051
6070
|
.ds-247420 .ds-context .panel { background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-2); }
|
|
6052
|
-
.ds-247420 .ds-context .row .meta { font-family: var(--ff-mono); font-size: var(--fs-
|
|
6053
|
-
.ds-247420 .ds-context .row .sub { font-
|
|
6071
|
+
.ds-247420 .ds-context .row .meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-2); }
|
|
6072
|
+
.ds-247420 .ds-context .row .sub { font-size: var(--fs-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
6054
6073
|
.ds-247420 .ds-context-actions { display: flex; gap: var(--space-2); }
|
|
6055
6074
|
|
|
6056
6075
|
/* ============================================================================
|
|
@@ -6072,7 +6091,7 @@
|
|
|
6072
6091
|
opacity: 0; transition: opacity var(--dur-snap, .12s) var(--ease, ease);
|
|
6073
6092
|
}
|
|
6074
6093
|
.ds-247420 .chat-code-block:hover .chat-code-copy, .ds-247420 .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
|
|
6075
|
-
.ds-247420 .chat-code-copy.is-copied { color: var(--accent); border-color: var(--accent); }
|
|
6094
|
+
.ds-247420 .chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
|
|
6076
6095
|
.ds-247420 .chat-code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
|
|
6077
6096
|
/* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
|
|
6078
6097
|
.ds-247420 .chat-code-head .spread { flex: 1; }
|
|
@@ -6119,7 +6138,7 @@
|
|
|
6119
6138
|
|
|
6120
6139
|
/* --- C1: stale/idle dashboard status (static, NOT pulsing). --- */
|
|
6121
6140
|
.ds-247420 .ds-dash-status.is-stale { color: var(--stale); }
|
|
6122
|
-
.ds-247420 .ds-dash-status.is-running { color: var(--accent); }
|
|
6141
|
+
.ds-247420 .ds-dash-status.is-running { color: var(--accent-ink); }
|
|
6123
6142
|
|
|
6124
6143
|
/* --- C2: dashboard sort/filter toolbar + stream-state line. --- */
|
|
6125
6144
|
/* The toolbar is part of the ONE header row (count | heartbeat ... filter,
|
|
@@ -6135,6 +6154,7 @@
|
|
|
6135
6154
|
width: auto; border-radius: var(--r-1);
|
|
6136
6155
|
}
|
|
6137
6156
|
.ds-247420 .ds-dash-stream { font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
6157
|
+
.ds-247420 .ds-dash-stream.is-connected { color: var(--accent-ink); }
|
|
6138
6158
|
.ds-247420 .ds-dash-stream.is-lost { color: var(--flame); }
|
|
6139
6159
|
.ds-247420 .ds-dash-stream.is-connecting { color: var(--amber); }
|
|
6140
6160
|
.ds-247420 .ds-dash-header .spread { flex: 1; }
|
|
@@ -6153,7 +6173,7 @@
|
|
|
6153
6173
|
border: none; background: none; color: var(--fg-3);
|
|
6154
6174
|
font-family: var(--ff-mono); font-size: var(--fs-sm);
|
|
6155
6175
|
}
|
|
6156
|
-
.ds-247420 .ds-dash-select[aria-checked="true"] { color: var(--accent); }
|
|
6176
|
+
.ds-247420 .ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
|
|
6157
6177
|
.ds-247420 .ds-dash-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
6158
6178
|
|
|
6159
6179
|
/* --- C5: active dashboard card (current conversation). --- */
|
|
@@ -6163,6 +6183,8 @@
|
|
|
6163
6183
|
agent is flagged in a dense grid, not merely faded near-invisibly. The word
|
|
6164
6184
|
'idle' co-carries state, so this stays colour-blind safe. */
|
|
6165
6185
|
.ds-247420 .ds-dash-card.is-stale { box-shadow: inset 2px 0 0 var(--stale); }
|
|
6186
|
+
/* Active identity always wins over stale amber when both classes are present. */
|
|
6187
|
+
.ds-247420 .ds-dash-card.is-active.is-stale { box-shadow: inset 2px 0 0 var(--accent); }
|
|
6166
6188
|
|
|
6167
6189
|
/* --- H3: dashboard live disc pulses; stale/error do not (handled by H1). --- */
|
|
6168
6190
|
|
|
@@ -6315,7 +6337,7 @@
|
|
|
6315
6337
|
|
|
6316
6338
|
/* Dashboard: shared session title heading (same string as the rails). */
|
|
6317
6339
|
.ds-247420 .ds-dash-title {
|
|
6318
|
-
font-size: var(--fs-
|
|
6340
|
+
font-size: var(--fs-sm); font-weight: 600; color: var(--fg);
|
|
6319
6341
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
6320
6342
|
}
|
|
6321
6343
|
|
|
@@ -6349,7 +6371,7 @@
|
|
|
6349
6371
|
.ds-247420 .chat-msg-flat .chat-stack { max-width: var(--measure); width: 100%; margin: 0; align-items: stretch; }
|
|
6350
6372
|
.ds-247420 .chat-msg-flat.you .chat-stack { align-items: stretch; }
|
|
6351
6373
|
.ds-247420 .chat-role { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); margin-bottom: var(--space-1); }
|
|
6352
|
-
.ds-247420 .chat-msg-flat.you .chat-role { color: var(--accent); }
|
|
6374
|
+
.ds-247420 .chat-msg-flat.you .chat-role { color: var(--accent-ink); }
|
|
6353
6375
|
.ds-247420 .chat-msg-flat .chat-bubble { background: none; border: none; border-radius: 0; padding: 0; max-width: 100%; box-shadow: none; transform: none; }
|
|
6354
6376
|
.ds-247420 .chat-msg-flat.you .chat-bubble { background: none; color: inherit; }
|
|
6355
6377
|
/* Flat user turns reset their bubble to transparent, but the messenger rule
|
|
@@ -6422,7 +6444,7 @@
|
|
|
6422
6444
|
padding: 2px var(--space-2); border-radius: var(--r-pill);
|
|
6423
6445
|
background: color-mix(in oklab, var(--fg) 6%, transparent);
|
|
6424
6446
|
}
|
|
6425
|
-
.ds-247420 .chat-msg .chat-tool.tool-running .chat-tool-status { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
|
|
6447
|
+
.ds-247420 .chat-msg .chat-tool.tool-running .chat-tool-status { color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 12%, transparent); }
|
|
6426
6448
|
.ds-247420 .chat-msg .chat-tool.tool-error .chat-tool-status { color: var(--flame); background: color-mix(in oklab, var(--flame) 12%, transparent); }
|
|
6427
6449
|
/* Completed tool: a positive (success) tone so done reads distinctly from the
|
|
6428
6450
|
neutral pill and from the accent-toned running pill (--success = green-2). */
|
|
@@ -6487,7 +6509,7 @@
|
|
|
6487
6509
|
shape, not hue alone. CSS-drawn discs, not glyphs (glyph policy clean). */
|
|
6488
6510
|
.ds-247420 .ds-dash-breakdown .seg { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }
|
|
6489
6511
|
.ds-247420 .ds-dash-breakdown .seg::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; }
|
|
6490
|
-
.ds-247420 .ds-dash-breakdown .seg.is-running { color: var(--accent); }
|
|
6512
|
+
.ds-247420 .ds-dash-breakdown .seg.is-running { color: var(--accent-ink); }
|
|
6491
6513
|
.ds-247420 .ds-dash-breakdown .seg.is-running::before { background: var(--accent); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 30%, transparent); }
|
|
6492
6514
|
.ds-247420 .ds-dash-breakdown .seg.is-error { color: var(--flame); }
|
|
6493
6515
|
.ds-247420 .ds-dash-breakdown .seg.is-error::before { background: var(--flame); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--flame) 38%, transparent); }
|