style(ui): tasks header toolbar and add-task row

- Reformat subtitle to "{Weekday}, {Month} {Day} · {open} open".
- Add right-aligned running/review status pill (kbd style).
- Add header icon toolbar: Sort, Eye (toggle completed), MoreHorizontal.
- Wire Eye to IsShowingCompleted [ObservableProperty] on the VM.
- Style add-task row as rounded Surface2 border with dashed Plus circle,
  borderless TextBox, and ENTER kbd chip visible on focus.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/ClaudeDo.Ui/Design/IslandStyles.axaml

@@ -499,4 +499,182 @@
     <Setter Property="Background"      Value="{StaticResource AccentDimBrush}" />
   </Style>
 
+  <!-- ============================================================ -->
+  <!-- ADD-TASK ROW                                                 -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.add-task">
+    <Setter Property="Background"      Value="{StaticResource Surface2Brush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="10" />
+    <Setter Property="Padding"         Value="14,12" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <BrushTransition Property="BorderBrush" Duration="0:0:0.15" />
+      </Transitions>
+    </Setter>
+  </Style>
+  <Style Selector="Border.add-task:focus-within">
+    <Setter Property="BorderBrush" Value="{StaticResource AccentDimBrush}" />
+  </Style>
+
+  <!-- Plus circle inside the add-task row -->
+  <Style Selector="Border.add-task-plus">
+    <Setter Property="Width"           Value="20" />
+    <Setter Property="Height"          Value="20" />
+    <Setter Property="CornerRadius"    Value="10" />
+    <Setter Property="Background"      Value="{StaticResource Surface3Brush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="HorizontalAlignment" Value="Center" />
+    <Setter Property="VerticalAlignment"   Value="Center" />
+    <Setter Property="Padding"         Value="0" />
+  </Style>
+  <Style Selector="Border.add-task-plus > PathIcon">
+    <Setter Property="HorizontalAlignment" Value="Center" />
+    <Setter Property="VerticalAlignment"   Value="Center" />
+  </Style>
+
+  <!-- Borderless TextBox inside the add-task row -->
+  <Style Selector="TextBox.add-task-input">
+    <Setter Property="Background"      Value="Transparent" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Padding"         Value="0" />
+    <Setter Property="FontSize"        Value="14" />
+    <Setter Property="Foreground"      Value="{StaticResource TextBrush}" />
+    <Setter Property="CaretBrush"      Value="{StaticResource AccentBrush}" />
+    <Setter Property="MinHeight"       Value="20" />
+  </Style>
+  <Style Selector="TextBox.add-task-input /template/ Border#PART_BorderElement">
+    <Setter Property="Background"      Value="Transparent" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="BoxShadow"       Value="none" />
+  </Style>
+
+  <!-- kbd-enter variant (no extra styles needed — base kbd works) -->
+  <Style Selector="Border.kbd.kbd-enter > TextBlock">
+    <Setter Property="LetterSpacing" Value="1.2" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- HEADER TOOLBAR icon-btn active state                         -->
+  <!-- ============================================================ -->
+  <Style Selector="Button.icon-btn.active /template/ ContentPresenter">
+    <Setter Property="Background" Value="{StaticResource Surface3Brush}" />
+    <Setter Property="TextElement.Foreground" Value="{StaticResource AccentBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- TASK ROW — extensions (C2)                                   -->
+  <!-- ============================================================ -->
+
+  <!-- Augment base task-row transitions to include Margin -->
+  <Style Selector="Border.task-row">
+    <Setter Property="Transitions">
+      <Transitions>
+        <BrushTransition    Property="Background" Duration="0:0:0.12" />
+        <ThicknessTransition Property="Margin"    Duration="0:0:0.15" />
+      </Transitions>
+    </Setter>
+  </Style>
+
+  <!-- Selected state: shift background to accent-soft -->
+  <Style Selector="Border.task-row.selected">
+    <Setter Property="Background" Value="{StaticResource AccentSoftBrush}" />
+  </Style>
+
+  <!-- Left accent bar for selected row -->
+  <Style Selector="Border.task-row-accent">
+    <Setter Property="Width"           Value="2" />
+    <Setter Property="Background"      Value="{StaticResource AccentBrush}" />
+    <Setter Property="CornerRadius"    Value="1" />
+    <Setter Property="Margin"          Value="0,4" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment"   Value="Stretch" />
+  </Style>
+
+  <!-- Done state: dim the whole row and the title -->
+  <Style Selector="Border.task-row.done">
+    <Setter Property="Opacity" Value="0.55" />
+  </Style>
+  <Style Selector="Border.task-row.done TextBlock.task-title">
+    <Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- CHIP EXTENSIONS                                              -->
+  <!-- ============================================================ -->
+  <!-- Slightly slimmer chips inside task rows -->
+  <Style Selector="Border.task-row Border.chip">
+    <Setter Property="Padding"      Value="6,2" />
+    <Setter Property="CornerRadius" Value="4" />
+  </Style>
+  <Style Selector="Border.task-row Border.chip > StackPanel > TextBlock">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+
+  <!-- Tag chip: faint text -->
+  <Style Selector="Border.chip.chip-tag > TextBlock">
+    <Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
+  </Style>
+
+  <!-- Diff chip add/del coloring -->
+  <Style Selector="TextBlock.diff-add">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="Foreground" Value="{StaticResource MossBrightBrush}" />
+  </Style>
+  <Style Selector="TextBlock.diff-del">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- STAR BUTTON                                                  -->
+  <!-- ============================================================ -->
+  <Style Selector="Button.star-btn">
+    <Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
+    <Setter Property="Opacity"    Value="0.6" />
+  </Style>
+  <Style Selector="Button.star-btn.on">
+    <Setter Property="Foreground" Value="{StaticResource PeatBrush}" />
+    <Setter Property="Opacity"    Value="1.0" />
+  </Style>
+  <Style Selector="Button.star-btn.on /template/ ContentPresenter">
+    <Setter Property="TextElement.Foreground" Value="{StaticResource PeatBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- LIVE-TAIL PREVIEW ROW                                        -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.task-live-tail">
+    <Setter Property="Background"      Value="#FF080C0B" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="5" />
+    <Setter Property="Padding"         Value="8,4" />
+    <Setter Property="Margin"          Value="0,2,0,0" />
+  </Style>
+  <Style Selector="Border.task-live-tail TextBlock">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="11" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- SECTION LABELS (OVERDUE / TASKS / COMPLETED)                 -->
+  <!-- ============================================================ -->
+  <Style Selector="TextBlock.section-label">
+    <Setter Property="FontFamily"    Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"      Value="10" />
+    <Setter Property="Foreground"    Value="{StaticResource TextFaintBrush}" />
+    <Setter Property="LetterSpacing" Value="1.4" />
+  </Style>
+  <Style Selector="TextBlock.section-label.overdue">
+    <Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
+  </Style>
+
 </Styles>

src/ClaudeDo.Ui/ViewModels/Islands/TasksIslandViewModel.cs

@@ -1,4 +1,5 @@
 using System.Collections.ObjectModel;
+using System.Globalization;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
 using ClaudeDo.Data;
@@ -19,12 +20,21 @@ public sealed partial class TasksIslandViewModel : ViewModelBase
     public void RequestFocusAddTask() => FocusAddTaskRequested?.Invoke(this, EventArgs.Empty);
 
     public ObservableCollection<TaskRowViewModel> Items { get; } = new();
+    public ObservableCollection<TaskRowViewModel> OverdueItems { get; } = new();
+    public ObservableCollection<TaskRowViewModel> OpenItems { get; } = new();
+    public ObservableCollection<TaskRowViewModel> CompletedItems { get; } = new();
 
     [ObservableProperty] private string _newTaskTitle = "";
     [ObservableProperty] private TaskRowViewModel? _selectedTask;
     [ObservableProperty] private string _headerTitle = "";
     [ObservableProperty] private string _headerEyebrow = "";
     [ObservableProperty] private string _subtitle = "";
+    [ObservableProperty] private string _statusPill = "";
+    [ObservableProperty] private bool _hasStatusPill;
+    [ObservableProperty] private bool _isShowingCompleted = true;
+    [ObservableProperty] private bool _hasOverdue;
+    [ObservableProperty] private bool _hasCompleted;
+    [ObservableProperty] private string _completedHeader = "COMPLETED";
 
     public TasksIslandViewModel(IDbContextFactory<ClaudeDoDbContext> dbFactory)
     {
@@ -40,10 +50,15 @@ public sealed partial class TasksIslandViewModel : ViewModelBase
 
         _currentList = list;
         Items.Clear();
+        OverdueItems.Clear();
+        OpenItems.Clear();
+        CompletedItems.Clear();
+        HasOverdue = false;
+        HasCompleted = false;
         if (list is null) return;
 
         HeaderTitle = list.Name;
-        HeaderEyebrow = DateTime.Now.ToString("dddd · MMM dd").ToUpperInvariant();
+        HeaderEyebrow = DateTime.Now.ToString("dddd · MMM dd", CultureInfo.InvariantCulture).ToUpperInvariant();
 
         _ = LoadForListAsync(list, ct);
     }
@@ -74,17 +89,56 @@ public sealed partial class TasksIslandViewModel : ViewModelBase
             foreach (var t in filtered)
                 Items.Add(TaskRowViewModel.FromEntity(t));
 
+            Regroup();
             UpdateSubtitle();
         }
         catch (OperationCanceledException) { }
     }
 
+    private void Regroup()
+    {
+        OverdueItems.Clear();
+        OpenItems.Clear();
+        CompletedItems.Clear();
+
+        var today = DateTime.Today;
+        foreach (var r in Items)
+        {
+            if (r.Done)
+                CompletedItems.Add(r);
+            else if (r.ScheduledFor is { } d && d.Date < today)
+                OverdueItems.Add(r);
+            else
+                OpenItems.Add(r);
+        }
+
+        HasOverdue    = OverdueItems.Count > 0;
+        HasCompleted  = CompletedItems.Count > 0;
+        CompletedHeader = $"COMPLETED · {CompletedItems.Count}";
+    }
+
     private void UpdateSubtitle()
     {
+        var now     = DateTime.Now;
         var open    = Items.Count(i => !i.Done);
         var running = Items.Count(i => i.Status == TaskStatus.Running);
         var review  = Items.Count(i => i.Status == TaskStatus.Done && i.Branch != null);
-        Subtitle = $"{open} open · {running} running · {review} in review";
+
+        var weekday = now.ToString("dddd", CultureInfo.CurrentCulture);
+        var month   = now.ToString("MMM", CultureInfo.CurrentCulture);
+        var day     = now.Day;
+        Subtitle = $"{weekday}, {month} {day} · {open} open";
+
+        if (running > 0 || review > 0)
+        {
+            StatusPill    = $"{running} running · {review} review";
+            HasStatusPill = true;
+        }
+        else
+        {
+            StatusPill    = "";
+            HasStatusPill = false;
+        }
     }
 
     [RelayCommand]
@@ -102,7 +156,9 @@ public sealed partial class TasksIslandViewModel : ViewModelBase
         await using var db = await _dbFactory.CreateDbContextAsync();
         db.Tasks.Add(entity);
         await db.SaveChangesAsync();
-        Items.Insert(0, TaskRowViewModel.FromEntity(entity));
+        var row = TaskRowViewModel.FromEntity(entity);
+        Items.Insert(0, row);
+        Regroup();
         NewTaskTitle = "";
         UpdateSubtitle();
     }
@@ -119,6 +175,7 @@ public sealed partial class TasksIslandViewModel : ViewModelBase
             row.Status = entity.Status;
             await db.SaveChangesAsync();
         }
+        Regroup();
         UpdateSubtitle();
     }
 
@@ -138,6 +195,15 @@ public sealed partial class TasksIslandViewModel : ViewModelBase
     [RelayCommand]
     private void Select(TaskRowViewModel row) => SelectedTask = row;
 
+    [RelayCommand]
+    private void ToggleShowCompleted() => IsShowingCompleted = !IsShowingCompleted;
+
+    [RelayCommand]
+    private void Sort() { /* placeholder — UI-only */ }
+
+    [RelayCommand]
+    private void More() { /* placeholder — UI-only */ }
+
     partial void OnSelectedTaskChanged(TaskRowViewModel? value)
     {
         foreach (var i in Items) i.IsSelected = ReferenceEquals(i, value);

src/ClaudeDo.Ui/Views/Islands/TasksIslandView.axaml

@@ -2,45 +2,136 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
              xmlns:islands="using:ClaudeDo.Ui.Views.Islands"
+             xmlns:converters="using:Avalonia.Data.Converters"
              x:Class="ClaudeDo.Ui.Views.Islands.TasksIslandView"
              x:DataType="vm:TasksIslandViewModel">
   <DockPanel LastChildFill="True">
 
     <!-- Header -->
     <Border DockPanel.Dock="Top" Classes="island-header">
-      <StackPanel Margin="18,14" Spacing="4">
+      <Grid ColumnDefinitions="*,Auto" Margin="18,14">
+        <StackPanel Grid.Column="0" Spacing="4">
           <TextBlock Classes="eyebrow" Text="{Binding HeaderEyebrow}"/>
           <TextBlock FontFamily="{DynamicResource SansFamily}" FontSize="24"
                      FontWeight="SemiBold" Foreground="{DynamicResource TextBrush}"
-                   Text="{Binding HeaderTitle}"/>
+                     Text="{Binding HeaderTitle}"
+                     TextTrimming="CharacterEllipsis"/>
           <TextBlock FontFamily="{DynamicResource MonoFamily}" FontSize="11"
-                   Foreground="{DynamicResource TextMuteBrush}" Text="{Binding Subtitle}"/>
+                     Foreground="{DynamicResource TextMuteBrush}"
+                     Text="{Binding Subtitle}"
+                     TextTrimming="CharacterEllipsis"/>
         </StackPanel>
+
+        <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="4"
+                    VerticalAlignment="Top">
+          <Border Classes="kbd" VerticalAlignment="Center" Margin="0,0,6,0"
+                  IsVisible="{Binding HasStatusPill}">
+            <TextBlock Text="{Binding StatusPill}"/>
+          </Border>
+          <Button Classes="icon-btn" Command="{Binding SortCommand}" ToolTip.Tip="Sort">
+            <PathIcon Width="15" Height="15" Data="{StaticResource Icon.Sort}"/>
+          </Button>
+          <Button Classes="icon-btn" Classes.active="{Binding IsShowingCompleted}"
+                  Command="{Binding ToggleShowCompletedCommand}"
+                  ToolTip.Tip="Show completed">
+            <PathIcon Width="15" Height="15" Data="{StaticResource Icon.Eye}"/>
+          </Button>
+          <Button Classes="icon-btn" Command="{Binding MoreCommand}" ToolTip.Tip="More">
+            <PathIcon Width="15" Height="15" Data="{StaticResource Icon.MoreHorizontal}"/>
+          </Button>
+        </StackPanel>
+      </Grid>
     </Border>
 
     <!-- Add-task row -->
-    <Border DockPanel.Dock="Top" Margin="18,8,18,4">
-      <TextBox x:Name="AddTaskBox" Watermark="Add a task…" Text="{Binding NewTaskTitle, Mode=TwoWay}">
+    <Border DockPanel.Dock="Top" Classes="add-task" Margin="16,14,16,8">
+      <Grid ColumnDefinitions="Auto,*,Auto">
+        <Border Grid.Column="0" Classes="add-task-plus" VerticalAlignment="Center">
+          <PathIcon Width="12" Height="12" Data="{StaticResource Icon.Plus}"
+                    Foreground="{DynamicResource TextFaintBrush}"/>
+        </Border>
+        <TextBox Grid.Column="1" x:Name="AddTaskBox" Classes="add-task-input"
+                 Watermark="Add a task…"
+                 Text="{Binding NewTaskTitle, Mode=TwoWay}"
+                 VerticalAlignment="Center"
+                 Margin="12,0,0,0">
           <TextBox.KeyBindings>
             <KeyBinding Gesture="Enter" Command="{Binding AddCommand}"/>
           </TextBox.KeyBindings>
         </TextBox>
+        <Border Grid.Column="2" Classes="kbd kbd-enter" VerticalAlignment="Center"
+                IsVisible="{Binding #AddTaskBox.IsFocused}">
+          <TextBlock Text="ENTER"/>
+        </Border>
+      </Grid>
     </Border>
 
     <!-- Task list -->
     <ScrollViewer>
-      <ItemsControl ItemsSource="{Binding Items}" Margin="10,4">
+      <StackPanel Margin="10,4">
+
+        <!-- OVERDUE -->
+        <StackPanel IsVisible="{Binding HasOverdue}">
+          <TextBlock Classes="eyebrow section-label overdue"
+                     Text="OVERDUE" Margin="14,14,14,6"/>
+          <ItemsControl ItemsSource="{Binding OverdueItems}">
             <ItemsControl.ItemTemplate>
               <DataTemplate DataType="vm:TaskRowViewModel">
                 <Button Classes="flat" HorizontalAlignment="Stretch"
                         HorizontalContentAlignment="Stretch"
-                    Command="{Binding $parent[ItemsControl].DataContext.SelectCommand}"
+                        Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).SelectCommand}"
                         CommandParameter="{Binding}">
                   <islands:TaskRowView/>
                 </Button>
               </DataTemplate>
             </ItemsControl.ItemTemplate>
           </ItemsControl>
+        </StackPanel>
+
+        <!-- TASKS -->
+        <StackPanel>
+          <TextBlock Classes="eyebrow section-label"
+                     Text="TASKS" Margin="14,14,14,6"
+                     IsVisible="{Binding HasOverdue}"/>
+          <ItemsControl ItemsSource="{Binding OpenItems}">
+            <ItemsControl.ItemTemplate>
+              <DataTemplate DataType="vm:TaskRowViewModel">
+                <Button Classes="flat" HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch"
+                        Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).SelectCommand}"
+                        CommandParameter="{Binding}">
+                  <islands:TaskRowView/>
+                </Button>
+              </DataTemplate>
+            </ItemsControl.ItemTemplate>
+          </ItemsControl>
+        </StackPanel>
+
+        <!-- COMPLETED -->
+        <StackPanel>
+          <StackPanel.IsVisible>
+            <MultiBinding Converter="{x:Static converters:BoolConverters.And}">
+              <Binding Path="HasCompleted"/>
+              <Binding Path="IsShowingCompleted"/>
+            </MultiBinding>
+          </StackPanel.IsVisible>
+          <TextBlock Classes="eyebrow section-label"
+                     Text="{Binding CompletedHeader}" Margin="14,14,14,6"/>
+          <ItemsControl ItemsSource="{Binding CompletedItems}">
+            <ItemsControl.ItemTemplate>
+              <DataTemplate DataType="vm:TaskRowViewModel">
+                <Button Classes="flat" HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch"
+                        Command="{Binding $parent[ItemsControl].((vm:TasksIslandViewModel)DataContext).SelectCommand}"
+                        CommandParameter="{Binding}">
+                  <islands:TaskRowView/>
+                </Button>
+              </DataTemplate>
+            </ItemsControl.ItemTemplate>
+          </ItemsControl>
+        </StackPanel>
+
+      </StackPanel>
     </ScrollViewer>
 
   </DockPanel>