fix(web-ui): pixel loading language, tool-row sweep, composer polish

- StateDot ongoing: gradient spin ring replaced by an 8-cell pixel chase
  (2px matrix cells, stepped trail, no tweening)
- Chat: streaming pulse block replaced by a turn-level 4-pixel chase at the
  flow tail — rides the whole running turn (first-token wait, tools,
  streaming) instead of flickering with partial presence
- Tool rows (ToolRow/BashRow): running no longer swaps the icon for a dot;
  an animated mask band sweeps the row content, gliding off on exit via
  mask-position transition
- Composer: send/stop unified on the blue fill (bigger stop glyph, static
  white arrow), textarea box-sizing overflow fix, settling phase hides the
  composer while replay decides hero vs docked, workspace-placeholder
  fallback disables the bar
- Hero: glow moved behind (z-index) with lower opacity; tool-row hover icon
  crossfade at 100ms
This commit is contained in:
Yif
2026-07-28 07:59:08 +08:00
parent ae76ed2874
commit 484e0f70cc
21 changed files with 257 additions and 124 deletions

View File

@@ -1,7 +1,7 @@
/* Ongoing blue has no alias token (state-business-primary is the 500 step,
* not this 450) — component-level var pinned to the static scale instead. */
.dot,
.ring {
.matrix {
--dsh-state-ongoing: var(--dsw-static-deepseek-450);
}
@@ -42,24 +42,24 @@
color: var(--dsw-alias-state-error-primary);
}
.ring {
/* Pixel chase: each outer cell holds a discrete brightness step (flat keyframe
* holds, no tweening — the retro feel), peaking when the chase hits it and
* decaying over the next three cells. Phase offsets come from per-rect
* animation-delay (index * -125ms) set inline by the component. */
.matrix {
flex: none;
color: var(--dsh-state-ongoing);
animation: dsh-state-dot-spin 1s linear infinite;
}
.stopFrom {
stop-color: currentColor;
stop-opacity: 1;
.cell {
fill: currentColor;
opacity: 0.15;
animation: dsh-state-dot-chase 1s infinite;
}
.stopTo {
stop-color: currentColor;
stop-opacity: 0;
}
@keyframes dsh-state-dot-spin {
to {
transform: rotate(360deg);
}
@keyframes dsh-state-dot-chase {
0%, 12.4% { opacity: 1; }
12.5%, 24.9% { opacity: 0.6; }
25%, 37.4% { opacity: 0.35; }
37.5%, 100% { opacity: 0.15; }
}