| @@ -2,10 +2,10 @@ | ||
| 2 | 2 | * Agents — "Agent chat" window styles. |
| 3 | 3 | * |
| 4 | 4 | * Conversation surface painted by the `agent-run-window` bundle |
| 5 | 5 | * (src/agent-run-window.ts). Same conventions as the other window |
| 6 | - * stylesheets: `desktop-mode-*` / `dm-*` prefixes, theming via the | |
| 7 | - * desktop-mode-variables custom properties. | |
| 6 | + * stylesheets: `os-*` / `dm-*` prefixes, theming via the | |
| 7 | + * os-variables custom properties. | |
| 8 | 8 | * |
| 9 | 9 | */ |
| 10 | 10 | |
| 11 | 11 | .desktop-mode-agent-run { |
| @@ -14,17 +14,17 @@ | ||
| 14 | 14 | width: 100%; |
| 15 | 15 | height: 100%; |
| 16 | 16 | min-height: 0; |
| 17 | 17 | font-family: var( |
| 18 | - --desktop-mode-font, | |
| 18 | + --os-font, | |
| 19 | 19 | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif |
| 20 | 20 | ); |
| 21 | - color: var( --wpd-fg, #1d2327 ); | |
| 22 | - background: var( --desktop-mode-window-bg, #fff ); | |
| 21 | + color: var( --os-ui-fg, #1d2327 ); | |
| 22 | + background: var( --os-window-bg, #fff ); | |
| 23 | 23 | box-sizing: border-box; |
| 24 | 24 | } |
| 25 | 25 | |
| 26 | -.desktop-mode-agent-run__loading { | |
| 26 | +.os-agent-run__loading { | |
| 27 | 27 | display: flex; |
| 28 | 28 | align-items: center; |
| 29 | 29 | justify-content: center; |
| 30 | 30 | height: 100%; |
| @@ -162,9 +162,9 @@ | ||
| 162 | 162 | display: flex; |
| 163 | 163 | align-items: center; |
| 164 | 164 | gap: 10px; |
| 165 | 165 | padding: 12px; |
| 166 | - border-bottom: 1px solid var( --desktop-mode-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 166 | + border-bottom: 1px solid var( --os-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 167 | 167 | } |
| 168 | 168 | |
| 169 | 169 | .dm-agent-chat__avatar { |
| 170 | 170 | flex: none; |
| @@ -206,21 +206,24 @@ | ||
| 206 | 206 | } |
| 207 | 207 | |
| 208 | 208 | .dm-agent-chat__msg--user { |
| 209 | 209 | align-self: flex-end; |
| 210 | - background: var( --desktop-mode-accent, #2271b1 ); | |
| 210 | + background: var( --os-accent, #2271b1 ); | |
| 211 | 211 | color: #fff; |
| 212 | 212 | } |
| 213 | 213 | |
| 214 | 214 | .dm-agent-chat__msg--agent { |
| 215 | 215 | align-self: flex-start; |
| 216 | - background: var( --desktop-mode-hover, rgba( 0, 0, 0, 0.06 ) ); | |
| 216 | + background: var( --os-hover, rgba( 0, 0, 0, 0.06 ) ); | |
| 217 | 217 | } |
| 218 | 218 | |
| 219 | 219 | .dm-agent-chat__msg--error { |
| 220 | 220 | align-self: flex-start; |
| 221 | - background: rgba( 214, 54, 56, 0.12 ); | |
| 222 | - color: #8a1f21; | |
| 221 | + /* Tokenized so the wash and its ink move together: a dark-red | |
| 222 | + literal on a translucent red wash reads fine over a white bubble | |
| 223 | + list and vanishes over a dark one. Literals unchanged. */ | |
| 224 | + background: var( --os-ui-notice-error-bg, rgba( 214, 54, 56, 0.12 ) ); | |
| 225 | + color: var( --os-ui-danger, #8a1f21 ); | |
| 223 | 226 | } |
| 224 | 227 | |
| 225 | 228 | .dm-agent-chat__msg-text { |
| 226 | 229 | white-space: pre-wrap; |
| @@ -250,21 +253,100 @@ | ||
| 250 | 253 | gap: 8px; |
| 251 | 254 | margin-top: 2px; |
| 252 | 255 | } |
| 253 | 256 | |
| 257 | +/* The composer is one field. The textarea is still the kit's, but the | |
| 258 | + wrapper carries the chrome (field surface, border, focus bloom) and | |
| 259 | + the textarea's own box is flattened through its exported part, so | |
| 260 | + the send button sits inside the same border rather than beside it. */ | |
| 254 | 261 | .dm-agent-chat__composer { |
| 255 | 262 | display: flex; |
| 256 | 263 | align-items: flex-end; |
| 257 | - gap: 8px; | |
| 258 | - padding: 10px 12px; | |
| 259 | - border-top: 1px solid var( --desktop-mode-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 264 | + gap: 6px; | |
| 265 | + margin: 10px 12px 12px; | |
| 266 | + padding: 4px 8px 4px 10px; | |
| 267 | + border: 1px solid var( --os-ui-field-border, var( --os-ui-border, #dcdcde ) ); | |
| 268 | + border-radius: 12px; | |
| 269 | + background: var( --os-ui-field-bg, var( --os-window-bg, #fff ) ); | |
| 270 | + transition: border-color 0.15s ease, box-shadow 0.15s ease; | |
| 260 | 271 | } |
| 261 | 272 | |
| 262 | -.dm-agent-chat__composer wpd-textarea { | |
| 273 | +.dm-agent-chat__composer:focus-within { | |
| 274 | + border-color: var( --os-ui-accent, #f252fc ); | |
| 275 | + box-shadow: 0 0 0 3px | |
| 276 | + color-mix( in srgb, var( --os-ui-accent-dim, #f252fc ) 28%, transparent ); | |
| 277 | +} | |
| 278 | + | |
| 279 | +.dm-agent-chat__composer os-textarea { | |
| 263 | 280 | flex: 1; |
| 281 | + min-width: 0; | |
| 264 | 282 | } |
| 265 | 283 | |
| 284 | +/* One line of 13px text at 1.45 is 18.85px; 6.5px above and below | |
| 285 | + makes the single-line textarea 31.85px, the send button's height, | |
| 286 | + so with the row bottom-aligned the two centres coincide on one line | |
| 287 | + and the button stays anchored at the bottom as the text grows. */ | |
| 288 | +.dm-agent-chat__composer os-textarea::part( textarea ), | |
| 289 | +.dm-agent-chat__composer os-textarea::part( textarea ):hover, | |
| 290 | +.dm-agent-chat__composer os-textarea::part( textarea ):focus, | |
| 291 | +.dm-agent-chat__composer os-textarea::part( textarea ):focus-visible { | |
| 292 | + border: 0; | |
| 293 | + border-radius: 0; | |
| 294 | + background: transparent; | |
| 295 | + box-shadow: none; | |
| 296 | + outline: none; | |
| 297 | + padding: 6.5px 0; | |
| 298 | +} | |
| 266 | 299 | |
| 300 | +/* Round and icon-only, a size down from a toolbar button so it reads | |
| 301 | + as part of the field rather than a control beside it. Sized through | |
| 302 | + the exported part: the host's width does not reach the inner button, | |
| 303 | + and a zero padding token on its own shrank it to the glyph. The | |
| 304 | + bottom margin is half the difference to the single-line textarea | |
| 305 | + (31.85px), so the two centres meet on one line and the button stays | |
| 306 | + anchored to the last line as the text grows. */ | |
| 307 | +.dm-agent-chat__send { | |
| 308 | + flex: none; | |
| 309 | + margin-block-end: 4px; | |
| 310 | +} | |
| 311 | + | |
| 312 | +.dm-agent-chat__send::part( button ) { | |
| 313 | + display: inline-flex; | |
| 314 | + align-items: center; | |
| 315 | + justify-content: center; | |
| 316 | + width: 24px; | |
| 317 | + height: 24px; | |
| 318 | + min-height: 0; | |
| 319 | + padding: 0; | |
| 320 | + border-radius: 999px; | |
| 321 | +} | |
| 322 | + | |
| 323 | +.dm-agent-chat__send-icon { | |
| 324 | + display: block; | |
| 325 | + width: 14px; | |
| 326 | + height: 14px; | |
| 327 | +} | |
| 328 | + | |
| 329 | +/* The accessible name, off-screen. */ | |
| 330 | +.dm-agent-chat__send-label { | |
| 331 | + position: absolute; | |
| 332 | + width: 1px; | |
| 333 | + height: 1px; | |
| 334 | + padding: 0; | |
| 335 | + margin: -1px; | |
| 336 | + overflow: hidden; | |
| 337 | + clip: rect( 0, 0, 0, 0 ); | |
| 338 | + white-space: nowrap; | |
| 339 | + border: 0; | |
| 340 | +} | |
| 341 | + | |
| 342 | +@media ( prefers-reduced-motion: reduce ) { | |
| 343 | + .dm-agent-chat__composer { | |
| 344 | + transition: none; | |
| 345 | + } | |
| 346 | +} | |
| 347 | + | |
| 348 | + | |
| 267 | 349 | .dm-agent-chat__line { |
| 268 | 350 | display: flex; |
| 269 | 351 | align-items: flex-end; |
| 270 | 352 | gap: 8px; |
| @@ -316,9 +398,9 @@ | ||
| 316 | 398 | } |
| 317 | 399 | |
| 318 | 400 | .dm-agent-chat__msg--agent .dm-agent-chat__attachment, |
| 319 | 401 | .dm-agent-chat__msg--error .dm-agent-chat__attachment { |
| 320 | - border-color: var( --desktop-mode-border, rgba( 0, 0, 0, 0.12 ) ); | |
| 402 | + border-color: var( --os-border, rgba( 0, 0, 0, 0.12 ) ); | |
| 321 | 403 | background: rgba( 0, 0, 0, 0.04 ); |
| 322 | 404 | } |
| 323 | 405 | |
| 324 | 406 | .dm-agent-chat__msg--agent .dm-agent-chat__attachment:hover, |
| @@ -373,19 +455,78 @@ | ||
| 373 | 455 | .dm-agent-chat__line--pending { |
| 374 | 456 | min-width: min( 176px, 100% ); |
| 375 | 457 | } |
| 376 | 458 | |
| 459 | +/* Spinner and label on one line, centred. The bubble is a flex column | |
| 460 | + everywhere else; the working row is the one place it reads as an | |
| 461 | + instrument line, arc first, then the word. */ | |
| 377 | 462 | .dm-agent-chat__line--pending .dm-agent-chat__msg { |
| 378 | 463 | flex: 1; |
| 379 | - /* Center the label + spinner inside the wide bubble. The bubble | |
| 380 | - is a flex column, so the spinner needs align-items (text-align | |
| 381 | - alone only centers the label's inline text). */ | |
| 464 | + flex-direction: row; | |
| 382 | 465 | align-items: center; |
| 383 | - text-align: center; | |
| 466 | + justify-content: center; | |
| 467 | + gap: 8px; | |
| 384 | 468 | } |
| 385 | 469 | |
| 386 | -.dm-agent-chat__msg--pending wpd-spinner { | |
| 387 | - --wpd-spinner-size: 24px; | |
| 470 | +.dm-agent-chat__msg--pending os-spinner { | |
| 471 | + flex: none; | |
| 472 | + --os-ui-spinner-size: 16px; | |
| 473 | +} | |
| 474 | + | |
| 475 | +/* Three motions say "working", each quiet on its own: the arc turns | |
| 476 | + (the component's), a sheen sweeps the label, and the agent's face | |
| 477 | + bobs beside the bubble. The sheen is the skeleton shimmer clipped | |
| 478 | + to text, so the label stays a real, selectable word rather than a | |
| 479 | + drawn one. Every one of them stops under reduced motion; the label | |
| 480 | + falls back to its plain colour, not to invisible text. */ | |
| 481 | +.dm-agent-chat__msg--pending .dm-agent-chat__msg-text { | |
| 482 | + background: linear-gradient( | |
| 483 | + 90deg, | |
| 484 | + currentColor 0%, | |
| 485 | + currentColor 35%, | |
| 486 | + var( --os-ui-accent, #f252fc ) 50%, | |
| 487 | + currentColor 65%, | |
| 488 | + currentColor 100% | |
| 489 | + ); | |
| 490 | + background-size: 250% 100%; | |
| 491 | + -webkit-background-clip: text; | |
| 492 | + background-clip: text; | |
| 493 | + -webkit-text-fill-color: transparent; | |
| 494 | + animation: dm-agent-chat-sheen 1.8s ease-in-out infinite; | |
| 495 | +} | |
| 496 | + | |
| 497 | +.dm-agent-chat__line--pending .dm-agent-chat__msg-avatar { | |
| 498 | + animation: dm-agent-chat-bob 1.4s ease-in-out infinite; | |
| 499 | +} | |
| 500 | + | |
| 501 | +@keyframes dm-agent-chat-sheen { | |
| 502 | + from { | |
| 503 | + background-position: 125% 0; | |
| 504 | + } | |
| 505 | + to { | |
| 506 | + background-position: -125% 0; | |
| 507 | + } | |
| 508 | +} | |
| 509 | + | |
| 510 | +@keyframes dm-agent-chat-bob { | |
| 511 | + 0%, | |
| 512 | + 100% { | |
| 513 | + transform: translateY( 0 ); | |
| 514 | + } | |
| 515 | + 50% { | |
| 516 | + transform: translateY( -3px ); | |
| 517 | + } | |
| 518 | +} | |
| 519 | + | |
| 520 | +@media ( prefers-reduced-motion: reduce ) { | |
| 521 | + .dm-agent-chat__msg--pending .dm-agent-chat__msg-text { | |
| 522 | + animation: none; | |
| 523 | + background: none; | |
| 524 | + -webkit-text-fill-color: currentColor; | |
| 525 | + } | |
| 526 | + .dm-agent-chat__line--pending .dm-agent-chat__msg-avatar { | |
| 527 | + animation: none; | |
| 528 | + } | |
| 388 | 529 | } |
| 389 | 530 | |
| 390 | 531 | /* Markdown content inside agent bubbles. */ |
| 391 | 532 | .dm-agent-chat__msg-text p { |
