OrgTJWater/next-tjwater-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(agent): support Responses steering and project-aware tools

Browse Source 
Use the dedicated TJWATER_AGENT_URL and Responses stream protocol. Keep running
turns active while users steer or queue follow-ups and edit pending delivery.
Refresh the model catalog before generation and preserve approval mode selection.

Integrate scoped investigation messaging/presentation, geographic place selection,
current Agent composer styles and supporting workbench contracts.

Validation: 77 focused Vitest checks, 21 browser cases, lint, typecheck and
production build. Preserve direct Server/Agent routing and project authentication.
This commit is contained in:
jiang
2026-10-19 18:46:58 +08:00
parent 2c5bf15cce
commit ec23d44b02
131 changed files with 6663 additions and 1204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+362 -131
View File
@@ -135,7 +135,6 @@
--agent-user-message-surface: color-mix(in srgb, var(--action-selection-soft) 92%, transparent);
--agent-user-message-border: var(--action-selection-border);
--agent-white-acrylic-surface: color-mix(in srgb, var(--palette-paper) 86%, transparent);
--agent-operational-surface: color-mix(in srgb, var(--surface-subtle) 86%, transparent);
--acrylic-panel-blur: 24px;
--acrylic-control-blur: 18px;
--acrylic-backdrop-saturation: 1.08;
@@ -161,7 +160,6 @@
--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: var(--surface-subtle);
--surface-control: color-mix(in srgb, var(--surface-subtle) 92%, transparent);
--surface-well: color-mix(in srgb, var(--surface-panel) 66%, transparent);
@@ -239,13 +237,11 @@
--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);
--agent-floating-reading-item: color-mix(in srgb, var(--palette-paper) 78%, transparent);
--agent-floating-reading-item-hover: color-mix(in srgb, var(--palette-paper) 92%, transparent);
--agent-floating-reading-active: color-mix(in srgb, var(--action-selection-soft) 88%, transparent);
--agent-user-message-surface: color-mix(in srgb, var(--action-selection-soft) 94%, transparent);
--agent-white-acrylic-surface: color-mix(in srgb, var(--palette-paper) 90%, transparent);
--agent-operational-surface: color-mix(in srgb, var(--surface-subtle) 90%, transparent);
--surface-control: color-mix(in srgb, var(--surface-subtle) 96%, transparent);
--surface-well: color-mix(in srgb, var(--surface-panel) 78%, transparent);
--surface-reading: color-mix(in srgb, var(--palette-paper) 98.5%, transparent);
@@ -584,7 +580,6 @@ button:disabled {
--agent-floating-reading-active: var(--action-selection-soft);
--agent-user-message-surface: var(--action-selection-soft);
--agent-white-acrylic-surface: var(--surface-reading);
--agent-operational-surface: var(--surface-subtle);
--agent-floating-acrylic-backdrop: none;
}
@@ -614,7 +609,6 @@ button:disabled {
--agent-floating-reading-active: var(--action-selection-soft);
--agent-user-message-surface: var(--action-selection-soft);
--agent-white-acrylic-surface: var(--surface-reading);
--agent-operational-surface: var(--surface-subtle);
--agent-floating-acrylic-backdrop: none;
}
@@ -638,7 +632,6 @@ button:disabled {
--agent-user-message-surface: Canvas;
--agent-user-message-border: CanvasText;
--agent-white-acrylic-surface: Canvas;
--agent-operational-surface: Canvas;
--agent-floating-acrylic-backdrop: none;
}
@@ -723,7 +716,6 @@ button:disabled {
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;
@@ -731,10 +723,6 @@ button:disabled {
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);
@@ -748,12 +736,10 @@ button:disabled {
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 {
@@ -765,18 +751,8 @@ button:disabled {
outline-offset: -1px;
}
.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 {
.agent-panel-history-extension .agent-history-state {
background-color: var(--agent-floating-reading-item);
}
@@ -820,10 +796,6 @@ button.agent-history-session-trigger:not(:disabled):active {
padding-bottom: 10.5rem;
}
.agent-panel-conversation-content-has-brief {
padding-top: 13rem;
}
.agent-panel-conversation-content-empty {
padding-bottom: 13.5rem;
}
@@ -852,8 +824,7 @@ button.agent-history-session-trigger:not(:disabled):active {
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.agent-panel-floating-acrylic,
.agent-panel-operational-float {
.agent-panel-floating-acrylic {
background-image: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -861,8 +832,7 @@ button.agent-history-session-trigger:not(:disabled):active {
}
@media (prefers-reduced-transparency: reduce) {
.agent-panel-floating-acrylic,
.agent-panel-operational-float {
.agent-panel-floating-acrylic {
background-image: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -875,8 +845,7 @@ button.agent-history-session-trigger:not(:disabled):active {
box-shadow: none;
}
.agent-panel-floating-acrylic,
.agent-panel-operational-float {
.agent-panel-floating-acrylic {
forced-color-adjust: none;
border-color: CanvasText;
background-color: Canvas;
@@ -935,28 +904,16 @@ button.agent-history-session-trigger:not(:disabled):active {
-webkit-backdrop-filter: none;
}
.agent-ready-orbit,
.agent-ready-core {
transform-box: fill-box;
transform-origin: center;
}
.agent-ready-orbit {
animation: agent-ready-orbit 9s linear infinite;
}
.agent-ready-core {
animation: agent-ready-core 2.8s ease-in-out infinite;
}
.agent-panel-icon-button {
.agent-panel-icon-button,
.agent-project-trigger {
border: 1px solid var(--surface-divider);
background: var(--surface-control);
box-shadow: var(--action-shadow-secondary);
}
@media (hover: hover) {
.agent-panel-icon-button:hover {
.agent-panel-icon-button:hover,
.agent-project-trigger:hover {
border-color: var(--action-border-hover);
background: var(--action-soft);
color: var(--action-blue-hover);
@@ -967,7 +924,7 @@ button.agent-history-session-trigger:not(:disabled):active {
border: 0;
background: var(--action-blue);
color: #ffffff;
box-shadow: var(--action-shadow-primary);
box-shadow: 0 2px 6px rgba(70, 95, 145, 0.22);
}
@media (hover: hover) {
@@ -979,19 +936,72 @@ button.agent-history-session-trigger:not(:disabled):active {
}
.agent-panel-primary-icon:disabled {
background: var(--palette-brand);
background: var(--action-blue);
color: rgba(255, 255, 255, 0.86);
box-shadow: none;
}
.agent-panel-shell,
.agent-panel-overlay {
--agent-palette-shell: #E8ECF3;
--agent-palette-reading: #F8F9FC;
--agent-palette-accent: #465F91;
--agent-palette-accent-hover: #394E7C;
--agent-palette-accent-pressed: #2F416B;
--agent-palette-selection: #DDE4F1;
--agent-input-placeholder: #8791A3;
--surface-panel: #E0E5EF;
--surface-subtle: var(--agent-palette-shell);
--surface-control: color-mix(in srgb, var(--agent-palette-shell) 92%, transparent);
--surface-reading: var(--agent-palette-reading);
--action-blue: var(--agent-palette-accent);
--action-blue-hover: var(--agent-palette-accent-hover);
--action-blue-pressed: var(--agent-palette-accent-pressed);
--action-soft: #E4E8F1;
--action-soft-pressed: #D8DFEB;
--action-selection-soft: var(--agent-palette-selection);
--action-selection-soft-hover: #CFD9EA;
--action-selection-soft-pressed: #C2CEE2;
--action-selection-border: #7585AA;
--action-border-hover: var(--agent-palette-accent);
--action-border-pressed: var(--agent-palette-accent-hover);
--action-focus-ring: var(--agent-palette-accent-hover);
--field-focus-border: var(--agent-palette-accent);
--action-focus-offset: var(--agent-palette-reading);
--action-shadow-primary: 0 5px 12px rgba(70, 95, 145, 0.2);
--action-shadow-primary-pressed: 0 1px 3px rgba(47, 65, 107, 0.18);
--ink-muted: #4E596D;
--acrylic-navigation: color-mix(in srgb, #E4E9F2 72%, transparent);
--agent-floating-reading-surface: color-mix(in srgb, #E6EBF3 86%, transparent);
--agent-floating-reading-item: color-mix(in srgb, var(--agent-palette-reading) 76%, transparent);
--agent-floating-reading-item-hover: color-mix(in srgb, var(--agent-palette-reading) 92%, transparent);
--agent-floating-reading-active: color-mix(in srgb, var(--agent-palette-selection) 90%, transparent);
--agent-user-message-surface: var(--agent-palette-selection);
--agent-user-message-border: #C7D1E3;
--agent-white-acrylic-surface: color-mix(in srgb, #F0F3F8 88%, transparent);
}
.agent-panel-prompt-textarea::placeholder {
color: var(--agent-input-placeholder);
font-weight: 400;
opacity: 1;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"],
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
--agent-dock-surface: var(--surface-subtle);
--agent-dock-band: color-mix(in srgb, var(--palette-paper) 55%, transparent);
--agent-dock-surface: var(--agent-palette-shell);
--agent-dock-reading: var(--agent-palette-reading);
--agent-dock-band: var(--agent-white-acrylic-surface);
--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: color-mix(in srgb, var(--palette-paper) 94%, transparent);
--agent-dock-overlay-backdrop: blur(12px) saturate(1.03);
--agent-dock-overlay-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(43, 55, 87, 0.05);
--agent-dock-overlay-surface: var(--agent-floating-reading-surface);
--agent-dock-overlay-backdrop: var(--agent-floating-acrylic-backdrop);
--agent-dock-overlay-shadow: 0 6px 16px rgba(43, 55, 87, 0.1);
--agent-dock-acrylic-texture:
linear-gradient(var(--acrylic-exclusion), var(--acrylic-exclusion)),
linear-gradient(var(--acrylic-luminosity), var(--acrylic-luminosity)), var(--acrylic-noise);
--agent-dock-acrylic-shadow:
inset 0 1px 0 var(--acrylic-highlight), 0 2px 6px rgba(43, 55, 87, 0.07);
--agent-user-message-surface: var(--action-selection-soft);
--agent-user-message-border: transparent;
--agent-floating-reading-item: transparent;
@@ -1005,8 +1015,23 @@ button.agent-history-session-trigger:not(:disabled):active {
border-color: var(--surface-divider);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"]:where([data-agent-starting="true"]) {
--agent-dock-surface: #EFF2F7;
--agent-dock-reading: #FCFCFE;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] :is(.agent-panel-header, .agent-panel-band),
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
background-image: var(--agent-dock-acrylic-texture);
background-blend-mode: exclusion, luminosity, soft-light;
background-clip: padding-box;
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 {
box-shadow: none;
background-color: var(--acrylic-navigation);
box-shadow: inset 0 -1px 0 var(--surface-divider);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header > div:first-child {
@@ -1014,18 +1039,16 @@ button.agent-history-session-trigger:not(:disabled):active {
}
.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 {
background-color: var(--agent-dock-band);
border-color: var(--surface-divider);
box-shadow: inset 0 1px 0 var(--acrylic-highlight);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-conversation {
background: transparent;
background: var(--agent-dock-reading);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band > .agent-panel-conversation {
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-conversation[data-agent-conversation-state="empty"] {
background: var(--agent-dock-surface);
}
@@ -1035,14 +1058,172 @@ button.agent-history-session-trigger:not(:disabled):active {
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button,
.agent-panel-shell[data-agent-presentation="desktop-dock"] form.agent-panel-control {
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-project-trigger {
box-shadow: var(--agent-dock-control-shadow);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] form.agent-panel-control:focus-within {
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form > [data-slot="input-group"] {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
outline: none;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form > [data-slot="input-group"] {
gap: 8px;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-body {
display: block;
width: 100%;
overflow: hidden;
border: 1px solid var(--surface-border);
border-radius: 12px;
background: var(--agent-dock-reading);
transition: background-color 180ms ease;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-body:focus-within {
border-color: var(--field-focus-border);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-tools {
min-height: 40px;
padding: 0 4px;
background: transparent;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-tools :where(button) {
min-height: 40px;
min-width: 40px;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"][data-agent-starting="false"] .agent-panel-band {
padding: 8px 12px;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"][data-agent-starting="false"] .agent-panel-input-form > [data-slot="input-group"] {
gap: 4px;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"][data-agent-starting="false"] .agent-panel-input-form textarea {
min-height: 96px;
max-height: clamp(96px, 24dvh, 192px);
padding: 12px;
font-size: 14px;
line-height: 20px;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"][data-agent-starting="false"] .agent-panel-input-tools {
padding-block: 0;
}
.agent-panel-shell[data-agent-starting="true"] .agent-panel-main-content {
display: none;
}
.agent-panel-shell[data-agent-starting="true"] .agent-panel-start-composer {
position: relative;
inset: auto;
z-index: auto;
align-self: center;
flex-shrink: 0;
width: calc(100% - 24px);
max-width: 600px;
margin-block: auto;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-start-composer .agent-panel-input-form {
padding: 16px;
border-radius: 16px;
background-color: var(--agent-dock-band);
background-image: var(--agent-dock-acrylic-texture);
background-blend-mode: exclusion, luminosity, soft-light;
box-shadow: var(--agent-dock-acrylic-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-composer-motion,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form textarea {
transition-duration: 280ms;
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form {
transition-property: padding, border-radius, background-color, box-shadow;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form textarea {
transition-property: min-height, padding, font-size, line-height;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-start-composer textarea {
min-height: 160px;
max-height: clamp(160px, calc(100dvh - 480px), 240px);
padding: 16px;
font-size: 16px;
line-height: 24px;
}
@media (prefers-reduced-motion: reduce) {
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-composer-motion,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form textarea {
transition: none;
}
}
.agent-panel-start-heading {
margin-bottom: 20px;
text-align: center;
font-size: 22px;
font-weight: 600;
line-height: 32px;
color: var(--ink);
}
.agent-panel-start-suggestions {
min-height: 204px;
margin-top: 16px;
}
.agent-panel-start-suggestion {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 68px;
padding: 8px 12px;
border-radius: 8px;
background: transparent;
text-align: left;
color: var(--ink-muted);
}
@media (hover: hover) {
.agent-panel-start-suggestion:hover {
background: var(--action-soft);
color: var(--action-blue-hover);
}
}
.agent-panel-suggestion-status {
padding: 12px;
font-size: 12px;
line-height: 20px;
color: var(--ink-muted);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] :where(button) {
border-radius: 10px;
}
@@ -1053,36 +1234,23 @@ button.agent-history-session-trigger:not(:disabled):active {
translate: var(--tw-translate-x, 0) 1px;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button:active {
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button:active,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-project-trigger:active {
background: var(--action-soft-pressed);
color: var(--action-blue-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-border);
background: var(--agent-floating-reading-item);
box-shadow: none;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-suggestions .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;
background-color: var(--agent-white-acrylic-surface);
box-shadow: var(--agent-dock-acrylic-shadow);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-message,
@@ -1096,40 +1264,38 @@ button.agent-history-session-trigger:not(:disabled):active {
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);
.agent-panel-shell[data-agent-presentation="desktop-dock"] [data-agent-progress] {
border-color: var(--surface-divider);
background: var(--agent-dock-surface);
box-shadow: none;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-brief-metric {
border: 0;
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-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);
box-shadow: inset 0 1px 0 var(--acrylic-highlight), 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 {
background-color: var(--agent-dock-overlay-surface);
border-color: var(--surface-divider);
box-shadow: var(--agent-dock-overlay-shadow);
box-shadow: var(--shadow-agent-history-bottom);
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-history-extension {
border-radius: 0 0 12px 12px;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-history-extension .agent-panel-control {
@@ -1139,16 +1305,20 @@ button.agent-history-session-trigger:not(:disabled):active {
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.agent-panel-shell[data-agent-presentation="desktop-dock"],
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
--agent-dock-overlay-surface: var(--palette-paper);
--agent-dock-overlay-backdrop: none;
--agent-dock-acrylic-texture: none;
}
}
@media (prefers-reduced-transparency: reduce) {
.agent-panel-shell[data-agent-presentation="desktop-dock"],
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
--agent-dock-overlay-surface: var(--palette-paper);
--agent-dock-overlay-backdrop: none;
--agent-dock-acrylic-texture: none;
}
}
@@ -1156,11 +1326,16 @@ button.agent-history-session-trigger:not(:disabled):active {
.agent-panel-shell[data-agent-presentation="desktop-dock"],
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
--agent-dock-surface: Canvas;
--agent-dock-reading: 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;
--agent-dock-acrylic-texture: none;
--agent-dock-acrylic-shadow: none;
--acrylic-highlight: transparent;
--acrylic-navigation: Canvas;
--surface-control: Canvas;
--surface-reading: Canvas;
--surface-border: CanvasText;
@@ -1281,6 +1456,57 @@ button.agent-history-session-trigger:not(:disabled):active {
border-top: 1px solid var(--surface-divider);
}
.investigation-report > .investigation-report-section {
margin: 0.75rem;
border: 1px solid var(--surface-divider);
border-radius: 0.75rem;
background: var(--palette-paper);
}
.investigation-card-heading,
.investigation-detail-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.investigation-detail-backdrop {
position: fixed;
inset: 0;
z-index: 90;
background: color-mix(in srgb, var(--palette-paper) 76%, transparent);
}
.investigation-detail-positioner {
position: fixed;
inset: 0;
z-index: 91;
display: grid;
place-items: center;
pointer-events: none;
}
.investigation-detail-panel {
display: flex;
flex-direction: column;
width: min(44rem, calc(100vw - 2rem));
max-height: min(86dvh, 56rem);
min-height: 0;
overflow: hidden;
pointer-events: auto;
border: 1px solid var(--surface-divider);
background: var(--palette-paper);
box-shadow: 0 16px 48px rgb(38 51 77 / 12%);
}
.investigation-detail-panel-wide { width: min(70rem, calc(100vw - 2rem)); }
.investigation-detail-heading { flex-shrink: 0; padding: 1rem; border-bottom: 1px solid var(--surface-divider); }
.investigation-detail-scroll { min-height: 0; overflow: auto; padding: 1rem; overscroll-behavior: contain; scrollbar-gutter: stable; overflow-wrap: anywhere; }
.investigation-detail-scroll > .investigation-report-section { padding: 0; border: 0; }
.investigation-evidence-preview { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.investigation-conclusion-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.investigation-report-update {
display: flex;
flex-wrap: wrap;
@@ -1340,6 +1566,8 @@ button.agent-history-session-trigger:not(:disabled):active {
.investigation-diagram {
min-width: 0;
/* SVG replacement must not become the report reader's scroll anchor. */
overflow-anchor: none;
overflow: hidden;
border: 1px solid var(--surface-divider);
border-radius: 0.75rem;
@@ -1357,6 +1585,34 @@ button.agent-history-session-trigger:not(:disabled):active {
--diagram-control-rail-inset: 1.0625rem;
--diagram-control-group-gap: 0.5rem;
--diagram-zoom-rail-height: 7.625rem;
margin-block: 0;
}
/* Natural graph height, with only enough room for the existing control rail. */
.investigation-diagram [data-streamdown="mermaid"] > div {
min-block-size: calc(var(--diagram-zoom-rail-height) + 1rem);
}
.investigation-diagram [data-streamdown="mermaid"] [role="img"] > svg {
width: 100%;
height: auto;
animation: investigation-diagram-reveal 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.investigation-diagram [data-streamdown="mermaid"] [role="img"] {
/* Reserve the existing right-hand control rail when fitting the graph. */
padding-inline-end: 3rem;
}
@keyframes investigation-diagram-reveal {
from { opacity: 0.55; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.investigation-diagram [data-streamdown="mermaid"] [role="img"] > svg {
animation: none;
}
}
/* Match Button's compact icon-sm size, including controls portalled to body. */
@@ -1725,25 +1981,6 @@ button[type="button"]:has(> .investigation-diagram-control-icon):disabled {
}
}
@keyframes agent-ready-orbit {
to {
transform: rotate(360deg);
}
}
@keyframes agent-ready-core {
0%,
100% {
opacity: 0.72;
transform: scale(0.94);
}
50% {
opacity: 1;
transform: scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
.agent-panel-enter,
.agent-panel-collapse,
@@ -1780,12 +2017,6 @@ button[type="button"]:has(> .investigation-diagram-control-icon):disabled {
transform: none;
}
.agent-ready-orbit,
.agent-ready-core {
animation: none;
opacity: 1;
transform: none;
}
}
details[open] > summary > .disclosure-accordion-indicator {