feat: refine workbench visuals and map controls
Unify the Agent history extension with the header acrylic surface, preserve the full conversation body, and consolidate shared control and status styling. Restore map flow and SCADA controller behavior, remove obsolete rendering paths, and extend regression coverage. Button press coverage now releases outside the target so state assertions cannot accidentally toggle the control.
This commit is contained in:
+527
-128
@@ -65,6 +65,44 @@
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
|
||||
:where(*) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
:where(*)::-webkit-scrollbar {
|
||||
width: var(--scrollbar-size);
|
||||
height: var(--scrollbar-size);
|
||||
}
|
||||
|
||||
:where(*)::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:where(*)::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: var(--scrollbar-radius);
|
||||
}
|
||||
|
||||
:where(*):hover::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
:where(*)::-webkit-scrollbar-thumb:active {
|
||||
background: var(--scrollbar-thumb-active);
|
||||
}
|
||||
|
||||
:where(*)::-webkit-scrollbar-corner {
|
||||
background: var(--scrollbar-track);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:where(*) {
|
||||
scrollbar-color: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -75,11 +113,27 @@
|
||||
--acrylic-navigation: rgba(234, 243, 250, 0.64);
|
||||
--acrylic-panel: rgba(223, 235, 246, 0.56);
|
||||
--acrylic-control: rgba(242, 248, 253, 0.74);
|
||||
--agent-floating-reading-surface: rgba(235, 244, 251, 0.82);
|
||||
--agent-floating-reading-item: rgba(249, 251, 254, 0.72);
|
||||
--agent-floating-reading-item-hover: rgba(249, 251, 254, 0.9);
|
||||
--agent-floating-reading-active: rgba(219, 234, 254, 0.82);
|
||||
--agent-user-message-surface: rgba(224, 229, 249, 0.92);
|
||||
--agent-user-message-border: rgba(79, 70, 229, 0.22);
|
||||
--agent-white-acrylic-surface: rgba(255, 255, 255, 0.86);
|
||||
--agent-operational-surface: rgba(255, 255, 255, 0.86);
|
||||
--acrylic-panel-blur: 24px;
|
||||
--acrylic-control-blur: 18px;
|
||||
--acrylic-backdrop-saturation: 1.08;
|
||||
--agent-floating-acrylic-backdrop: blur(var(--acrylic-control-blur))
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
--acrylic-exclusion: rgba(255, 255, 255, 0.035);
|
||||
--acrylic-luminosity: rgba(255, 255, 255, 0.1);
|
||||
--scrollbar-size: 4px;
|
||||
--scrollbar-radius: 2px;
|
||||
--scrollbar-track: transparent;
|
||||
--scrollbar-thumb: rgba(100, 116, 139, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(100, 116, 139, 0.3);
|
||||
--scrollbar-thumb-active: rgba(71, 85, 105, 0.36);
|
||||
--acrylic-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.035'/%3E%3C/svg%3E");
|
||||
--acrylic-border: rgba(255, 255, 255, 0.52);
|
||||
--acrylic-outline: rgba(63, 83, 108, 0.18);
|
||||
@@ -88,6 +142,10 @@
|
||||
--shadow-panel: 0 12px 32px rgba(15, 33, 55, 0.14);
|
||||
--shadow-control: 0 6px 18px rgba(15, 33, 55, 0.1);
|
||||
--shadow-transient: 0 14px 34px rgba(15, 33, 55, 0.18);
|
||||
--shadow-agent-floating:
|
||||
0 18px 42px rgba(15, 33, 55, 0.18), 0 4px 12px rgba(15, 33, 55, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.72);
|
||||
--shadow-agent-operational: 0 12px 32px rgba(15, 33, 55, 0.14), 0 3px 10px rgba(15, 33, 55, 0.08);
|
||||
--surface-dock: oklch(96.5% 0.012 248);
|
||||
--surface-control: rgba(239, 246, 252, 0.92);
|
||||
--surface-well: rgba(213, 227, 239, 0.66);
|
||||
@@ -96,26 +154,51 @@
|
||||
--surface-border: oklch(86.5% 0.012 250);
|
||||
--surface-divider: oklch(90.5% 0.009 250);
|
||||
--surface-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
|
||||
--dock-shadow: 8px 0 24px rgba(15, 23, 42, 0.07);
|
||||
--radius-icon: 8px;
|
||||
--radius-control: 12px;
|
||||
--radius-panel: 16px;
|
||||
--radius-pill: 9999px;
|
||||
--action-blue: #2563eb;
|
||||
--action-blue-hover: #1d4ed8;
|
||||
--action-blue-soft: #dbeafe;
|
||||
--action-blue-pressed: #1e40af;
|
||||
--action-soft: oklch(96.8% 0.018 255.5);
|
||||
--action-soft-pressed: oklch(94.8% 0.028 255.5);
|
||||
--action-selection-soft: #e8f1ff;
|
||||
--action-selection-soft-hover: #dbeafe;
|
||||
--action-selection-soft-pressed: #cfe2ff;
|
||||
--action-selection-border: rgba(59, 130, 246, 0.2);
|
||||
--action-border: oklch(88.2% 0.015 250);
|
||||
--action-border-hover: rgba(37, 99, 235, 0.3);
|
||||
--action-border-pressed: rgba(37, 99, 235, 0.44);
|
||||
--action-danger: #dc2626;
|
||||
--action-danger-hover: #b91c1c;
|
||||
--action-danger-pressed: #991b1b;
|
||||
--action-focus-ring: rgba(37, 99, 235, 0.34);
|
||||
--action-focus-offset: rgba(250, 252, 254, 0.96);
|
||||
--action-shadow-primary: 0 5px 12px rgba(37, 99, 235, 0.2);
|
||||
--action-shadow-secondary: 0 2px 5px rgba(15, 33, 55, 0.08);
|
||||
--action-shadow-primary-pressed: 0 1px 3px rgba(30, 64, 175, 0.18);
|
||||
--action-shadow-secondary-pressed: 0 1px 2px rgba(15, 33, 55, 0.06);
|
||||
--ink: #0f172a;
|
||||
--ink-secondary: #334155;
|
||||
--ink-muted: #64748b;
|
||||
--border-soft: var(--surface-divider);
|
||||
--border-strong: var(--surface-border);
|
||||
--tone-info: oklch(95% 0.035 250);
|
||||
--tone-normal: oklch(95% 0.04 175);
|
||||
--tone-warning: oklch(95% 0.05 70);
|
||||
--tone-danger: oklch(95% 0.045 25);
|
||||
--status-neutral-soft: oklch(96.9% 0.005 247.9);
|
||||
--status-neutral-border: oklch(90.6% 0.013 244.3);
|
||||
--status-neutral-foreground: oklch(46.5% 0.04 253.9);
|
||||
--status-neutral-mark: oklch(66% 0.039 253.6);
|
||||
--status-info-soft: oklch(97.1% 0.011 256.7);
|
||||
--status-info-border: oklch(90.7% 0.031 252.7);
|
||||
--status-info-foreground: oklch(48.9% 0.124 258);
|
||||
--status-info-mark: oklch(59.7% 0.124 257.2);
|
||||
--status-success-soft: oklch(97.2% 0.011 158.8);
|
||||
--status-success-border: oklch(90.4% 0.031 159);
|
||||
--status-success-foreground: oklch(51.2% 0.086 163.6);
|
||||
--status-success-mark: oklch(62% 0.107 162);
|
||||
--status-warning-soft: oklch(97.2% 0.016 82.8);
|
||||
--status-warning-border: oklch(89.5% 0.049 77.2);
|
||||
--status-warning-foreground: oklch(51.8% 0.105 62.8);
|
||||
--status-warning-mark: oklch(67.2% 0.126 65.2);
|
||||
--status-danger-soft: oklch(96.5% 0.01 17.3);
|
||||
--status-danger-border: oklch(87.8% 0.031 17.8);
|
||||
--status-danger-foreground: oklch(50.5% 0.118 22.2);
|
||||
--status-danger-mark: oklch(62.6% 0.142 22);
|
||||
--tone-agent: oklch(95% 0.035 290);
|
||||
--scrim-soft: rgba(15, 23, 42, 0.2);
|
||||
--scrim-focus: rgba(15, 23, 42, 0.48);
|
||||
--background: 210 40% 98%;
|
||||
--foreground: 222 47% 11%;
|
||||
--card: 0 0% 100%;
|
||||
@@ -138,24 +221,18 @@
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
[data-basemap-tone="light"] {
|
||||
--acrylic-navigation: rgba(234, 243, 250, 0.64);
|
||||
--acrylic-panel: rgba(223, 235, 246, 0.56);
|
||||
--acrylic-control: rgba(242, 248, 253, 0.74);
|
||||
--acrylic-panel-blur: 24px;
|
||||
--acrylic-control-blur: 18px;
|
||||
--acrylic-backdrop-saturation: 1.08;
|
||||
--acrylic-luminosity: rgba(255, 255, 255, 0.1);
|
||||
--surface-control: rgba(239, 246, 252, 0.92);
|
||||
--surface-well: rgba(213, 227, 239, 0.66);
|
||||
--surface-reading: rgba(250, 252, 254, 0.96);
|
||||
--glass-transient: rgba(232, 242, 250, 0.66);
|
||||
}
|
||||
|
||||
[data-basemap-tone="satellite"] {
|
||||
--acrylic-navigation: rgba(232, 241, 249, 0.8);
|
||||
--acrylic-panel: rgba(220, 232, 243, 0.72);
|
||||
--acrylic-control: rgba(241, 247, 252, 0.86);
|
||||
--agent-floating-reading-surface: rgba(228, 239, 247, 0.88);
|
||||
--agent-floating-reading-item: rgba(247, 251, 254, 0.78);
|
||||
--agent-floating-reading-item-hover: rgba(249, 252, 255, 0.92);
|
||||
--agent-floating-reading-active: rgba(219, 234, 254, 0.88);
|
||||
--agent-user-message-surface: rgba(222, 227, 249, 0.94);
|
||||
--agent-user-message-border: rgba(79, 70, 229, 0.28);
|
||||
--agent-white-acrylic-surface: rgba(255, 255, 255, 0.9);
|
||||
--agent-operational-surface: rgba(255, 255, 255, 0.9);
|
||||
--acrylic-panel-blur: 24px;
|
||||
--acrylic-control-blur: 18px;
|
||||
--acrylic-backdrop-saturation: 1.02;
|
||||
@@ -169,6 +246,10 @@
|
||||
--shadow-panel: 0 14px 36px rgba(7, 18, 32, 0.22);
|
||||
--shadow-control: 0 7px 20px rgba(7, 18, 32, 0.16);
|
||||
--shadow-transient: 0 16px 38px rgba(7, 18, 32, 0.26);
|
||||
--shadow-agent-floating:
|
||||
0 20px 46px rgba(7, 18, 32, 0.26), 0 5px 14px rgba(7, 18, 32, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.68);
|
||||
--shadow-agent-operational: 0 14px 36px rgba(7, 18, 32, 0.2), 0 4px 12px rgba(7, 18, 32, 0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -188,12 +269,91 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible {
|
||||
outline: 2px solid #0f172a;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
button:not([data-slot="button"]) {
|
||||
transition-duration: 120ms;
|
||||
transition-property: color, background-color, border-color, box-shadow, filter, outline-color;
|
||||
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
button:not([data-slot="button"]):focus-visible {
|
||||
outline: 2px solid var(--action-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button:not([data-slot="button"]):not(:disabled):active {
|
||||
filter: brightness(0.97) saturate(1.02);
|
||||
outline: 1px solid var(--action-border-pressed);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
button.action-control[aria-pressed="true"]:not(:disabled) {
|
||||
border-color: var(--action-blue);
|
||||
background-color: var(--action-blue);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
button.action-control[aria-pressed="true"]:not(:disabled):hover {
|
||||
border-color: var(--action-blue-hover);
|
||||
background-color: var(--action-blue-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
button.action-control[aria-pressed="true"]:not(:disabled):active {
|
||||
border-color: var(--action-blue-pressed);
|
||||
background-color: var(--action-blue-pressed);
|
||||
color: #ffffff;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled) {
|
||||
border-color: var(--action-selection-border);
|
||||
background-color: var(--action-selection-soft);
|
||||
color: var(--action-blue);
|
||||
}
|
||||
|
||||
button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled)
|
||||
.header-control-icon {
|
||||
background-color: rgba(255, 255, 255, 0.68);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):hover {
|
||||
border-color: var(--action-border-hover);
|
||||
background-color: var(--action-selection-soft-hover);
|
||||
color: var(--action-blue);
|
||||
}
|
||||
|
||||
button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):hover
|
||||
.header-control-icon {
|
||||
background-color: rgba(255, 255, 255, 0.82);
|
||||
color: var(--action-blue);
|
||||
}
|
||||
}
|
||||
|
||||
button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):active {
|
||||
border-color: var(--action-border-pressed);
|
||||
background-color: var(--action-selection-soft-pressed);
|
||||
color: var(--action-blue-hover);
|
||||
box-shadow: var(--action-shadow-secondary-pressed);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.map-grid {
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)),
|
||||
@@ -210,10 +370,6 @@ input:focus-visible {
|
||||
.acrylic-panel,
|
||||
.acrylic-control,
|
||||
.glass-transient,
|
||||
.material-tone-info,
|
||||
.material-tone-normal,
|
||||
.material-tone-warning,
|
||||
.material-tone-danger,
|
||||
.material-tone-agent {
|
||||
border-color: var(--surface-border);
|
||||
background-clip: padding-box;
|
||||
@@ -249,6 +405,13 @@ input:focus-visible {
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
.agent-panel-shell.acrylic-panel,
|
||||
.mobile-workbench-sheet:has(.agent-panel-shell) {
|
||||
background-color: var(--agent-floating-reading-surface);
|
||||
backdrop-filter: var(--agent-floating-acrylic-backdrop);
|
||||
-webkit-backdrop-filter: var(--agent-floating-acrylic-backdrop);
|
||||
}
|
||||
|
||||
.acrylic-control {
|
||||
background-color: var(--acrylic-control);
|
||||
box-shadow:
|
||||
@@ -294,32 +457,101 @@ input:focus-visible {
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
.material-tone-info {
|
||||
background-color: var(--tone-info);
|
||||
box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.42);
|
||||
}
|
||||
|
||||
.material-tone-normal {
|
||||
background-color: var(--tone-normal);
|
||||
box-shadow: inset 0 1px 0 rgba(94, 234, 212, 0.4);
|
||||
}
|
||||
|
||||
.material-tone-warning {
|
||||
background-color: var(--tone-warning);
|
||||
box-shadow: inset 0 1px 0 rgba(253, 186, 116, 0.46);
|
||||
}
|
||||
|
||||
.material-tone-danger {
|
||||
background-color: var(--tone-danger);
|
||||
box-shadow: inset 0 1px 0 rgba(252, 165, 165, 0.48);
|
||||
}
|
||||
|
||||
.material-tone-agent {
|
||||
background-color: var(--tone-agent);
|
||||
box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.42);
|
||||
}
|
||||
|
||||
.status-tone-neutral {
|
||||
--status-soft: var(--status-neutral-soft);
|
||||
--status-border: var(--status-neutral-border);
|
||||
--status-foreground: var(--status-neutral-foreground);
|
||||
--status-mark: var(--status-neutral-mark);
|
||||
}
|
||||
|
||||
.status-tone-info {
|
||||
--status-soft: var(--status-info-soft);
|
||||
--status-border: var(--status-info-border);
|
||||
--status-foreground: var(--status-info-foreground);
|
||||
--status-mark: var(--status-info-mark);
|
||||
}
|
||||
|
||||
.status-tone-success {
|
||||
--status-soft: var(--status-success-soft);
|
||||
--status-border: var(--status-success-border);
|
||||
--status-foreground: var(--status-success-foreground);
|
||||
--status-mark: var(--status-success-mark);
|
||||
}
|
||||
|
||||
.status-tone-warning {
|
||||
--status-soft: var(--status-warning-soft);
|
||||
--status-border: var(--status-warning-border);
|
||||
--status-foreground: var(--status-warning-foreground);
|
||||
--status-mark: var(--status-warning-mark);
|
||||
}
|
||||
|
||||
.status-tone-danger {
|
||||
--status-soft: var(--status-danger-soft);
|
||||
--status-border: var(--status-danger-border);
|
||||
--status-foreground: var(--status-danger-foreground);
|
||||
--status-mark: var(--status-danger-mark);
|
||||
}
|
||||
|
||||
.status-badge,
|
||||
.status-icon {
|
||||
border-color: var(--status-border);
|
||||
background-color: var(--status-soft);
|
||||
color: var(--status-foreground);
|
||||
}
|
||||
|
||||
.status-icon[data-selected="true"] {
|
||||
--status-border: var(--action-blue);
|
||||
--status-soft: var(--action-blue);
|
||||
--status-foreground: #ffffff;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
background-color: var(--status-mark);
|
||||
}
|
||||
|
||||
.status-dot[data-activity="live"] {
|
||||
animation: status-live 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.status-glyph[data-activity="loading"] {
|
||||
animation: status-spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes status-live {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes status-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||
:root,
|
||||
[data-basemap-tone] {
|
||||
--agent-floating-reading-surface: rgba(250, 252, 255, 0.98);
|
||||
--agent-floating-reading-item: rgba(250, 252, 255, 0.98);
|
||||
--agent-floating-reading-item-hover: rgba(255, 255, 255, 0.98);
|
||||
--agent-floating-reading-active: rgba(232, 241, 255, 0.98);
|
||||
--agent-user-message-surface: rgba(238, 240, 252, 0.98);
|
||||
--agent-white-acrylic-surface: rgba(255, 255, 255, 0.98);
|
||||
--agent-operational-surface: rgba(255, 255, 255, 0.98);
|
||||
--agent-floating-acrylic-backdrop: none;
|
||||
}
|
||||
|
||||
.acrylic-navigation,
|
||||
.acrylic-panel,
|
||||
.acrylic-control,
|
||||
@@ -332,6 +564,18 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
:root,
|
||||
[data-basemap-tone] {
|
||||
--agent-floating-reading-surface: rgba(250, 252, 255, 0.98);
|
||||
--agent-floating-reading-item: rgba(250, 252, 255, 0.98);
|
||||
--agent-floating-reading-item-hover: rgba(255, 255, 255, 0.98);
|
||||
--agent-floating-reading-active: rgba(232, 241, 255, 0.98);
|
||||
--agent-user-message-surface: rgba(238, 240, 252, 0.98);
|
||||
--agent-white-acrylic-surface: rgba(255, 255, 255, 0.98);
|
||||
--agent-operational-surface: rgba(255, 255, 255, 0.98);
|
||||
--agent-floating-acrylic-backdrop: none;
|
||||
}
|
||||
|
||||
.acrylic-navigation,
|
||||
.acrylic-panel,
|
||||
.acrylic-control,
|
||||
@@ -349,28 +593,25 @@ input:focus-visible {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.material-tone-info {
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
.material-tone-normal {
|
||||
background-color: #f0fdfa;
|
||||
}
|
||||
|
||||
.material-tone-warning {
|
||||
background-color: #fff7ed;
|
||||
}
|
||||
|
||||
.material-tone-danger {
|
||||
background-color: #fef2f2;
|
||||
}
|
||||
|
||||
.material-tone-agent {
|
||||
background-color: #f5f3ff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:root,
|
||||
[data-basemap-tone] {
|
||||
--agent-floating-reading-surface: Canvas;
|
||||
--agent-floating-reading-item: Canvas;
|
||||
--agent-floating-reading-item-hover: Canvas;
|
||||
--agent-floating-reading-active: Highlight;
|
||||
--agent-user-message-surface: Canvas;
|
||||
--agent-user-message-border: CanvasText;
|
||||
--agent-white-acrylic-surface: Canvas;
|
||||
--agent-operational-surface: Canvas;
|
||||
--agent-floating-acrylic-backdrop: none;
|
||||
}
|
||||
|
||||
.acrylic-navigation,
|
||||
.acrylic-panel,
|
||||
.acrylic-control,
|
||||
@@ -379,10 +620,6 @@ input:focus-visible {
|
||||
.surface-control,
|
||||
.surface-well,
|
||||
.surface-reading,
|
||||
.material-tone-info,
|
||||
.material-tone-normal,
|
||||
.material-tone-warning,
|
||||
.material-tone-danger,
|
||||
.material-tone-agent {
|
||||
forced-color-adjust: none;
|
||||
border-color: CanvasText;
|
||||
@@ -393,6 +630,24 @@ input:focus-visible {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.status-badge,
|
||||
.status-icon {
|
||||
border-color: CanvasText;
|
||||
background-color: Canvas;
|
||||
color: CanvasText;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
background-color: CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.status-dot[data-activity="live"],
|
||||
.status-glyph[data-activity="loading"] {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-panel-shell {
|
||||
@@ -400,14 +655,114 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.agent-panel-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
box-shadow: inset 0 -1px 0 var(--surface-divider);
|
||||
}
|
||||
|
||||
.agent-panel-band {
|
||||
.agent-panel-header-expandable {
|
||||
position: absolute;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.agent-panel-floating-acrylic {
|
||||
background-image:
|
||||
linear-gradient(var(--acrylic-exclusion), var(--acrylic-exclusion)),
|
||||
linear-gradient(var(--acrylic-luminosity), var(--acrylic-luminosity)), var(--acrylic-noise);
|
||||
background-blend-mode: exclusion, luminosity, soft-light;
|
||||
background-clip: padding-box;
|
||||
box-shadow: var(--shadow-agent-floating);
|
||||
backdrop-filter: var(--agent-floating-acrylic-backdrop);
|
||||
-webkit-backdrop-filter: var(--agent-floating-acrylic-backdrop);
|
||||
}
|
||||
|
||||
.agent-panel-header-expanded {
|
||||
z-index: 2;
|
||||
border-color: var(--acrylic-outline);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
border-bottom-right-radius: var(--radius-panel);
|
||||
border-bottom-left-radius: var(--radius-panel);
|
||||
box-shadow: var(--shadow-panel);
|
||||
}
|
||||
|
||||
.agent-panel-header-mobile {
|
||||
inset-inline: -0.25rem;
|
||||
top: -2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.agent-panel-operational-float > .agent-panel-control,
|
||||
.agent-panel-history-extension .agent-panel-control,
|
||||
.agent-panel-composer > .agent-panel-control {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-operational-float > .agent-panel-control {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.agent-panel-history-extension {
|
||||
border: 0;
|
||||
border-radius: 0 0 var(--radius-panel) var(--radius-panel);
|
||||
background-color: var(--agent-floating-reading-surface);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-composer,
|
||||
.agent-conversation-scroll-button,
|
||||
.agent-speech-selection-action {
|
||||
background-color: var(--agent-white-acrylic-surface);
|
||||
}
|
||||
|
||||
.agent-panel-operational-float,
|
||||
.agent-panel-composer {
|
||||
inset-inline: calc(1rem + var(--scrollbar-size) + 1px);
|
||||
}
|
||||
|
||||
.agent-panel-operational-float,
|
||||
.agent-panel-composer,
|
||||
.agent-conversation-scroll-button,
|
||||
.agent-speech-selection-action {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.agent-panel-operational-float {
|
||||
top: 4.75rem;
|
||||
background-color: var(--agent-operational-surface);
|
||||
background-clip: padding-box;
|
||||
box-shadow: var(--shadow-agent-operational);
|
||||
backdrop-filter: var(--agent-floating-acrylic-backdrop);
|
||||
-webkit-backdrop-filter: var(--agent-floating-acrylic-backdrop);
|
||||
}
|
||||
|
||||
.agent-panel-history-extension .agent-history-item,
|
||||
.agent-panel-history-extension .agent-history-state,
|
||||
.agent-panel-operational-float .agent-brief-metric {
|
||||
background-color: var(--agent-floating-reading-item);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.agent-panel-history-extension .agent-history-item:hover {
|
||||
background-color: var(--agent-floating-reading-item-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.agent-panel-history-extension .agent-history-item-active {
|
||||
background-color: var(--agent-floating-reading-active);
|
||||
}
|
||||
|
||||
.agent-history-rename-input,
|
||||
.agent-history-rename-input:focus-visible {
|
||||
border-color: #cbd5e1;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-band:not(.agent-panel-floating-acrylic) {
|
||||
background: var(--surface-control);
|
||||
}
|
||||
|
||||
@@ -415,11 +770,87 @@ input:focus-visible {
|
||||
background: rgba(232, 240, 248, 0.12);
|
||||
}
|
||||
|
||||
.agent-panel-conversation-canvas {
|
||||
border-radius: var(--radius-control);
|
||||
background: rgba(232, 240, 248, 0.18);
|
||||
}
|
||||
|
||||
.agent-panel-conversation button:not([data-slot="button"]):not(:disabled):active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.agent-panel-conversation-content {
|
||||
padding-bottom: 10.5rem;
|
||||
}
|
||||
|
||||
.agent-panel-conversation-content-has-brief {
|
||||
padding-top: 13rem;
|
||||
}
|
||||
|
||||
.agent-panel-conversation-content-empty {
|
||||
padding-bottom: 13.5rem;
|
||||
}
|
||||
|
||||
.agent-panel-message {
|
||||
border: 1px solid var(--surface-divider);
|
||||
background: var(--surface-reading);
|
||||
}
|
||||
|
||||
.agent-panel-user-message {
|
||||
border: 1px solid var(--agent-user-message-border);
|
||||
background: var(--agent-user-message-surface);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.agent-panel-message,
|
||||
.agent-panel-user-message {
|
||||
box-shadow: var(--action-shadow-secondary);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.agent-conversation-scroll-button:hover,
|
||||
.agent-speech-selection-action:hover {
|
||||
background-color: var(--agent-white-acrylic-surface);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||
.agent-panel-floating-acrylic,
|
||||
.agent-panel-operational-float {
|
||||
background-image: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.agent-panel-floating-acrylic,
|
||||
.agent-panel-operational-float {
|
||||
background-image: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.agent-panel-header-expanded {
|
||||
border-color: CanvasText;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-floating-acrylic,
|
||||
.agent-panel-operational-float {
|
||||
forced-color-adjust: none;
|
||||
border-color: CanvasText;
|
||||
background-color: Canvas;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
color: CanvasText;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-streaming-response {
|
||||
display: block;
|
||||
--sd-animation: agent-stream-token-in;
|
||||
@@ -475,76 +906,49 @@ input:focus-visible {
|
||||
.agent-panel-icon-button {
|
||||
border: 1px solid var(--surface-divider);
|
||||
background: var(--surface-control);
|
||||
box-shadow: none;
|
||||
box-shadow: var(--action-shadow-secondary);
|
||||
}
|
||||
|
||||
.agent-panel-icon-button:hover {
|
||||
border-color: rgba(37, 99, 235, 0.26);
|
||||
background: rgba(239, 246, 255, 0.94);
|
||||
color: #1d4ed8;
|
||||
@media (hover: hover) {
|
||||
.agent-panel-icon-button:hover {
|
||||
border-color: var(--action-border-hover);
|
||||
background: var(--action-soft);
|
||||
color: var(--action-blue-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.agent-panel-primary-icon,
|
||||
.agent-panel-primary-action {
|
||||
border: 1px solid rgba(37, 99, 235, 0.24);
|
||||
background: #2563eb;
|
||||
.agent-panel-primary-icon {
|
||||
border: 1px solid var(--action-blue);
|
||||
background: var(--action-blue);
|
||||
color: #ffffff;
|
||||
box-shadow: none;
|
||||
box-shadow: var(--action-shadow-primary);
|
||||
}
|
||||
|
||||
.agent-panel-primary-icon:hover,
|
||||
.agent-panel-primary-action:hover {
|
||||
border-color: rgba(29, 78, 216, 0.34);
|
||||
background: #1d4ed8;
|
||||
color: #ffffff;
|
||||
@media (hover: hover) {
|
||||
.agent-panel-primary-icon:hover {
|
||||
border-color: var(--action-blue-hover);
|
||||
background: var(--action-blue-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-panel-primary-icon:disabled,
|
||||
.agent-panel-primary-action:disabled {
|
||||
.agent-panel-primary-icon:disabled {
|
||||
background: #93c5fd;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll,
|
||||
.scheduled-feed-detail-scroll,
|
||||
.agent-conversation-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(100, 116, 139, 0.26) transparent;
|
||||
scrollbar-gutter: stable;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll::-webkit-scrollbar,
|
||||
.scheduled-feed-detail-scroll::-webkit-scrollbar,
|
||||
.agent-conversation-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll::-webkit-scrollbar-track,
|
||||
.scheduled-feed-detail-scroll::-webkit-scrollbar-track,
|
||||
.agent-conversation-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll::-webkit-scrollbar-thumb,
|
||||
.scheduled-feed-detail-scroll::-webkit-scrollbar-thumb,
|
||||
.agent-conversation-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(100, 116, 139, 0.24);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll:hover::-webkit-scrollbar-thumb,
|
||||
.scheduled-feed-detail-scroll:hover::-webkit-scrollbar-thumb,
|
||||
.agent-conversation-scroll:hover::-webkit-scrollbar-thumb {
|
||||
background: rgba(100, 116, 139, 0.36);
|
||||
.agent-conversation-scroll {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
}
|
||||
|
||||
.scheduled-feed-panel-shell {
|
||||
--scheduled-feed-timeline-width: calc(
|
||||
var(--workbench-condition-width) - 1.5rem - 2px
|
||||
);
|
||||
--scheduled-feed-timeline-width: calc(var(--workbench-condition-width) - 1.5rem - 2px);
|
||||
transition:
|
||||
width 180ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 150ms ease-out;
|
||||
@@ -570,11 +974,6 @@ input:focus-visible {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.scheduled-feed-mobile .scheduled-feed-detail-scroll {
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.mobile-workbench-sheet {
|
||||
overscroll-behavior: contain;
|
||||
touch-action: manipulation;
|
||||
|
||||
Reference in New Issue
Block a user