From 47e8e1ff946c949fa18ffb4287e03ae70e663bfa Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Mon, 20 Apr 2026 10:33:39 +0200
Subject: [PATCH] feat(ui): pulse, hover, modal, and row-add animations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/ClaudeDo.Ui/Design/IslandStyles.axaml     | 16 ++++++++++++
 .../Islands/DetailsIslandViewModel.cs         |  3 +++
 .../Views/Islands/AgentStripView.axaml        |  3 ++-
 .../Views/Islands/TaskRowView.axaml.cs        | 25 ++++++++++++++++++
 .../Views/Modals/DiffModalView.axaml.cs       | 26 +++++++++++++++++++
 .../Views/Modals/WorktreeModalView.axaml.cs   | 26 +++++++++++++++++++
 6 files changed, 98 insertions(+), 1 deletion(-)

diff --git a/src/ClaudeDo.Ui/Design/IslandStyles.axaml b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
index 46a9be2..23090ea 100644
--- a/src/ClaudeDo.Ui/Design/IslandStyles.axaml
+++ b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
@@ -162,6 +162,11 @@
     <Setter Property="CornerRadius" Value="8" />
     <Setter Property="Background"   Value="Transparent" />
     <Setter Property="Cursor"       Value="Hand" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <BrushTransition Property="Background" Duration="0:0:0.10"/>
+      </Transitions>
+    </Setter>
   </Style>
   <Style Selector="Border.task-row:pointerover">
     <Setter Property="Background" Value="{StaticResource Surface2Brush}" />
@@ -186,6 +191,17 @@
     <Setter Property="Fill"   Value="{StaticResource AccentBrush}" />
   </Style>
 
+  <!-- Status dot pulse (applied when running) -->
+  <Style Selector="Ellipse.status-pulse">
+    <Style.Animations>
+      <Animation Duration="0:0:1.2" IterationCount="INFINITE" Easing="CubicEaseInOut">
+        <KeyFrame Cue="0%"><Setter Property="Opacity" Value="0.4"/></KeyFrame>
+        <KeyFrame Cue="50%"><Setter Property="Opacity" Value="1.0"/></KeyFrame>
+        <KeyFrame Cue="100%"><Setter Property="Opacity" Value="0.4"/></KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+
   <!-- ============================================================ -->
   <!-- AGENT STRIP                                                  -->
   <!-- ============================================================ -->
diff --git a/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs b/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
index 646db50..87293a8 100644
--- a/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
+++ b/src/ClaudeDo.Ui/ViewModels/Islands/DetailsIslandViewModel.cs
@@ -26,6 +26,9 @@ public sealed partial class DetailsIslandViewModel : ViewModelBase
 
     // Agent strip fields
     [ObservableProperty] private string _agentStatusLabel = "Idle";
+    public bool IsRunning => AgentStatusLabel == "Running";
+
+    partial void OnAgentStatusLabelChanged(string value) => OnPropertyChanged(nameof(IsRunning));
     [ObservableProperty] private string? _model;
     [ObservableProperty] private string? _worktreePath;
     [ObservableProperty] private string? _branchLine;
diff --git a/src/ClaudeDo.Ui/Views/Islands/AgentStripView.axaml b/src/ClaudeDo.Ui/Views/Islands/AgentStripView.axaml
index 91c03e6..8b85149 100644
--- a/src/ClaudeDo.Ui/Views/Islands/AgentStripView.axaml
+++ b/src/ClaudeDo.Ui/Views/Islands/AgentStripView.axaml
@@ -7,7 +7,8 @@
     <StackPanel Margin="14,12" Spacing="6">
       <!-- Row 1: status dot · status label · model · turns · tokens -->
       <StackPanel Orientation="Horizontal" Spacing="10">
-        <Ellipse Width="8" Height="8" Fill="{DynamicResource MossBrush}" VerticalAlignment="Center"/>
+        <Ellipse Width="8" Height="8" Fill="{DynamicResource MossBrush}" VerticalAlignment="Center"
+                 Classes.status-pulse="{Binding IsRunning}"/>
         <TextBlock Text="{Binding AgentStatusLabel}" FontSize="12"
                    Foreground="{DynamicResource TextBrush}" VerticalAlignment="Center"/>
         <TextBlock Text="{Binding Model}" FontFamily="{DynamicResource MonoFamily}"
diff --git a/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml.cs b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml.cs
index f853cca..2a118cb 100644
--- a/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml.cs
+++ b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml.cs
@@ -1,8 +1,33 @@
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
 using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Styling;
 
 namespace ClaudeDo.Ui.Views.Islands;
 
 public partial class TaskRowView : UserControl
 {
     public TaskRowView() { InitializeComponent(); }
+
+    protected override async void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnAttachedToVisualTree(e);
+        RenderTransform = new TranslateTransform(0, 8);
+        Opacity = 0;
+        var anim = new Avalonia.Animation.Animation
+        {
+            Duration = TimeSpan.FromMilliseconds(300),
+            Easing = new CubicEaseOut(),
+            Children =
+            {
+                new KeyFrame { Cue = new Cue(0), Setters = { new Setter(OpacityProperty, 0d) } },
+                new KeyFrame { Cue = new Cue(1), Setters = { new Setter(OpacityProperty, 1d) } },
+            }
+        };
+        await anim.RunAsync(this);
+        Opacity = 1;
+        RenderTransform = null;
+    }
 }
diff --git a/src/ClaudeDo.Ui/Views/Modals/DiffModalView.axaml.cs b/src/ClaudeDo.Ui/Views/Modals/DiffModalView.axaml.cs
index 4c8351b..a2454c0 100644
--- a/src/ClaudeDo.Ui/Views/Modals/DiffModalView.axaml.cs
+++ b/src/ClaudeDo.Ui/Views/Modals/DiffModalView.axaml.cs
@@ -1,5 +1,10 @@
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
 using Avalonia.Controls;
 using Avalonia.Input;
+using Avalonia.Media;
+using Avalonia.Styling;
 using ClaudeDo.Ui.ViewModels.Modals;
 
 namespace ClaudeDo.Ui.Views.Modals;
@@ -18,6 +23,27 @@ public partial class DiffModalView : Window
             vm.CloseAction = Close;
     }
 
+    protected override async void OnOpened(EventArgs e)
+    {
+        base.OnOpened(e);
+        Opacity = 0;
+        RenderTransform = new ScaleTransform(0.98, 0.98);
+        var anim = new Avalonia.Animation.Animation
+        {
+            Duration = TimeSpan.FromMilliseconds(180),
+            Easing = new CubicEaseOut(),
+            FillMode = FillMode.Forward,
+            Children =
+            {
+                new KeyFrame { Cue = new Cue(0), Setters = { new Setter(OpacityProperty, 0d) } },
+                new KeyFrame { Cue = new Cue(1), Setters = { new Setter(OpacityProperty, 1d) } },
+            }
+        };
+        await anim.RunAsync(this);
+        Opacity = 1;
+        RenderTransform = new ScaleTransform(1.0, 1.0);
+    }
+
     private void TitleBar_PointerPressed(object? sender, PointerPressedEventArgs e)
     {
         if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
diff --git a/src/ClaudeDo.Ui/Views/Modals/WorktreeModalView.axaml.cs b/src/ClaudeDo.Ui/Views/Modals/WorktreeModalView.axaml.cs
index a99ffb5..bb650ea 100644
--- a/src/ClaudeDo.Ui/Views/Modals/WorktreeModalView.axaml.cs
+++ b/src/ClaudeDo.Ui/Views/Modals/WorktreeModalView.axaml.cs
@@ -1,5 +1,10 @@
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
 using Avalonia.Controls;
 using Avalonia.Input;
+using Avalonia.Media;
+using Avalonia.Styling;
 using ClaudeDo.Ui.ViewModels.Modals;
 
 namespace ClaudeDo.Ui.Views.Modals;
@@ -18,6 +23,27 @@ public partial class WorktreeModalView : Window
             vm.CloseAction = Close;
     }
 
+    protected override async void OnOpened(EventArgs e)
+    {
+        base.OnOpened(e);
+        Opacity = 0;
+        RenderTransform = new ScaleTransform(0.98, 0.98);
+        var anim = new Avalonia.Animation.Animation
+        {
+            Duration = TimeSpan.FromMilliseconds(180),
+            Easing = new CubicEaseOut(),
+            FillMode = FillMode.Forward,
+            Children =
+            {
+                new KeyFrame { Cue = new Cue(0), Setters = { new Setter(OpacityProperty, 0d) } },
+                new KeyFrame { Cue = new Cue(1), Setters = { new Setter(OpacityProperty, 1d) } },
+            }
+        };
+        await anim.RunAsync(this);
+        Opacity = 1;
+        RenderTransform = new ScaleTransform(1.0, 1.0);
+    }
+
     private void OnTitleBarPressed(object? sender, PointerPressedEventArgs e)
     {
         if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)