fix(workbench): refine agent dock and smooth map resizing
Unify dock surfaces, headers and dividers, and remove the visible context strip. Limit pointer resizing to 400-640px and reveal the edge grip on hover. Resize and redraw the map in the same layout cycle to prevent blanking and lag. Preserve horizontal centering during conversation control press feedback. Validation: isolated lint, typecheck, 21 focused unit tests, and 10 relevant browser checks passed. Snapshot baselines regenerated from the isolated change. The existing mobile alert summary test also fails on unchanged HEAD because the expected demo alert source is unavailable in this environment.
This commit is contained in:
+207
-4
@@ -368,6 +368,15 @@ button:disabled {
|
||||
auto;
|
||||
}
|
||||
|
||||
#workspace-map .maplibregl-canvas:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#workspace-map .maplibregl-canvas:focus-visible {
|
||||
outline: 1px solid var(--action-focus-ring);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.acrylic-navigation,
|
||||
.acrylic-panel,
|
||||
.acrylic-control,
|
||||
@@ -400,6 +409,11 @@ button:disabled {
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
.workbench-top-bar {
|
||||
border-color: var(--surface-divider);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.acrylic-panel {
|
||||
background-color: var(--acrylic-panel);
|
||||
backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
|
||||
@@ -652,10 +666,6 @@ button:disabled {
|
||||
}
|
||||
}
|
||||
|
||||
.agent-panel-shell {
|
||||
border-color: var(--acrylic-border);
|
||||
}
|
||||
|
||||
.agent-panel-header {
|
||||
z-index: 1;
|
||||
border-top-left-radius: inherit;
|
||||
@@ -956,6 +966,199 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"],
|
||||
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
|
||||
--agent-dock-surface: oklch(97.2% 0.005 250);
|
||||
--agent-dock-band: oklch(98.5% 0.003 250);
|
||||
--agent-dock-control-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
--agent-dock-overlay-surface: rgba(255, 255, 255, 0.94);
|
||||
--agent-dock-overlay-backdrop: blur(12px) saturate(1.03);
|
||||
--agent-dock-overlay-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
|
||||
--surface-control: #ffffff;
|
||||
--surface-reading: #ffffff;
|
||||
--agent-user-message-surface: oklch(96.5% 0.018 255);
|
||||
--agent-user-message-border: transparent;
|
||||
--agent-floating-reading-item: transparent;
|
||||
--agent-floating-reading-item-hover: oklch(97.2% 0.005 250);
|
||||
--agent-floating-reading-active: var(--action-selection-soft);
|
||||
--radius-panel: 12px;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] {
|
||||
background: var(--agent-dock-surface);
|
||||
border-color: var(--surface-divider);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header > div:first-child {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band {
|
||||
background: var(--agent-dock-band);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band {
|
||||
border-color: var(--surface-divider);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-conversation {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band > .agent-panel-conversation {
|
||||
background: var(--agent-dock-surface);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-control {
|
||||
border-color: var(--surface-divider);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button,
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] form.agent-panel-control {
|
||||
box-shadow: var(--agent-dock-control-shadow);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] form.agent-panel-control:focus-within {
|
||||
border-color: var(--action-blue);
|
||||
box-shadow: var(--agent-dock-control-shadow), 0 0 0 2px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] :where(button) {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] :where(button:active:not(:disabled):not(:focus-visible)),
|
||||
.agent-panel-overlay[data-agent-presentation="desktop-dock"]:is(button):active:not(:disabled):not(:focus-visible),
|
||||
.agent-panel-overlay[data-agent-presentation="desktop-dock"] :where(button:active:not(:disabled):not(:focus-visible)) {
|
||||
translate: var(--tw-translate-x, 0) 1px;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button:active {
|
||||
background: var(--action-soft-pressed);
|
||||
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band .surface-reading {
|
||||
border-color: var(--surface-divider);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-empty-mark {
|
||||
background: var(--agent-dock-band);
|
||||
box-shadow: inset 0 0 0 1px var(--surface-divider);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-capabilities {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-capability {
|
||||
min-height: 72px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-capability-icon {
|
||||
border-radius: 10px;
|
||||
background: var(--agent-dock-band);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-message,
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-user-message {
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-message {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] [data-agent-ui-result] {
|
||||
border: 1px solid var(--surface-divider);
|
||||
background: var(--surface-reading);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-operational-brief {
|
||||
border: 0;
|
||||
background: var(--agent-dock-band);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-brief-metric {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background-color: var(--agent-dock-overlay-surface);
|
||||
background-image: none;
|
||||
box-shadow: var(--agent-dock-overlay-shadow);
|
||||
backdrop-filter: var(--agent-dock-overlay-backdrop);
|
||||
-webkit-backdrop-filter: var(--agent-dock-overlay-backdrop);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header-expanded {
|
||||
border-color: var(--surface-divider);
|
||||
box-shadow: var(--agent-dock-overlay-shadow);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-history-extension {
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-history-extension .agent-panel-control {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
|
||||
--agent-dock-overlay-surface: #ffffff;
|
||||
--agent-dock-overlay-backdrop: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
|
||||
--agent-dock-overlay-surface: #ffffff;
|
||||
--agent-dock-overlay-backdrop: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"],
|
||||
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
|
||||
--agent-dock-surface: Canvas;
|
||||
--agent-dock-band: Canvas;
|
||||
--agent-dock-control-shadow: none;
|
||||
--agent-dock-overlay-surface: Canvas;
|
||||
--agent-dock-overlay-backdrop: none;
|
||||
--agent-dock-overlay-shadow: none;
|
||||
--surface-control: Canvas;
|
||||
--surface-reading: Canvas;
|
||||
--surface-border: CanvasText;
|
||||
--surface-divider: CanvasText;
|
||||
--agent-user-message-surface: Canvas;
|
||||
--agent-user-message-border: CanvasText;
|
||||
--agent-floating-reading-item-hover: Canvas;
|
||||
--agent-floating-reading-active: Highlight;
|
||||
forced-color-adjust: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.scheduled-feed-scroll,
|
||||
.agent-conversation-scroll {
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
Reference in New Issue
Block a user