feat(effort): 波纹 v4 — 平滑波 + 全色环旋转 + 淡入淡出 + 宽度自适应

- 波函数改 (sin+1)/2：消除 max(0,sin) 平直暗带（约 6 行宽）
- 主色相连续旋转（0.03°/ms，12s/圈全色环）：蓝→紫→品红→红→橙→黄→绿→青
- 文字 overlay 同步色相旋转（rotateHue 应用到 Faster/▲/档位名/分隔线/副标签）
- 淡入淡出动画：fadeColor/fadeCells + fade 状态机 ~300ms 进出过渡
- 副标签固定 ultracode 段下方，不跟随光标移动
- 顶部/底部各加一行纯波纹行，视觉一致
- 宽度自适应终端列数：窄则 72，宽则铺满（computeSegment/computeRippleSourceX）
- 快捷键改 plain Text，不参与波纹背景渲染
- 新增 18 测试（fadeColor/fadeCells/rotateHue/getHueShiftAtTime）

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

src/components/EffortPanel/EffortPanel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseText, Box, Text } from '@anthropic/ink';
+import { BaseText, Box, Text, useTerminalSize } from '@anthropic/ink';
 import { useKeybindings } from '../../keybindings/useKeybinding.js';
 import { type EffortValue, getDisplayedEffortLevel, getEffortEnvOverride } from '../../utils/effort.js';
 import {
@@ -22,30 +22,70 @@ import {
   applyOverlaysToCells,
   cellsToSegments,
   computeRippleCells,
+  fadeCells,
+  getHueShiftAtTime,
+  rotateHue,
 } from './rippleAnimation.js';
 
-// 每档固定宽度，Ink Box 自动对齐。PANEL_WIDTH = SEGMENT * 6。
+/**
-const SEGMENT = 12;
+ * 每档最小宽度（足够装下 'ultracode' 9 字符 + 居中留白）。
-const PANEL_WIDTH = SEGMENT * PANEL_POSITIONS.length;
+ * 当终端窄时使用此值，保证最低可读性。
+ */
+const MIN_SEGMENT = 12;
+
 const SUBLABEL_ULTRACODE = 'xhigh + workflows';
 
 // 颜色：与项目主题对齐（suggestion=Medium blue #5769F7）。
 const COLOR_LABEL_SELECTED = '#5769F7'; // 选中档位（suggestion）
-const COLOR_LABEL_DEFAULT = '#8a8a8a'; // 未选中档位（subtle gray）
+const COLOR_LABEL_DEFAULT = '#7a8eff'; // 未选中档位（淡紫蓝，与波纹背景协调）
 const COLOR_OVERLAY = '#5769F7'; // Faster / Smarter / ▲ 等 overlay 文字
 
-// 波纹震源坐标（相对波纹区域坐标系，y=0 是档位名行）。
+// 淡入淡出每帧步长：60ms 间隔下 5 帧达到目标 ≈ 300ms 动画时长。
-// ultracode 字符在 SEGMENT*5=60 起始段内居中（9 字符 in 12 列 → 偏移 1.5 → 1），
+const FADE_STEP = 0.2;
-// 中心列 ≈ 60 + 1 + 4 = 65。
+
-const RIPPLE_SOURCE_X = SEGMENT * 5 + 5;
+// 波纹震源 y 坐标（相对波纹区域坐标系，y=0 是档位名行）。
 const RIPPLE_SOURCE_Y = 0;
 
 /**
- * 计算某段 idx 内居中文字的起始列。
+ * 根据终端宽度计算每档实际宽度（SEGMENT）。
- * 'ultracode' = 9 字符 in SEGMENT=12 → offset = floor((12-9)/2) = 1。
+ *
+ * 规则：
+ * - 留出 paddingX={1} 的左右各 1 列 → 可用宽度 = columns - 2
+ * - 若可用宽度 <= MIN_SEGMENT * 6（72），用 MIN_SEGMENT（保持当前窄布局）
+ * - 否则铺满：floor(可用宽度 / 6)
+ *
+ * 即"窄则不变，宽则铺满"。最小宽度保证 'ultracode' 9 字符能正常显示。
  */
-function segmentTextStartX(idx: number, textLen: number): number {
+function computeSegment(terminalColumns: number): number {
-  return SEGMENT * idx + Math.max(0, Math.floor((SEGMENT - textLen) / 2));
+  const available = terminalColumns - 2; // paddingX={1} 两侧
+  const minNeeded = MIN_SEGMENT * PANEL_POSITIONS.length;
+  if (available <= minNeeded) return MIN_SEGMENT;
+  return Math.floor(available / PANEL_POSITIONS.length);
+}
+
+/**
+ * 计算波纹震源 x 坐标（ultracode 段内 'ultracode' 标签的中心列）。
+ *
+ * 'ultracode' 是 9 字符，在 SEGMENT 列内居中：
+ *   offset = floor((SEGMENT - 9) / 2)
+ *   labelCenter = SEGMENT * 5 + offset + 4  （4 是 9 字符串的中心偏移）
+ *
+ * SEGMENT=12 → 60 + 1 + 4 = 65（与历史值一致）
+ * SEGMENT=20 → 100 + 5 + 4 = 109
+ */
+function computeRippleSourceX(segment: number): number {
+  const LABEL_LEN = 9; // 'ultracode'
+  const offset = Math.max(0, Math.floor((segment - LABEL_LEN) / 2));
+  const labelCenter = Math.floor(LABEL_LEN / 2); // 4
+  return segment * (PANEL_POSITIONS.length - 1) + offset + labelCenter;
+}
+
+/**
+ * 计算某段 idx 内居中文字的起始列。
+ * 动态 segment：textLen 字符在 segment 列内居中。
+ */
+function segmentTextStartX(idx: number, textLen: number, segment: number): number {
+  return segment * idx + Math.max(0, Math.floor((segment - textLen) / 2));
 }
 
 type Props = {
@@ -56,6 +96,13 @@ type Props = {
 export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode {
   const setAppState = useSetAppState();
   const model = useMainLoopModel();
+  const { columns } = useTerminalSize();
+
+  // 自适应宽度：根据终端列数计算每档宽度。
+  // 终端变化（resize）时 columns 改变 → 重新计算 → 重渲染。
+  const segment = React.useMemo(() => computeSegment(columns), [columns]);
+  const panelWidth = segment * PANEL_POSITIONS.length;
+  const rippleSourceX = React.useMemo(() => computeRippleSourceX(segment), [segment]);
 
   const envOverride = getEffortEnvOverride();
   const displayed = getDisplayedEffortLevel(model, appStateEffort);
@@ -64,8 +111,23 @@ export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode
   const [cursor, setCursor] = React.useState<PanelPosition>(initialCursor);
   const [done, setDone] = React.useState(false);
 
-  const rippleActive = cursor === 'ultracode';
+  const isOnUltracode = cursor === 'ultracode';
-  const [rippleRef, time] = useRippleFrame(rippleActive);
+  const [fade, setFade] = React.useState(0);
+  // 仍在波纹模式：cursor 在 ultracode，或退出动画未结束（fade > 0）
+  const showingRipple = isOnUltracode || fade > 0.001;
+  const [rippleRef, time] = useRippleFrame(showingRipple);
+
+  // 淡入淡出驱动：每 tick（time 推进）朝目标步进 FADE_STEP。
+  // 退出动画完成后 fade 归零，showingRipple 变 false，时钟停止订阅。
+  React.useEffect(() => {
+    if (!showingRipple) return;
+    const target = isOnUltracode ? 1 : 0;
+    setFade(prev => {
+      if (prev === target) return prev;
+      const next = target > prev ? prev + FADE_STEP : prev - FADE_STEP;
+      return target > prev ? Math.min(target, next) : Math.max(target, next);
+    });
+  }, [time, isOnUltracode, showingRipple]);
 
   const handleConfirm = React.useCallback(() => {
     if (done) return;
@@ -102,32 +164,42 @@ export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode
   const envRaw = process.env.CLAUDE_CODE_EFFORT_LEVEL;
 
   // 波纹行 cells 计算：返回该行所有 cell（含 overlay 文字）
+  // fade 控制背景颜色亮度（0 → 全 transparent，1 → 完整波纹）。
+  // 文字 overlay 也乘以 fade，让进入/退出动画整体淡入淡出。
   const renderRippleRow = React.useCallback(
     (relY: number, overlays: Overlay[]): Segment[] => {
       const cells = computeRippleCells({
         y: relY + RIPPLE_SOURCE_Y,
-        width: PANEL_WIDTH,
+        width: panelWidth,
         time,
-        sourceX: RIPPLE_SOURCE_X,
+        sourceX: rippleSourceX,
         sourceY: RIPPLE_SOURCE_Y,
       });
       const overlayed = applyOverlaysToCells(cells, overlays);
-      return cellsToSegments(overlayed);
+      const faded = fadeCells(overlayed, fade);
+      return cellsToSegments(faded);
     },
-    [time],
+    [time, fade, panelWidth, rippleSourceX],
   );
 
   return (
-    <Box ref={rippleRef} flexDirection="column" paddingX={1} width={PANEL_WIDTH + 2}>
+    <Box ref={rippleRef} flexDirection="column" paddingX={1} width={panelWidth + 2}>
       <Text bold color="suggestion">
         Effort
       </Text>
       {envActive && <Text color="warning">{`⚠ CLAUDE_CODE_EFFORT_LEVEL=${envRaw} overrides this session`}</Text>}
-      {rippleActive ? (
+      {showingRipple ? (
-        <RippleContent renderRow={renderRippleRow} cursor={cursor} />
+        <RippleContent
+          renderRow={renderRippleRow}
+          cursor={cursor}
+          fade={fade}
+          segment={segment}
+          panelWidth={panelWidth}
+          time={time}
+        />
       ) : (
         <>
-          <PlainContent cursor={cursor} />
+          <PlainContent cursor={cursor} segment={segment} panelWidth={panelWidth} />
           <Box marginTop={1}>
             <Text color="subtle">←/→ adjust · Enter confirm · Esc cancel</Text>
           </Box>
@@ -139,17 +211,25 @@ export function EffortPanel({ appStateEffort, onDone }: Props): React.ReactNode
 
 // ---- 普通模式（无波纹）----
 
-function PlainContent({ cursor }: { cursor: PanelPosition }): React.ReactNode {
+function PlainContent({
+  cursor,
+  segment,
+  panelWidth,
+}: {
+  cursor: PanelPosition;
+  segment: number;
+  panelWidth: number;
+}): React.ReactNode {
   return (
     <>
       <Box marginTop={1} flexDirection="row" justifyContent="space-between">
         <Text color="suggestion">Faster</Text>
         <Text color="suggestion">Smarter</Text>
       </Box>
-      <Text color="subtle">{'─'.repeat(PANEL_WIDTH)}</Text>
+      <Text color="subtle">{'─'.repeat(panelWidth)}</Text>
       <Box flexDirection="row">
         {PANEL_POSITIONS.map(p => (
-          <Box key={`cursor-${p}`} width={SEGMENT} justifyContent="center">
+          <Box key={`cursor-${p}`} width={segment} justifyContent="center">
             <Text bold color={cursor === p ? 'suggestion' : 'subtle'}>
               {cursor === p ? '▲' : ' '}
             </Text>
@@ -158,7 +238,7 @@ function PlainContent({ cursor }: { cursor: PanelPosition }): React.ReactNode {
       </Box>
       <Box flexDirection="row">
         {PANEL_POSITIONS.map(p => (
-          <Box key={`label-${p}`} width={SEGMENT} justifyContent="center">
+          <Box key={`label-${p}`} width={segment} justifyContent="center">
             <Text bold={cursor === p} color={cursor === p ? 'suggestion' : 'subtle'}>
               {p}
             </Text>
@@ -166,8 +246,8 @@ function PlainContent({ cursor }: { cursor: PanelPosition }): React.ReactNode {
         ))}
       </Box>
       <Box flexDirection="row">
-        <Box width={SEGMENT * (PANEL_POSITIONS.length - 1)} />
+        <Box width={segment * (PANEL_POSITIONS.length - 1)} />
-        <Box width={SEGMENT} justifyContent="center">
+        <Box width={segment} justifyContent="center">
           <Text color="subtle">{SUBLABEL_ULTRACODE}</Text>
         </Box>
       </Box>
@@ -193,58 +273,73 @@ function PlainContent({ cursor }: { cursor: PanelPosition }): React.ReactNode {
 type RippleContentProps = {
   renderRow: (relY: number, overlays: Overlay[]) => Segment[];
   cursor: PanelPosition;
+  fade: number;
+  segment: number;
+  panelWidth: number;
+  time: number;
 };
 
-function RippleContent({ renderRow, cursor }: RippleContentProps): React.ReactNode {
+function RippleContent({ renderRow, cursor, segment, panelWidth, time }: RippleContentProps): React.ReactNode {
-  const cursorIdx = PANEL_POSITIONS.indexOf('ultracode');
+  // 光标索引跟随 cursor（退出动画期间 cursor 已移到别处，
+  // 让 ▲ overlay 跟着移走，ultracode 段恢复普通背景色）。
+  const cursorIdx = PANEL_POSITIONS.indexOf(cursor);
+  // 副标签固定在 ultracode 段下方，不跟随光标移动。
+  const ultracodeIdx = PANEL_POSITIONS.length - 1;
 
-  const fasterOverlay: Overlay = { text: 'Faster', x: 0, color: COLOR_OVERLAY };
+  // 文字颜色跟随波浪色相旋转：取当前 time 的 hueShift，
+  // 应用到所有 overlay 颜色，让文字与背景色环保持同步。
+  const hueShift = getHueShiftAtTime(time);
+  const overlayColor = rotateHue(COLOR_OVERLAY, hueShift);
+  const labelSelectedColor = rotateHue(COLOR_LABEL_SELECTED, hueShift);
+  const labelDefaultColor = rotateHue(COLOR_LABEL_DEFAULT, hueShift);
+
+  const fasterOverlay: Overlay = { text: 'Faster', x: 0, color: overlayColor };
   const smarterOverlay: Overlay = {
     text: 'Smarter',
-    x: PANEL_WIDTH - 'Smarter'.length,
+    x: panelWidth - 'Smarter'.length,
-    color: COLOR_OVERLAY,
+    color: overlayColor,
   };
   const separatorOverlay: Overlay = {
-    text: '─'.repeat(PANEL_WIDTH),
+    text: '─'.repeat(panelWidth),
     x: 0,
-    color: COLOR_LABEL_DEFAULT,
+    color: labelDefaultColor,
   };
   const cursorOverlay: Overlay = {
     text: '▲',
-    x: segmentTextStartX(cursorIdx, 1),
+    x: segmentTextStartX(cursorIdx, 1, segment),
-    color: COLOR_OVERLAY,
+    color: overlayColor,
   };
   const labelOverlays: Overlay[] = PANEL_POSITIONS.map((p, idx) => ({
     text: p,
-    x: segmentTextStartX(idx, p.length),
+    x: segmentTextStartX(idx, p.length, segment),
-    color: p === cursor ? COLOR_LABEL_SELECTED : COLOR_LABEL_DEFAULT,
+    color: p === cursor ? labelSelectedColor : labelDefaultColor,
   }));
   const sublabelOverlay: Overlay = {
     text: SUBLABEL_ULTRACODE,
-    x: segmentTextStartX(cursorIdx, SUBLABEL_ULTRACODE.length),
+    x: segmentTextStartX(ultracodeIdx, SUBLABEL_ULTRACODE.length, segment),
-    color: COLOR_LABEL_DEFAULT,
+    color: labelDefaultColor,
-  };
-  const hintOverlay: Overlay = {
-    text: '←/→ adjust · Enter confirm · Esc cancel',
-    x: 0,
-    color: COLOR_LABEL_DEFAULT,
   };
 
   // 各行 y 坐标（相对震源 RIPPLE_SOURCE_Y = 档位名行）
+  //   y=-4: 顶部纯波纹行（视觉一致，无 overlay）
   //   y=-3: Faster/Smarter
   //   y=-2: 分隔线
   //   y=-1: ▲
   //   y=0:  档位名（震源）
   //   y=1:  副标签
-  //   y=2:  快捷键行（y 方向延伸覆盖到底部）
+  //   y=2:  底部纯波纹行（视觉一致，无 overlay）
+  //
+  // 快捷键行：plain Text，不参与波纹渲染（无背景动画），紧贴底部波纹行。
   return (
     <>
+      <RippleRow segments={renderRow(-4, [])} />
       <RippleRow segments={renderRow(-3, [fasterOverlay, smarterOverlay])} />
       <RippleRow segments={renderRow(-2, [separatorOverlay])} />
       <RippleRow segments={renderRow(-1, [cursorOverlay])} />
       <RippleRow segments={renderRow(0, labelOverlays)} />
       <RippleRow segments={renderRow(1, [sublabelOverlay])} />
-      <RippleRow segments={renderRow(2, [hintOverlay])} />
+      <RippleRow segments={renderRow(2, [])} />
+      <Text color={COLOR_LABEL_DEFAULT}>←/→ adjust · Enter confirm · Esc cancel</Text>
     </>
   );
 }

src/components/EffortPanel/__tests__/rippleAnimation.test.ts

@@ -6,7 +6,11 @@ import {
   applyOverlaysToCells,
   cellsToSegments,
   computeRippleCells,
+  fadeCells,
+  fadeColor,
+  getHueShiftAtTime,
   intensityToColor,
+  rotateHue,
 } from '../rippleAnimation.js'
 
 describe('intensityToColor', () => {
@@ -40,6 +44,104 @@ describe('intensityToColor', () => {
   test('intensity=1 → suggestion 档（波峰最高档）', () => {
     expect(intensityToColor(1)).toBe('#5769F7')
   })
+
+  test('hueShift=0 → 与无 hueShift 相同（快路径）', () => {
+    for (const v of [0, 0.2, 0.5, 0.8, 1]) {
+      expect(intensityToColor(v, 0)).toBe(intensityToColor(v))
+    }
+  })
+
+  test('hueShift ≠ 0 → 返回不同颜色（但仍是合法 hex）', () => {
+    const base = intensityToColor(0.8)
+    const shifted = intensityToColor(0.8, 30)
+    expect(shifted).toMatch(/^#[0-9a-fA-F]{6}$/)
+    expect(shifted).not.toBe(base)
+  })
+
+  test('hueShift 180° → 大致补色（亮色变暗色族）', () => {
+    // #5769F7 ≈ HSL(233, 91, 65)，旋转 180° → HSL(53, 91, 65) ≈ 黄色系
+    const shifted = intensityToColor(1, 180)
+    expect(shifted).toMatch(/^#[0-9a-fA-F]{6}$/)
+    // 不再是蓝紫族（R 分量应明显大于 B 分量）
+    const r = parseInt(shifted.slice(1, 3), 16)
+    const b = parseInt(shifted.slice(5, 7), 16)
+    expect(r).toBeGreaterThan(b)
+  })
+})
+
+describe('rotateHue', () => {
+  test('hueShift=0 → 原样返回（快路径，无 round-trip 误差）', () => {
+    expect(rotateHue('#5769F7', 0)).toBe('#5769F7')
+    expect(rotateHue('#1a1f3a', 0)).toBe('#1a1f3a')
+  })
+
+  test('旋转 360° → 等同原色（一圈回起点，大小写无关）', () => {
+    expect(rotateHue('#5769F7', 360).toLowerCase()).toBe('#5769f7')
+    expect(rotateHue('#5769F7', -360).toLowerCase()).toBe('#5769f7')
+  })
+
+  test('旋转 ±n*360° → 等同原色（任意整圈）', () => {
+    expect(rotateHue('#3a4582', 720).toLowerCase()).toBe('#3a4582')
+    expect(rotateHue('#3a4582', -1080).toLowerCase()).toBe('#3a4582')
+  })
+
+  test('灰度色（saturation=0）旋转后不变', () => {
+    // #808080 = (128,128,128)，saturation=0，旋转无意义
+    expect(rotateHue('#808080', 90)).toBe('#808080')
+  })
+
+  test('非法 hex → 原样返回（防御式）', () => {
+    expect(rotateHue('not-a-color', 90)).toBe('not-a-color')
+    expect(rotateHue('#123', 90)).toBe('#123')
+  })
+
+  test('旋转后保持 6 位 hex 格式', () => {
+    const rotated = rotateHue('#5769F7', 45)
+    expect(rotated).toMatch(/^#[0-9a-fA-F]{6}$/)
+  })
+})
+
+describe('getHueShiftAtTime', () => {
+  test('time=0 → 0', () => {
+    expect(getHueShiftAtTime(0)).toBe(0)
+  })
+
+  test('time > 0 → 在 [0, 360) 范围内（连续旋转，非负）', () => {
+    for (const t of [100, 500, 1000, 2000, 5000, 10000, 50000, 100000]) {
+      const shift = getHueShiftAtTime(t)
+      expect(shift).toBeGreaterThanOrEqual(0)
+      expect(shift).toBeLessThan(360)
+    }
+  })
+
+  test('time 推进 → hueShift 单调递增（模 360）', () => {
+    // 在一个周期内（12000ms），hueShift 应单调递增
+    const samples = [0, 1000, 2000, 3000, 4000, 5000, 6000]
+    const shifts = samples.map(getHueShiftAtTime)
+    for (let i = 1; i < shifts.length; i++) {
+      expect(shifts[i]).toBeGreaterThan(shifts[i - 1])
+    }
+  })
+
+  test('周期 12000ms（time=12000 应回到 0，模 360）', () => {
+    // 12000ms * 0.03 = 360，% 360 = 0
+    const shift = getHueShiftAtTime(12000)
+    expect(shift).toBe(0)
+  })
+
+  test('半周期 6000ms → hueShift=180（对面色相）', () => {
+    // 6000ms * 0.03 = 180
+    expect(getHueShiftAtTime(6000)).toBe(180)
+  })
+
+  test('四分之一周期 3000ms → hueShift=90', () => {
+    expect(getHueShiftAtTime(3000)).toBe(90)
+  })
+
+  test('多周期循环：time=24000 等同 time=0', () => {
+    expect(getHueShiftAtTime(24000)).toBe(0)
+    expect(getHueShiftAtTime(36000)).toBe(0)
+  })
 })
 
 describe('computeRippleCells', () => {
@@ -95,8 +197,8 @@ describe('computeRippleCells', () => {
     ).toEqual([])
   })
 
-  test('震源点 time=0 时为波谷（最暗档），time 推进后出现亮档', () => {
+  test('震源点 time=0 时为中间档（(sin+1)/2 → intensity=0.5），time 推进后扫过波峰/波谷', () => {
-    // dist=0，time=0 时 phase = -0 = 0，sin(0)=0 → wave=0 → intensity=0 → 最暗档
+    // v5 平滑波：dist=0，time=0 时 phase=0，sin(0)=0，(0+1)/2=0.5 → intensity=0.5 → 中间档
     const t0 = computeRippleCells({
       y: 5,
       width: 11,
@@ -104,9 +206,10 @@ describe('computeRippleCells', () => {
       sourceX: 5,
       sourceY: 5,
     })
-    expect(t0[5].color).toBe('#1a1f3a')
+    // 0.5 * 7 = 3.5, floor = 3, RIPPLE_COLOR_STOPS[3] = '#2e3870'
+    expect(t0[5].color).toBe('#2e3870')
 
-    // time 推进，phase 变化，震源会扫过波峰
+    // time 推进，phase 变化，震源会扫过波峰（亮档）和波谷（暗档）
     const t1 = computeRippleCells({
       y: 5,
       width: 11,
@@ -114,7 +217,8 @@ describe('computeRippleCells', () => {
       sourceX: 5,
       sourceY: 5,
     })
-    expect(t1[5].color).not.toBe('#1a1f3a')
+    // 不同 time 不同颜色（动画推进）
+    expect(t1[5].color).not.toBe('#2e3870')
   })
 
   test('覆盖半径扩大：dist=65（左侧远端）仍有非最暗颜色', () => {
@@ -304,3 +408,94 @@ describe('cellsToSegments', () => {
     expect(cellsToSegments(cells)[0].text).toBe('123')
   })
 })
+
+describe('fadeColor', () => {
+  test('fade=1 → 原色（不变）', () => {
+    expect(fadeColor('#5769F7', 1)).toBe('#5769f7')
+  })
+
+  test('fade=0 → TRANSPARENT（cell 不渲染）', () => {
+    expect(fadeColor('#5769F7', 0)).toBe(TRANSPARENT)
+  })
+
+  test('fade ≤ 0.01 → TRANSPARENT（阈值）', () => {
+    expect(fadeColor('#5769F7', 0.01)).toBe(TRANSPARENT)
+    expect(fadeColor('#5769F7', 0.009)).toBe(TRANSPARENT)
+  })
+
+  test('fade=0.5 → RGB 各分量减半', () => {
+    // #5769F7 = (87, 105, 247)，减半 → (44, 53, 124) = #2c357c
+    // Math.round(87*0.5)=44, Math.round(105*0.5)=53, Math.round(247*0.5)=124
+    expect(fadeColor('#5769F7', 0.5)).toBe('#2c357c')
+  })
+
+  test('TRANSPARENT 输入 → 原样返回（不处理）', () => {
+    expect(fadeColor(TRANSPARENT, 1)).toBe(TRANSPARENT)
+    expect(fadeColor(TRANSPARENT, 0.5)).toBe(TRANSPARENT)
+  })
+
+  test('非法 hex 格式 → 原样返回（防御式）', () => {
+    expect(fadeColor('not-a-color', 0.5)).toBe('not-a-color')
+    expect(fadeColor('#123', 0.5)).toBe('#123') // 非 6 位 hex
+  })
+
+  test('fade < 0 钳到 0 → TRANSPARENT', () => {
+    expect(fadeColor('#5769F7', -0.5)).toBe(TRANSPARENT)
+  })
+
+  test('fade > 1 钳到 1 → 原色', () => {
+    expect(fadeColor('#5769F7', 1.5)).toBe('#5769f7')
+  })
+
+  test('结果始终为 6 位 hex（前导零补全）', () => {
+    // #010203 = (1, 2, 3)，fade=0.5 → Math.round 后为 (1, 1, 2) = #010102
+    // 但 1*0.5 = 0.5, Math.round(0.5) = 1（ banker's rounding 在 JS 中是 round half up）
+    // 验证格式：6 位 hex
+    const result = fadeColor('#010203', 0.5)
+    expect(result).toMatch(/^#[0-9a-f]{6}$/)
+  })
+})
+
+describe('fadeCells', () => {
+  test('空数组 → 空数组', () => {
+    expect(fadeCells([], 0.5)).toEqual([])
+  })
+
+  test('每个 cell 的颜色按 fade 缩放，char 保留', () => {
+    const cells: Cell[] = [
+      { char: ' ', color: '#5769F7' },
+      { char: 'A', color: '#ffffff' },
+    ]
+    const out = fadeCells(cells, 0.5)
+    expect(out[0]).toEqual({ char: ' ', color: '#2c357c' })
+    // #ffffff = (255, 255, 255)，fade=0.5 → (128, 128, 128) = #808080
+    expect(out[1]).toEqual({ char: 'A', color: '#808080' })
+  })
+
+  test('不修改原数组（防御式拷贝）', () => {
+    const cells: Cell[] = [{ char: ' ', color: '#5769F7' }]
+    const snapshot = cells.map(c => ({ ...c }))
+    fadeCells(cells, 0.5)
+    expect(cells).toEqual(snapshot)
+  })
+
+  test('TRANSPARENT cell 保持 TRANSPARENT', () => {
+    const cells: Cell[] = [
+      { char: ' ', color: TRANSPARENT },
+      { char: ' ', color: '#5769F7' },
+    ]
+    const out = fadeCells(cells, 0.5)
+    expect(out[0].color).toBe(TRANSPARENT)
+    expect(out[1].color).toBe('#2c357c')
+  })
+
+  test('fade=0 → 所有非 transparent 颜色变 TRANSPARENT', () => {
+    const cells: Cell[] = [
+      { char: ' ', color: '#5769F7' },
+      { char: ' ', color: '#1a1f3a' },
+    ]
+    const out = fadeCells(cells, 0)
+    expect(out[0].color).toBe(TRANSPARENT)
+    expect(out[1].color).toBe(TRANSPARENT)
+  })
+})

src/components/EffortPanel/rippleAnimation.ts

@@ -23,6 +23,9 @@
  * 最暗档用 #1a1f3a（紫黑，亮度 ~12%），不是纯黑——避免远端波谷
  * 看起来像"硬黑边"。波峰最高升到 suggestion (#5769F7)，避免与
  * 文字 overlay（也用 suggestion 系）同色互相吞噬。
+ *
+ * 这些是 base 颜色（hueShift=0 时返回）。生产代码会传 hueShift 让
+ * 整个梯度绕色相环旋转，制造主色随时间漂移的视觉效果。
  */
 const RIPPLE_COLOR_STOPS = [
   '#1a1f3a', // 0.00 ~ 0.14 — 最暗（紫黑底色，非纯黑）
@@ -34,19 +37,128 @@ const RIPPLE_COLOR_STOPS = [
   '#5769F7', // 0.84 ~ 1.00 — suggestion (波峰)
 ] as const
 
+/**
+ * 色相连续旋转速度（度/ms）。
+ * 周期 = 360 / 0.03 = 12000ms = 12s，远慢于波纹相位（~1.6s），
+ * 让主色漂移感"ambient"而非"动画"。
+ *
+ * 连续旋转（非 sin 振荡）让色相 0~360° 全色环都被访问：
+ * 蓝 233° → 紫 270° → 品红 300° → 红 0° → 橙 30° → 黄 60° →
+ * 绿 120° → 青 180° → 蓝 233°（一圈）。
+ */
+const HUE_ROTATION_DEG_PER_MS = 0.03
+
+/**
+ * hex → {h, s, l}（h 单位度，s/l 为 0~1）。
+ *
+ * 标准 RGB → HSL 转换。非法 hex（非 #rrggbb）→ h=0, s=0, l=0（黑）。
+ */
+function hexToHsl(hex: string): { h: number; s: number; l: number } {
+  if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return { h: 0, s: 0, l: 0 }
+  const r = parseInt(hex.slice(1, 3), 16) / 255
+  const g = parseInt(hex.slice(3, 5), 16) / 255
+  const b = parseInt(hex.slice(5, 7), 16) / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+  const d = max - min
+  if (d === 0) return { h: 0, s: 0, l }
+  const s = d / (1 - Math.abs(2 * l - 1))
+  let h: number
+  if (max === r) {
+    h = 60 * (((g - b) / d) % 6)
+  } else if (max === g) {
+    h = 60 * ((b - r) / d + 2)
+  } else {
+    h = 60 * ((r - g) / d + 4)
+  }
+  if (h < 0) h += 360
+  return { h, s, l }
+}
+
+/**
+ * {h, s, l} → hex。
+ *
+ * 标准 HSL → RGB 转换。h 自动 mod 360 处理。
+ */
+function hslToHex(h: number, s: number, l: number): string {
+  const hNorm = ((h % 360) + 360) % 360
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const hPrime = hNorm / 60
+  const x = c * (1 - Math.abs((hPrime % 2) - 1))
+  let r = 0
+  let g = 0
+  let b = 0
+  if (hPrime < 1) {
+    r = c
+    g = x
+  } else if (hPrime < 2) {
+    r = x
+    g = c
+  } else if (hPrime < 3) {
+    g = c
+    b = x
+  } else if (hPrime < 4) {
+    g = x
+    b = c
+  } else if (hPrime < 5) {
+    r = x
+    b = c
+  } else {
+    r = c
+    b = x
+  }
+  const m = l - c / 2
+  const toHex = (v: number): string =>
+    Math.round((v + m) * 255)
+      .toString(16)
+      .padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+/**
+ * 把 hex 颜色绕色相环旋转 hueShift 度。
+ *
+ * 保持饱和度和亮度不变，仅旋转 hue。用于让 RIPPLE_COLOR_STOPS 整体
+ * 漂移到不同色相（蓝→青→紫→蓝循环），制造主色随时间变化的效果。
+ *
+ * 非法 hex 原样返回（防御式）。
+ */
+export function rotateHue(hex: string, hueShift: number): string {
+  if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return hex
+  if (hueShift === 0) return hex // 快路径：避免无意义 round-trip
+  const { h, s, l } = hexToHsl(hex)
+  return hslToHex(h + hueShift, s, l)
+}
+
+/**
+ * 根据 time 计算当前色相偏移（度，连续旋转）。
+ *
+ * 返回值始终在 [0, 360) 区间，单调递增（模 360）。
+ * 周期约 12s 一圈，覆盖完整色环。
+ */
+export function getHueShiftAtTime(time: number): number {
+  return (time * HUE_ROTATION_DEG_PER_MS) % 360
+}
+
 /**
  * 强度（任意实数）→ 颜色字符串。
  *
  * 钳到 [0, 1]，按 RIPPLE_COLOR_STOPS 分级。永不返回 transparent。
  * intensity=0 → 最暗档（#1a1f3a，作为面板底色）。
+ *
+ * @param hueShift 整个色阶绕色相环旋转的度数（0 = base 颜色）。
+ *                 生产代码传 getHueShiftAtTime(time) 实现主色漂移。
+ *                 测试代码传 0（默认）获得确定性输出。
  */
-export function intensityToColor(intensity: number): string {
+export function intensityToColor(intensity: number, hueShift = 0): string {
   const v = intensity < 0 ? 0 : intensity > 1 ? 1 : intensity
   const idx = Math.min(
     RIPPLE_COLOR_STOPS.length - 1,
     Math.floor(v * RIPPLE_COLOR_STOPS.length),
   )
-  return RIPPLE_COLOR_STOPS[idx]
+  const base = RIPPLE_COLOR_STOPS[idx]
+  return hueShift === 0 ? base : rotateHue(base, hueShift)
 }
 
 /**
@@ -99,17 +211,22 @@ const RIPPLE_BG_CHAR = ' '
 /**
  * 计算面板某一行 y 的完整波纹 cell 列表。
  *
- * 波纹数学（v3 — 简化，移除震源高频涟漪）：
+ * 波纹数学（v6.1 — 平滑呼吸 + 主色全色环旋转）：
  *   dx = x - sourceX
  *   dy = (y - sourceY) * 1.5    （y 方向视觉拉伸，行高 > 字宽）
  *   dist = sqrt(dx² + dy²)
  *   phase = dist * 0.35 - time * 0.004   （速度调慢至原 1/3）
- *   wave = max(0, sin(phase))
+ *   wave = (sin(phase) + 1) / 2          （[−1,1] → [0,1]，平滑无平带）
  *   falloff = max(0, 1 - dist / 90)       （覆盖半径扩到 90）
  *   intensity = wave * falloff
+ *   hueShift = (time * 0.03) % 360        （连续旋转，12s 一圈全色环）
+ *   color = intensityToColor(intensity, hueShift)
+ *
+ * v6.1 改 hueShift 为连续旋转（v6 是 sin±25° 振荡，色域太窄到不了
+ * 红黄）。现在每 12s 走完一圈完整色环：蓝→紫→品红→红→橙→黄→绿→青→蓝。
+ * 两个时间常数（相位 0.004 vs hue 0.03）解耦，让"流动"和"变色"不同步。
  *
  * 每位置强度经 intensityToColor → 颜色字符串（永不 transparent），写入 cell。
- * 即使 intensity=0（波谷）也得到最暗档 #1a1f3a 作为面板底色。
  *
  * @returns 长度严格等于 width 的 Cell 数组
  */
@@ -123,6 +240,8 @@ export function computeRippleCells(args: {
   const { y, width, time, sourceX, sourceY } = args
   if (width <= 0) return []
 
+  const hueShift = getHueShiftAtTime(time)
+
   const cells: Cell[] = new Array(width)
   for (let x = 0; x < width; x++) {
     const dx = x - sourceX
@@ -131,7 +250,8 @@ export function computeRippleCells(args: {
 
     // 主波纹相位（速度调慢：原 0.012 → 0.004，约 1/3 速）
     const phase = dist * 0.35 - time * 0.004
-    const wave = Math.max(0, Math.sin(phase))
+    // 平滑呼吸：[−1,1] → [0,1]，无平带，无双倍频率
+    const wave = (Math.sin(phase) + 1) / 2
 
     // 距离衰减（覆盖半径扩到 90：原 40）
     const falloff = Math.max(0, 1 - dist / 90)
@@ -139,7 +259,7 @@ export function computeRippleCells(args: {
 
     cells[x] = {
       char: RIPPLE_BG_CHAR,
-      color: intensityToColor(intensity),
+      color: intensityToColor(intensity, hueShift),
     }
   }
   return cells
@@ -200,3 +320,42 @@ export function cellsToSegments(cells: Cell[]): Segment[] {
   segments.push(current)
   return segments
 }
+
+/**
+ * 把 hex 颜色按 fade 因子（0~1）缩放亮度。
+ *
+ * 用于进入/退出动画：
+ * - fade ≤ 0.01 → TRANSPARENT（cell 不渲染背景，等同终端默认）
+ * - fade = 0.5  → 颜色 RGB 各分量减半（暗紫蓝）
+ * - fade = 1    → 原色（完整波纹）
+ *
+ * 非法 hex（非 #rrggbb 格式）原样返回（防御式）。
+ */
+export function fadeColor(color: string, fade: number): string {
+  if (color === TRANSPARENT) return TRANSPARENT
+  const f = fade < 0 ? 0 : fade > 1 ? 1 : fade
+  if (f <= 0.01) return TRANSPARENT
+  if (!/^#[0-9a-fA-F]{6}$/.test(color)) return color
+  const r = parseInt(color.slice(1, 3), 16)
+  const g = parseInt(color.slice(3, 5), 16)
+  const b = parseInt(color.slice(5, 7), 16)
+  const fr = Math.round(r * f)
+    .toString(16)
+    .padStart(2, '0')
+  const fg = Math.round(g * f)
+    .toString(16)
+    .padStart(2, '0')
+  const fb = Math.round(b * f)
+    .toString(16)
+    .padStart(2, '0')
+  return `#${fr}${fg}${fb}`
+}
+
+/**
+ * 把整行 cells 的颜色按 fade 缩放（用于进入/退出动画）。
+ *
+ * 不修改原数组，返回新数组。
+ */
+export function fadeCells(cells: Cell[], fade: number): Cell[] {
+  return cells.map(c => ({ char: c.char, color: fadeColor(c.color, fade) }))
+}

src/components/EffortPanel/useRippleFrame.ts

@@ -6,13 +6,16 @@ const RIPPLE_INTERVAL_MS = 60
  * ultracode 波纹动画 hook。
  *
  * 设计：
- * - 仅当 enabled=true（cursor === 'ultracode'）时订阅时钟，pass null 时
+ * - 仅当 enabled=true（cursor === 'ultracode' 或退出淡出未结束）时订阅时钟，
- *   useAnimationFrame 内部不订阅 ClockContext，setInterval 不触发。
+ *   pass null 时 useAnimationFrame 内部不订阅 ClockContext，setInterval 不触发。
  * - 返回 [ref, time]：ref 附到波纹容器（驱动 viewport-pause），time
  *   用于 computeRippleLine 计算各行的波纹相位。
  *
  * enabled=false 时返回 time=0（下游基于 enabled 直接不渲染波纹层，
  * 但 0 仍是合法值，避免意外的 phase 输出 NaN）。
+ *
+ * 注意：调用方应传 showingRipple（on ultracode || fade > 0），不是 rippleActive，
+ * 这样退出动画期间时钟继续推进，fade useEffect 才有 tick 触发。
  */
 export function useRippleFrame(
   enabled: boolean,