feat(desktop): add state-driven live turn motion

apps/desktop/renderer/src/roleweave-conversation.css

@@ -280,11 +280,24 @@
   white-space: nowrap;
 }
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__steps {
+  position: relative;
   display: grid;
   gap: 6px;
   margin: 6px 0 0 9px;
   padding: 2px 0 2px 17px;
   border-left: 1px solid var(--ui-border);
+  overflow: hidden;
+}
+:is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress[data-motion="live"] .owb-turn-progress__steps::after {
+  position: absolute;
+  top: -32px;
+  bottom: auto;
+  left: -1px;
+  width: 1px;
+  height: 32px;
+  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ui-brand) 92%, white), transparent);
+  content: "";
+  animation: owb-progress-rail 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
 }
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__steps[hidden] { display: none; }
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__step {
@@ -297,6 +310,9 @@
   color: var(--ui-foreground-muted);
   font-size: 12px;
   line-height: 1.5;
+  transform-origin: 0 50%;
+  animation: owb-progress-step-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+  animation-delay: calc(var(--progress-step, 0) * 70ms);
 }
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__step .owb-turn-progress__icon {
   width: 13px;
@@ -307,8 +323,27 @@
   animation: none;
   box-shadow: none;
 }
-:is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__step.is-current .owb-turn-progress__icon { color: var(--ui-brand); }
+:is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__step.is-current .owb-turn-progress__icon {
+  color: var(--ui-brand);
+  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ui-brand) 42%, transparent));
+}
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__step.is-current { color: var(--ui-foreground); }
+:is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__activity {
+  position: relative;
+  display: grid;
+  width: 13px;
+  height: 18px;
+  place-items: center;
+}
+:is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__activity-orbit {
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  border: 1px solid color-mix(in srgb, var(--ui-brand) 60%, transparent);
+  border-radius: 50%;
+  opacity: 0;
+  animation: owb-progress-activity 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+}
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__step:is(.is-awaiting_approval, .is-unknown) .owb-turn-progress__icon { color: var(--ui-warning); }
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__step.is-failed .owb-turn-progress__icon { color: var(--ui-danger); }
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__copy {
@@ -318,8 +353,32 @@
 :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__at { margin-left: 3px; }
 .owb-turn-progress__spinner { animation: owb-progress-spin 1s linear infinite; }
 @keyframes owb-progress-spin { to { transform: rotate(360deg); } }
+@keyframes owb-progress-step-in {
+  from { opacity: 0; transform: translateY(5px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes owb-progress-activity {
+  0% { opacity: 0.6; transform: scale(0.55); }
+  70%, 100% { opacity: 0; transform: scale(1.35); }
+}
+@keyframes owb-progress-rail {
+  0% { transform: translateY(0); opacity: 0; }
+  20% { opacity: 1; }
+  80% { opacity: 1; }
+  100% { transform: translateY(104px); opacity: 0; }
+}
 @media (prefers-reduced-motion: reduce) {
-  .owb-turn-progress__spinner { animation: none; }
+  :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__spinner,
+  :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__activity-orbit,
+  :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__step,
+  :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress[data-motion="live"] .owb-turn-progress__steps::after {
+    animation: none;
+    animation-delay: 0ms;
+  }
+  :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress__activity-orbit,
+  :is([data-theme="light"], [data-theme="dark"]) .owb-app .owb-turn-progress[data-motion="live"] .owb-turn-progress__steps::after {
+    display: none;
+  }
 }
 
 /* Public output flows as the reply body. The header retains the explicit

apps/desktop/renderer/src/turns/TurnThread.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
 import { AlertTriangle, Check, ChevronRight, LoaderCircle, MessagesSquare, RotateCcw, ShieldAlert, ShieldQuestion } from "lucide-react";
 import { Markdown, markdownToPlainText } from "../markdown/Markdown";
 import { useConversationCopy } from "../locales/conversation";
@@ -69,7 +69,12 @@ function fallbackProgress(turn: TurnRecord): Array<{ kind: TurnProgressKind; at?
 }
 
 function ProgressIcon({ kind, active }: { kind: TurnProgressKind; active: boolean }) {
-  if (active) return <LoaderCircle className="owb-turn-progress__spinner" aria-hidden="true" size={12} />;
+  if (active) return (
+    <span className="owb-turn-progress__activity" aria-hidden="true">
+      <span className="owb-turn-progress__activity-orbit" />
+      <LoaderCircle className="owb-turn-progress__spinner" size={12} />
+    </span>
+  );
   if (kind === "awaiting_approval") return <ShieldAlert aria-hidden="true" size={12} />;
   if (kind === "failed" || kind === "unknown") return <AlertTriangle aria-hidden="true" size={12} />;
   return <Check aria-hidden="true" size={12} />;
@@ -136,7 +141,8 @@ export function ProgressTrail({ turn, approvalDecided = false }: { turn: TurnRec
     unknown: t("turn.progressUnknown"),
   };
   return (
-    <div className={`owb-turn-progress is-${state}`} role="group" aria-label={t("turn.progressAria")}>
+    <div className={`owb-turn-progress is-${state}`} role="group" aria-label={t("turn.progressAria")}
+      data-motion={running ? "live" : undefined}>
       <div className="owb-turn-progress__summary">
         <button type="button" className="owb-turn-progress__header"
           aria-label={`${t("turn.progressDetails")} · ${summary}`} aria-expanded={open} aria-controls={stepsId}
@@ -152,7 +158,8 @@ export function ProgressTrail({ turn, approvalDecided = false }: { turn: TurnRec
           const offset = elapsedSeconds(turn.createdAt, step.at);
           return (
             <li className={`owb-turn-progress__step is-${step.kind}${active ? " is-current" : ""}`}
-              key={`${step.kind}-${step.at}-${index}`} aria-current={active ? "step" : undefined}>
+              key={`${step.kind}-${step.at}-${index}`} aria-current={active ? "step" : undefined}
+              data-motion={active ? "active" : undefined} style={{ "--progress-step": index } as CSSProperties}>
               <span className="owb-turn-progress__icon"><ProgressIcon kind={step.kind} active={active} /></span>
               <span className="owb-turn-progress__copy">{labels[step.kind]}</span>
               {offset !== null ? <time className="owb-turn-progress__at" dateTime={step.at}>{formatElapsed(offset)}</time> : null}

apps/desktop/renderer/test/turn-progress-interaction.test.tsx

@@ -1,4 +1,6 @@
 import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { TurnThread } from "../src/turns/TurnThread";
 import type { TurnRecord } from "../src/turns/types";
@@ -31,6 +33,38 @@ describe("conversation progress disclosure", () => {
     expect(screen.getByRole("timer")).toHaveTextContent("10s");
   });
 
+  it("exposes real live motion hooks and removes them when the turn completes", () => {
+    const { rerender } = render(<TurnThread turns={[turn()]} />);
+    const progress = screen.getByRole("group", { name: "执行进展" });
+    const liveStep = document.querySelector('[aria-current="step"]');
+    expect(progress).toHaveAttribute("data-motion", "live");
+    expect(liveStep).toHaveClass("is-current");
+    expect(liveStep).toHaveAttribute("data-motion", "active");
+    expect(liveStep?.querySelector(".owb-turn-progress__activity")).toBeInTheDocument();
+
+    rerender(<TurnThread turns={[turn({ status: "completed", completedAt: ended,
+      progress: [...turn().progress!, { kind: "completed", at: ended }] })]} />);
+    expect(progress).not.toHaveAttribute("data-motion");
+    expect(document.querySelector(".owb-turn-progress__activity")).toBeNull();
+  });
+
+  it("ships state-driven motion with a complete reduced-motion fallback", () => {
+    const css = readFileSync(join(process.cwd(), "apps/desktop/renderer/src/roleweave-conversation.css"), "utf8");
+    expect(css).toContain("@keyframes owb-progress-step-in");
+    expect(css).toContain("@keyframes owb-progress-activity");
+    expect(css).toContain("@keyframes owb-progress-rail");
+    expect(css).toMatch(/\[data-motion="live"\][^{]*::after/);
+    expect(css).toMatch(/prefers-reduced-motion:\s*reduce[\s\S]*:is\(\[data-theme="light"\], \[data-theme="dark"\]\) \.owb-app \.owb-turn-progress__spinner,[\s\S]*:is\(\[data-theme="light"\], \[data-theme="dark"\]\) \.owb-app \.owb-turn-progress__step[\s\S]*animation:\s*none/);
+  });
+
+  it("does not animate a running record that is waiting for approval", () => {
+    render(<TurnThread turns={[turn({ approvalRequest: {
+      approvalId: "approve-live", kind: "write", description: "保存检查结果",
+    }, progress: [...turn().progress!, { kind: "awaiting_approval", at: ended }] })]} />);
+    expect(screen.getByRole("group", { name: "执行进展" })).not.toHaveAttribute("data-motion");
+    expect(document.querySelector(".owb-turn-progress__activity")).toBeNull();
+  });
+
   it("preserves a user's closed disclosure while streamed output changes", () => {
     const { rerender } = render(<TurnThread turns={[turn()]} />);
     fireEvent.click(disclosure());