diff --git a/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.module.css b/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.module.css
index b4570af921..9177d721c3 100644
--- a/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.module.css
+++ b/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;
diff --git a/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx b/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx
index fc487843df..71b7a8a142 100644
--- a/packages/client/ui-conversation/src/client/chat/AssistantMarkdown.tsx
+++ b/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>
   )
diff --git a/packages/client/ui-conversation/src/client/chat/ChatView.module.css b/packages/client/ui-conversation/src/client/chat/ChatView.module.css
index 6d75f9a519..f4ebce83db 100644
--- a/packages/client/ui-conversation/src/client/chat/ChatView.module.css
+++ b/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;
diff --git a/packages/client/ui-conversation/src/client/chat/ChatView.tsx b/packages/client/ui-conversation/src/client/chat/ChatView.tsx
index f61c6da6ef..737f1f042f 100644
--- a/packages/client/ui-conversation/src/client/chat/ChatView.tsx
+++ b/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} />
diff --git a/packages/client/ui-conversation/src/client/chat/ToolRow.module.css b/packages/client/ui-conversation/src/client/chat/ToolRow.module.css
index 6f99bb2696..d4ae79cd71 100644
--- a/packages/client/ui-conversation/src/client/chat/ToolRow.module.css
+++ b/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 {
diff --git a/packages/client/ui-conversation/src/client/chat/ToolRow.tsx b/packages/client/ui-conversation/src/client/chat/ToolRow.tsx
index a406d05cc3..5c5d059292 100644
--- a/packages/client/ui-conversation/src/client/chat/ToolRow.tsx
+++ b/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
diff --git a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
index 11f3502325..6c18b8c1a5 100644
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
+++ b/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;
+}
diff --git a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx
index 382a42cb40..b110860685 100644
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx
+++ b/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
diff --git a/packages/client/ui-conversation/src/client/skeleton/DisabledInputBar.tsx b/packages/client/ui-conversation/src/client/skeleton/DisabledInputBar.tsx
index 118baf5ac9..bfaa0b8d02 100644
--- a/packages/client/ui-conversation/src/client/skeleton/DisabledInputBar.tsx
+++ b/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>
diff --git a/packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx b/packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx
index ca64fd7f44..fe3ee28d32 100644
--- a/packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx
+++ b/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
diff --git a/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css b/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css
index 6bc6af5fea..71b90bfdfa 100644
--- a/packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css
+++ b/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;
 }
diff --git a/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css b/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
index 7b2711da39..0cb3920f6e 100644
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
+++ b/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;
diff --git a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
index f2313d798b..f72103ffc0 100644
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/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>
diff --git a/packages/client/ui-conversation/src/client/toolviews/bash-sample.module.css b/packages/client/ui-conversation/src/client/toolviews/bash-sample.module.css
index 84224c9979..81123532d5 100644
--- a/packages/client/ui-conversation/src/client/toolviews/bash-sample.module.css
+++ b/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 {
diff --git a/packages/client/ui-conversation/src/client/toolviews/bash-sample.tsx b/packages/client/ui-conversation/src/client/toolviews/bash-sample.tsx
index dc4dd6b367..fbb1104eca 100644
--- a/packages/client/ui-conversation/src/client/toolviews/bash-sample.tsx
+++ b/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} />
   }
 }
diff --git a/packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx b/packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx
index aa9451b413..798f5c52bc 100644
--- a/packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx
+++ b/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()
   })
diff --git a/packages/client/ui-conversation/tests/chat-tool-row.spec.tsx b/packages/client/ui-conversation/tests/chat-tool-row.spec.tsx
index 13a74548b4..4425e98cb3 100644
--- a/packages/client/ui-conversation/tests/chat-tool-row.spec.tsx
+++ b/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', () => {
diff --git a/packages/client/ui-conversation/tests/coverage-tails.spec.tsx b/packages/client/ui-conversation/tests/coverage-tails.spec.tsx
index 136901bd6d..86bb99246d 100644
--- a/packages/client/ui-conversation/tests/coverage-tails.spec.tsx
+++ b/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],
diff --git a/packages/client/ui-primitives/src/StateDot.module.css b/packages/client/ui-primitives/src/StateDot.module.css
index e5a8ebdb50..e9442f46bb 100644
--- a/packages/client/ui-primitives/src/StateDot.module.css
+++ b/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; }
 }
diff --git a/packages/client/ui-primitives/src/StateDot.tsx b/packages/client/ui-primitives/src/StateDot.tsx
index c4117673ba..643f9283f4 100644
--- a/packages/client/ui-primitives/src/StateDot.tsx
+++ b/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>
     )
   }
diff --git a/packages/client/ui-primitives/tests/state-dot.spec.tsx b/packages/client/ui-primitives/tests/state-dot.spec.tsx
index a3759174ff..86e41c7787 100644
--- a/packages/client/ui-primitives/tests/state-dot.spec.tsx
+++ b/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', () => {