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

packages/client/ui-conversation/src/client/chat/AssistantMarkdown.module.css

@@ -9,18 +9,6 @@
   color: var(--dsw-alias-label-primary);
 }
 
-.pulse {
-  display: inline-block;
-  width: 8px;
-  height: 14px;
-  background: var(--dsw-alias-state-business-primary);
-  animation: pulse 1s infinite ease-in-out;
-}
-
-@keyframes pulse {
-  50% { opacity: 0.2; }
-}
-
 /* Interrupted-turn terminal marker: quiet inline tag, no animation. */
 .stopped {
   align-self: flex-start;

packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx

@@ -2,8 +2,8 @@
 // reasoning as the figma Think summary row (expand = indented gray text),
 // other-block JSON fallback. Tool-call heads are NOT rendered here: the chat
 // view groups them into tool rows through its keyed toolview slot (figma
-// step-summary flow). Shared by finalized nodes and the streaming partial
-// (pulse marker).
+// step-summary flow). Shared by finalized nodes and the streaming partial;
+// the turn-level loading dots live in the chat view's tail, not here.
 
 import { memo } from 'react'
 import type { AssistantBlock } from '@deepseek-ai/dsh-client-runtime/client'
@@ -14,7 +14,7 @@ import css from './AssistantMarkdown.module.css'
 export interface AssistantMarkdownProps {
   blocks: readonly AssistantBlock[]
   streaming: boolean
-  /** Frozen partial of an aborted turn: rendered with a 已停止 marker, no pulse. */
+  /** Frozen partial of an aborted turn: rendered with a 已停止 marker. */
   interrupted?: boolean | undefined
 }
 
@@ -51,7 +51,6 @@ export const AssistantMarkdown = memo(function AssistantMarkdown({ blocks, strea
           default: return <JsonBlock key={i} label="未知内容块" payload={block.block} />
         }
       })}
-      {streaming && <span className={css.pulse} />}
       {interrupted && <span className={css.stopped}>已停止</span>}
     </div>
   )

packages/client/ui-conversation/src/client/chat/ChatView.module.css

@@ -51,6 +51,31 @@
   border-left: 1px solid var(--dsw-alias-border-l2);
 }
 
+/* Turn loader: one row of four 2.5px pixels (StateDot blue) chasing left to
+   right with a stepped trail — flat keyframe holds, no tweening. Phase
+   offsets come from per-rect animation-delay (index * -250ms) set inline
+   by the component. */
+.turnDots {
+  align-self: flex-start;
+  flex: none;
+  /* Same pin as StateDot: ongoing blue has no alias token (business-primary
+     is the 500 step, not this 450). */
+  color: var(--dsw-static-deepseek-450);
+}
+
+.turnDotCell {
+  fill: currentColor;
+  opacity: 0.15;
+  animation: dsh-turn-dots-chase 1s infinite;
+}
+
+@keyframes dsh-turn-dots-chase {
+  0%, 24.9% { opacity: 1; }
+  25%, 49.9% { opacity: 0.6; }
+  50%, 74.9% { opacity: 0.35; }
+  75%, 100% { opacity: 0.15; }
+}
+
 .hint {
   color: var(--dsw-alias-label-tertiary);
   font-size: 12px;

packages/client/ui-conversation/src/client/chat/ChatView.tsx

@@ -149,6 +149,38 @@ const ToolGroup = memo(function ToolGroup({ renderSlot, results, onOpenDetails,
   )
 })
 
+/** Turn loader: one row of four 2.5px pixels (half a notch above the StateDot
+ *  2px cell, same blue) chasing left to right with a stepped trail — flat
+ *  keyframe holds, no tweening, no rotation. Phase offsets come from
+ *  per-rect animation-delay. */
+const LOADER_CELLS = [0, 5, 10, 15] as const
+
+function TurnDots() {
+  return (
+    <svg
+      className={css.turnDots}
+      width="17.5"
+      height="2.5"
+      viewBox="0 0 17.5 2.5"
+      shapeRendering="crispEdges"
+      aria-hidden="true"
+    >
+      {LOADER_CELLS.map((x, index) => (
+        <rect
+          key={x}
+          className={css.turnDotCell}
+          x={x}
+          y="0"
+          width="2.5"
+          height="2.5"
+          /* Negative delay phases the chase so every cell animates from mount. */
+          style={{ animationDelay: `${(index - LOADER_CELLS.length) * 250}ms` }}
+        />
+      ))}
+    </svg>
+  )
+}
+
 /** The streaming partial, isolated so chunk batches re-render only this tail.
  *  onGrow lets the scroll owner follow content the parent never re-renders for. */
 function StreamingTail({ useSession, onGrow }: {
@@ -169,6 +201,7 @@ function StreamingTail({ useSession, onGrow }: {
  */
 export function ChatView({ useSession, useStore, renderSlot, openDetails, loadOlder }: ChatViewSlotProps) {
   const nodes = useSession(s => s.nodes)
+  const running = useSession(s => s.running)
   const runningCalls = useSession(s => s.runningCalls)
   const codeDispatches = useSession(s => s.codeDispatches)
   const pending = useSession(s => s.pending)
@@ -314,6 +347,9 @@ export function ChatView({ useSession, useStore, renderSlot, openDetails, loadOl
             </div>
           )}
           {pending.map(item => <PendingCard key={item.key} item={item} />)}
+          {/* Turn-level loading signal: rides the whole running turn (first-token
+              wait, tool execution, streaming) so it never flickers per step. */}
+          {running && <TurnDots />}
         </div>
       </div>
       <StatsLine useSession={useSession} />

packages/client/ui-conversation/src/client/chat/ToolRow.module.css

@@ -6,11 +6,34 @@
   flex-direction: column;
 }
 
+/* Row sweep mask (running signal): the row content itself is the medium —
+   an animated mask band modulates the alpha of everything in the row
+   (glyphs, icon, dot), so the light reads as passing THROUGH the content,
+   not behind it. The mask is ALWAYS mounted with the band parked off-screen
+   (-50% = past the right edge; tiled copies sit outside the view too), so
+   at rest it is a no-op. Running only adds the position animation. On exit
+   the animation drops and `transition: mask-position` carries the band from
+   its animated position onward off-screen right (before-change style
+   includes animation effects per css-transitions-1) — the sweep finishes
+   instead of snapping. */
 .row {
   display: flex;
   align-items: center;
   height: 24px;
   min-width: 0;
+  mask-image: linear-gradient(100deg, #000 30%, rgba(0, 0, 0, 0.35) 50%, #000 70%);
+  mask-size: 200% 100%;
+  mask-position: -50% 0;
+  transition: mask-position 1.6s ease-out;
+}
+
+.root[data-state='running'] .row {
+  animation: dsh-tool-row-sweep 2.2s linear infinite;
+}
+
+@keyframes dsh-tool-row-sweep {
+  from { mask-position: 150% 0; }
+  to { mask-position: -50% 0; }
 }
 
 /* Clickable rows keep only the cursor affordance — no hover fill. */
@@ -20,6 +43,7 @@
 }
 
 .leading {
+  position: relative; /* .chevronHover overlay anchor */
   flex: none;
   width: 16px;
   height: 16px;
@@ -62,22 +86,29 @@ button.leading {
   color: var(--dsw-alias-label-secondary);
 }
 
-/* Hover preview on expandable rows: the idle tool icon yields to a down
-   chevron before the row is opened. */
+/* Hover preview on expandable rows: the idle tool icon crossfades (100ms)
+   into a down chevron before the row is opened. The chevron overlays the
+   icon cell absolutely so both can stay mounted for the opacity transition. */
 .iconIdle {
   display: inline-flex;
+  opacity: 1;
+  transition: opacity 100ms ease;
 }
 
 .chevronHover {
-  display: none;
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  transition: opacity 100ms ease;
 }
 
 .row:hover .iconIdle {
-  display: none;
+  opacity: 0;
 }
 
 .row:hover .chevronHover {
-  display: inline-flex;
+  opacity: 1;
 }
 
 .title {

packages/client/ui-conversation/src/client/chat/ToolRow.tsx

@@ -30,11 +30,11 @@ export interface ToolRowProps {
   onOpenDetails?: (() => void) | undefined
 }
 
-/** Leading-slot state substitution: the tool icon yields to the state semantic
- *  (running = blue ring, error = red, interrupted = amber halo; ok = icon). */
+/** Leading-slot state substitution: the tool icon yields to the terminal state
+ *  semantic (error = red, interrupted = amber halo). Running keeps the icon —
+ *  the row sweep (CSS on data-state) carries the in-flight signal. */
 function leadingFor(state: ToolRowState, icon: ReactNode): ReactNode {
   switch (state) {
-    case 'running': return <StateDot state="ongoing" />
     case 'error': return <StateDot state="error" />
     case 'stopped': return <StateDot state="warning" />
     default: return icon

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css

@@ -139,6 +139,7 @@
    NOT absolute+transform: a transform would make this box the containing
    block for position:fixed descendants (pickers/modals), shrinking them. */
 .composerHero {
+  position: relative; /* .heroGlow positioning context */
   align-self: center;
   /* figma 75:8208: 12 between hero chrome / workspace row / card. */
   gap: 12px;
@@ -148,6 +149,22 @@
   z-index: 1;
 }
 
+/* Blue backdrop ellipse (figma 313:14109), centered on the input card: the
+   card's resting center sits ~92px above the stack bottom (32 foot pad +
+   half of the ~120px two-row card); width tracks the card (glow asset 1051
+   vs design card 776) so blur scales in userSpace with it. z-index -1 keeps
+   it behind the in-flow hero content inside this stacking context. */
+.heroGlow {
+  position: absolute;
+  left: 50%;
+  bottom: 92px;
+  z-index: -1;
+  width: calc(100% * 1051 / 776);
+  aspect-ratio: 1051 / 468;
+  transform: translate(-50%, 50%);
+  pointer-events: none;
+}
+
 .heroWorkspaceRow {
   display: flex;
   align-items: center;
@@ -158,3 +175,9 @@
 .root[data-phase='hero'] {
   justify-content: center;
 }
+
+/* Settling (session replaying, hero/docked unknown): keep the composer
+   mounted but invisible so no wrong layout flashes before the phase lands. */
+.root[data-phase='settling'] .composerStack {
+  visibility: hidden;
+}

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react'
 import clsx from 'clsx'
 import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSlotProps, InputZone } from '../contract/slots.ts'
-import { HeroShell, WorkspaceChip, workspaceLabel } from './EmptyHero.tsx'
+import { HeroGlow, HeroShell, WorkspaceChip, workspaceLabel } from './EmptyHero.tsx'
 import { DisabledInputBar } from './DisabledInputBar.tsx'
 import css from './ConversationRoot.module.css'
 
@@ -46,7 +46,11 @@ export function ConversationRoot({
     }
   }, [pendingWorkspaceId, sessionWorkspace?.workspaceId, workspaces.phase, pendingWorkspace])
 
-  const hero = sessionId === undefined || (composerPhase === 'blank' && (openState === 'open' || openState === 'loading'))
+  // While a session is still replaying (loading + blank) the hero/docked
+  // choice is unknowable — render the composer hidden instead of flashing
+  // the centered hero and snapping to the docked bar (or vice versa).
+  const settling = sessionId !== undefined && composerPhase === 'blank' && openState === 'loading'
+  const hero = sessionId === undefined || (composerPhase === 'blank' && openState === 'open')
   const zone: InputZone | undefined =
     session === undefined || inputState === undefined ? undefined : { session, input: inputState }
 
@@ -91,7 +95,10 @@ export function ConversationRoot({
     </div>
   )
 
-  const inputBar = sessionId === undefined
+  // The placeholder chip ("Choose workspace") and the inert input travel
+  // together: a blank session whose workspace vanished (deleted from the
+  // sidebar) reverts to the same disabled bar as the initial no-session state.
+  const inputBar = sessionId === undefined || (hero && chipTitle === undefined)
     ? <DisabledInputBar />
     : renderSlot('conversation.composer.bar', {
       variant: hero ? 'hero' : 'composer',
@@ -103,6 +110,7 @@ export function ConversationRoot({
 
   const composerBar = (
     <div className={clsx(css.composerStack, hero && css.composerHero)}>
+      {hero && <HeroGlow className={css.heroGlow} />}
       {hero && <HeroShell />}
       {hero && heroWorkspaceRow}
       {!hero && zone !== undefined && renderSlot('conversation.input.dock', zone)}
@@ -112,7 +120,7 @@ export function ConversationRoot({
   )
 
   return (
-    <div className={css.root} data-phase={hero ? 'hero' : 'active'}>
+    <div className={css.root} data-phase={settling ? 'settling' : hero ? 'hero' : 'active'}>
       {/* Mounted for every real session, hero included: ConversationSession
           renders no chrome while blank but owns the draft-persistence mirror
           bind — unmounting it in the hero would lose pre-first-send text on

packages/client/ui-conversation/src/client/skeleton/DisabledInputBar.tsx

@@ -29,7 +29,7 @@ export function DisabledInputBar() {
           <div className={css.trailing}>
             <button type="button" className={css.primary} aria-label="Send message" disabled>
               <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                <path d="M8 13V3.8M8 3.8L3.8 8M8 3.8L12.2 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
               </svg>
             </button>
           </div>

packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx

@@ -59,6 +59,40 @@ export function WorkspaceChip({ buttonRef, label, menuOpen = false, onClick }: {
   )
 }
 
+/**
+ * The soft blue backdrop ellipse (figma 313:14109). Rendered by the hero
+ * owner (ConversationRoot), not HeroShell, so it can center on the input
+ * card; the owner's className supplies all positioning.
+ * @param props.className - positioning class from the owner.
+ * @returns the blurred-ellipse svg element.
+ */
+export function HeroGlow({ className }: { className?: string }) {
+  // Stable filter id so multiple hero mounts do not collide in the DOM.
+  const glowFilterId = `empty-glow-${useId().replace(/:/g, '')}`
+  return (
+    <svg className={className} viewBox="0 0 1051 468" fill="none" aria-hidden="true">
+      <defs>
+        <filter
+          id={glowFilterId}
+          x="0"
+          y="0"
+          width="1051"
+          height="468"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur" />
+        </filter>
+      </defs>
+      <g filter={`url(#${glowFilterId})`}>
+        <ellipse cx="525.5" cy="234" rx="425.5" ry="134" fill="#6187D8" fillOpacity="0.08" />
+      </g>
+    </svg>
+  )
+}
+
 /** Hero chrome props. The workspace row rides the InputBar accessory hole, not here. */
 export interface HeroShellProps {
   /** Overlay content after the stack (modals). */
@@ -66,13 +100,12 @@ export interface HeroShellProps {
 }
 
 /**
- * Render the hero chrome (headline + glow; no composer, no workspace row).
+ * Render the hero chrome (headline only; no glow, no composer, no workspace
+ * row — the glow is the owner's {@link HeroGlow}).
  * @param props - see {@link HeroShellProps}.
  * @returns the centered hero element tree.
  */
 export function HeroShell({ children }: HeroShellProps) {
-  // Stable filter id so multiple hero mounts do not collide in the DOM.
-  const glowFilterId = `empty-glow-${useId().replace(/:/g, '')}`
   return (
     <div className={css.root}>
       <div className={css.stack}>
@@ -82,29 +115,6 @@ export function HeroShell({ children }: HeroShellProps) {
           Let&apos;s start building
         </div>
         <div className={css.body}>
-          {/* figma 313:14109: soft ellipse behind workspace + composer; width
-              tracks the card (glow asset 1051 vs design card 776) so blur
-              scales in userSpace with it. */}
-          <svg className={css.glow} viewBox="0 0 1051 468" fill="none" aria-hidden="true">
-            <defs>
-              <filter
-                id={glowFilterId}
-                x="0"
-                y="0"
-                width="1051"
-                height="468"
-                filterUnits="userSpaceOnUse"
-                colorInterpolationFilters="sRGB"
-              >
-                <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur" />
-              </filter>
-            </defs>
-            <g filter={`url(#${glowFilterId})`}>
-              <ellipse cx="525.5" cy="234" rx="425.5" ry="134" fill="#6187D8" fillOpacity="0.1" />
-            </g>
-          </svg>
           {/* The resident composer (rendered by ConversationRoot at its stable
               tree position; the workspace row rides its accessory hole) is
               CSS-positioned into this gap during the hero phase — see

packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css

@@ -41,8 +41,9 @@
   color: var(--dsw-alias-state-business-primary);
 }
 
-/* Workspace row sits 12px above the input card (figma y80 → y112). Glow is
-   centered on this block so it stays under the picker + InputBar together. */
+/* Workspace row sits 12px above the input card (figma y80 → y112). The blue
+   glow lives with the owner (ConversationRoot .heroGlow) so it can center on
+   the input card. */
 .body {
   position: relative;
   display: flex;
@@ -52,19 +53,7 @@
   overflow: visible;
 }
 
-/* Design input 776 → glow SVG 1051×468 (ellipse 851×268 + blur pad). */
-.glow {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 0;
-  width: calc(100% * 1051 / 776);
-  aspect-ratio: 1051 / 468;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.body > :not(.glow) {
+.body > * {
   position: relative;
   z-index: 1;
 }

packages/client/ui-conversation/src/client/skeleton/InputBar.module.css

@@ -171,6 +171,10 @@
 .input,
 .mirror,
 .backdrop {
+  /* Textareas default to content-box (unlike buttons/inputs): without this the
+     width:100% textarea gains its padding OUTSIDE the card and text runs past
+     the right padding — and wraps 28px later than the mirror/backdrop layers. */
+  box-sizing: border-box;
   /* figma .InputText 34:10434: pl 16 / pr 12 / pt 4. Backdrop MUST share these
      metrics or the highlight ranges drift off the glyphs. */
   padding: 4px 12px 0 16px;
@@ -306,11 +310,14 @@
   border: none;
   border-radius: 999px;
   background: var(--dsw-alias-button-info-fill);
-  color: var(--dsw-alias-label-primary-foreground);
+  /* Static white, not the foreground token: the arrow stays white on the blue
+     fill in both themes (design 34:10465). */
+  color: #fff;
   cursor: pointer;
+  transition: background-color 100ms ease;
 }
 
-.primary:hover {
+.primary:hover:not(:disabled) {
   background: var(--dsw-alias-button-info-hover);
 }
 
@@ -319,14 +326,6 @@
   cursor: default;
 }
 
-/* Stop state: same slot, dimmed brand fill — the running-state send-key
-   replacement is a design gap filled by us (figma gives no stop form). */
-.stopping,
-.stopping:hover {
-  background: var(--dsw-alias-button-primary-dimmed);
-  color: var(--dsw-alias-label-primary);
-}
-
 .retry {
   margin-left: 8px;
   padding: 1px 8px;

packages/client/ui-conversation/src/client/skeleton/InputBar.tsx

@@ -374,7 +374,7 @@ export function InputBar({
             {machineBusy && <span className={css.pending} data-input-pending aria-label="处理中" />}
             <button
               type="button"
-              className={clsx(css.primary, running && css.stopping)}
+              className={css.primary}
               aria-label={primaryLabel}
               title={primaryLabel}
               disabled={!running && (empty || disabled || machineBusy)}
@@ -383,11 +383,11 @@ export function InputBar({
             >
               {running ? (
                 <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                  <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" />
+                  <rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
                 </svg>
               ) : (
                 <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
-                  <path d="M8 13V3.8M8 3.8L3.8 8M8 3.8L12.2 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                  <path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
                 </svg>
               )}
             </button>

packages/client/ui-conversation/src/client/toolviews/bash-sample.module.css

@@ -1,5 +1,8 @@
 /* Bash toolview: same geometry/tokens as ToolRow (figma Bash · description). */
 
+/* Row sweep mask — same masked in-flight signal and exit-glide contract as
+   ToolRow (mask always mounted, band parked off-screen; running only adds
+   the animation; the transition finishes the sweep on exit). */
 .root {
   display: flex;
   align-items: center;
@@ -7,6 +10,19 @@
   min-width: 0;
   cursor: pointer;
   border-radius: 6px;
+  mask-image: linear-gradient(100deg, #000 30%, rgba(0, 0, 0, 0.35) 50%, #000 70%);
+  mask-size: 200% 100%;
+  mask-position: -50% 0;
+  transition: mask-position 1.6s ease-out;
+}
+
+.root[data-state='running'] {
+  animation: dsh-bash-row-sweep 2.2s linear infinite;
+}
+
+@keyframes dsh-bash-row-sweep {
+  from { mask-position: 150% 0; }
+  to { mask-position: -50% 0; }
 }
 
 .leading {

packages/client/ui-conversation/src/client/toolviews/bash-sample.tsx

@@ -12,9 +12,9 @@ import css from './bash-sample.module.css'
 
 function leadingFor(state: ToolRowState) {
   switch (state) {
-    case 'running': return <StateDot state="ongoing" />
     case 'error': return <StateDot state="error" />
     case 'stopped': return <StateDot state="warning" />
+    // Running keeps the icon — the row sweep carries the in-flight signal.
     default: return <IconApiOutline14 size={14} />
   }
 }

packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx

@@ -251,7 +251,7 @@ describe('run_code sub-calls through the real chat machinery', () => {
     const b = await bench(snapshotWith([], dispatches, [runningCode(parent)]))
     const view = mountApp(b.slots)
     // The nested row derives 'running' from the RunningToolCall shape — the
-    // same StateDot ring a native in-flight row wears.
+    // same data-state chrome (row sweep) a native in-flight row wears.
     const nested = view.container.querySelector('[data-subcalls] [data-variant][data-state="running"]')
     expect(nested).not.toBeNull()
   })

packages/client/ui-conversation/tests/chat-tool-row.spec.tsx

@@ -125,12 +125,12 @@ describe('ToolRow', () => {
     expect(view.getByText('List files')).toBeTruthy()
   })
 
-  it('running and error states replace the icon with a StateDot', () => {
+  it('running keeps the icon (row sweep carries the signal); error swaps in a StateDot', () => {
     const runningView = render(<ToolRow {...rowProps} state="running" />)
-    expect(runningView.queryByTestId('tool-icon')).toBeNull()
+    expect(runningView.queryByTestId('tool-icon')).not.toBeNull()
     expect(runningView.container.querySelector('[data-state="running"]')).not.toBeNull()
     const errorView = render(<ToolRow {...rowProps} state="error" />)
-    expect(errorView.queryByTestId('tool-icon')).toBeNull()
+    expect(errorView.container.querySelector('[data-testid="tool-icon"]')).toBeNull()
   })
 
   it('non-expandable rows render a passive leading slot', () => {

packages/client/ui-conversation/tests/coverage-tails.spec.tsx

@@ -76,7 +76,7 @@ describe('tails', () => {
     expect(view.container.querySelector('[data-state="ok"]')).not.toBeNull()
   })
 
-  it('BashRow shows StateDot chrome for running/error/stopped (root session arm)', () => {
+  it('BashRow carries data-state for running (row sweep) and StateDots for error/stopped (root session arm)', () => {
     const sid = 'root-1' as SessionId
     const list = createSnapshotStore<SessionListState>({
       ids: [sid],

packages/client/ui-primitives/src/StateDot.module.css

@@ -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; }
 }

packages/client/ui-primitives/src/StateDot.tsx

@@ -1,15 +1,19 @@
 // StateDot: session state indicator (figma nodes 14:3303/3305/3312, 122:9182).
 // done/warning/error: 10x10 halo (same color, 10% opacity) around a 6x6 solid
-// core. ongoing: 10x10 ring, 1px inside stroke, color fading out along a
-// linear gradient, spinning. Colors resolve through --dsw-* tokens only.
+// core. ongoing: a pixel-art chase — the 8 outer cells of a 3x3 matrix light
+// up clockwise with a stepped trail. Colors resolve through --dsw-* tokens only.
 
-import { useId } from 'react'
 import clsx from 'clsx'
 import css from './StateDot.module.css'
 
 /** Four-color session state semantic (green done / amber approval-waiting / blue running ring / red error). */
 export type StateDotState = 'done' | 'warning' | 'ongoing' | 'error'
 
+/** Outer 3x3 matrix cells (2px pixels on a 10px grid), clockwise from top-left. */
+const MATRIX_CELLS: readonly (readonly [number, number])[] = [
+  [0, 0], [4, 0], [8, 0], [8, 4], [8, 8], [4, 8], [0, 8], [0, 4],
+]
+
 /**
  * Render a state dot.
  * @param props.state - which of the four states to show.
@@ -22,25 +26,29 @@ export function StateDot({ state, size = 10, className }: {
   size?: number
   className?: string
 }) {
-  const gradientId = useId()
   if (state === 'ongoing') {
     return (
       <svg
-        className={clsx(css.ring, className)}
+        className={clsx(css.matrix, className)}
         data-state="ongoing"
         width={size}
         height={size}
         viewBox="0 0 10 10"
+        shapeRendering="crispEdges"
         aria-hidden="true"
       >
-        <defs>
-          {/* Gradient handles from the figma node: (0.1,0) -> (0.85,1). */}
-          <linearGradient id={gradientId} x1="1" y1="0" x2="8.5" y2="10" gradientUnits="userSpaceOnUse">
-            <stop className={css.stopFrom} offset="0" />
-            <stop className={css.stopTo} offset="1" />
-          </linearGradient>
-        </defs>
-        <circle cx="5" cy="5" r="4.5" fill="none" strokeWidth="1" stroke={`url(#${gradientId})`} />
+        {MATRIX_CELLS.map(([x, y], index) => (
+          <rect
+            key={`${x}-${y}`}
+            className={css.cell}
+            x={x}
+            y={y}
+            width="2"
+            height="2"
+            /* Negative delay phases the chase so every cell animates from mount. */
+            style={{ animationDelay: `${(index - MATRIX_CELLS.length) * 125}ms` }}
+          />
+        ))}
       </svg>
     )
   }

packages/client/ui-primitives/tests/state-dot.spec.tsx

@@ -14,16 +14,17 @@ describe('StateDot', () => {
     expect(dot.getAttribute('aria-hidden')).toBe('true')
   })
 
-  it('solid states are spans; ongoing is an svg gradient ring', () => {
+  it('solid states are spans; ongoing is an svg pixel matrix', () => {
     const { container, rerender } = render(<StateDot state="done" />)
     expect(container.firstElementChild?.tagName).toBe('SPAN')
     rerender(<StateDot state="ongoing" />)
-    const ring = container.firstElementChild as SVGSVGElement
-    expect(ring.tagName).toBe('svg')
-    const circle = ring.querySelector('circle')
-    expect(circle?.getAttribute('stroke-width')).toBe('1')
-    expect(circle?.getAttribute('stroke')).toMatch(/^url\(#/)
-    expect(ring.querySelector('linearGradient')).not.toBeNull()
+    const matrix = container.firstElementChild as SVGSVGElement
+    expect(matrix.tagName).toBe('svg')
+    const cells = matrix.querySelectorAll('rect')
+    expect(cells).toHaveLength(8)
+    // Chase phase: every cell carries its own negative animation delay.
+    const delays = [...cells].map(cell => (cell).style.animationDelay)
+    expect(new Set(delays).size).toBe(8)
   })
 
   it('sizes via the size prop in both shapes', () => {