ClaudeDo/src/ClaudeDo.Ui/Views/Islands/Detail/DescriptionStepsCard.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
             xmlns:ctl="using:ClaudeDo.Ui.Views.Controls"
             xmlns:loc="using:ClaudeDo.Ui.Localization"
             x:Class="ClaudeDo.Ui.Views.Islands.Detail.DescriptionStepsCard"
             x:DataType="vm:DetailsIslandViewModel">

  <Border Classes="island"
          Background="{DynamicResource Surface2Brush}"
          BorderBrush="{DynamicResource LineBrush}">
    <DockPanel>

      <!-- Header: DETAILS · copy · preview/edit -->
      <Border DockPanel.Dock="Top" Classes="island-header">
        <Grid ColumnDefinitions="Auto,*,Auto,Auto" VerticalAlignment="Center">

          <TextBlock Grid.Column="0" Classes="section-label" Text="DETAILS"
                     VerticalAlignment="Center"/>

          <!-- Copy formatted -->
          <Button Grid.Column="2"
                  Classes="icon-btn"
                  Margin="0,0,4,0"
                  ToolTip.Tip="{loc:Tr details.copyFormattedTip}"
                  Click="OnCopyClick">
            <PathIcon Data="{StaticResource Icon.Copy}" Width="11" Height="11"/>
          </Button>

          <!-- Preview/Edit toggle -->
          <Button Grid.Column="3"
                  Classes="btn"
                  Padding="8,3"
                  ToolTip.Tip="{loc:Tr details.toggleEditPreviewTip}"
                  Command="{Binding ToggleEditDescriptionCommand}">
            <Panel>
              <TextBlock Text="Preview" IsVisible="{Binding IsEditingDescription}"/>
              <TextBlock Text="Edit"    IsVisible="{Binding !IsEditingDescription}"/>
            </Panel>
          </Button>

        </Grid>
      </Border>

      <!-- Body (scrolls inside the card so the card fills its row to the divider) -->
      <ScrollViewer VerticalScrollBarVisibility="Auto">
      <StackPanel Margin="14" Spacing="10">

        <!-- Description (always visible) -->
        <Panel>
          <!-- Edit mode: raw TextBox -->
          <TextBox Text="{Binding EditableDescription, Mode=TwoWay}"
                   AcceptsReturn="True"
                   TextWrapping="Wrap"
                   MinHeight="80"
                   MaxHeight="320"
                   Padding="8"
                   FontFamily="{DynamicResource MonoFont}"
                   FontSize="{StaticResource FontSizeBody}"
                   Background="{DynamicResource Surface3Brush}"
                   BorderBrush="{DynamicResource LineBrush}"
                   BorderThickness="1"
                   CornerRadius="8"
                   IsVisible="{Binding IsEditingDescription}"/>
          <!-- Preview mode: rendered composed text (title + description + open steps) -->
          <ctl:MarkdownView Markdown="{Binding ComposedPreview}"
                            IsVisible="{Binding !IsEditingDescription}"/>
        </Panel>

        <!-- Steps: always-visible summary strip; expand to manage -->
        <Border BorderBrush="{DynamicResource LineBrush}"
                BorderThickness="0,1,0,0"
                Padding="0,8,0,0">
          <StackPanel Spacing="6">

            <!-- Summary header (click to expand/collapse) -->
            <Button Classes="flat" Cursor="Hand"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch"
                    Command="{Binding ToggleStepsExpandedCommand}">
              <Grid ColumnDefinitions="Auto,Auto,*,Auto">
                <Panel Grid.Column="0" Width="12" Margin="0,0,6,0" VerticalAlignment="Center">
                  <TextBlock Classes="meta" Text="▸" IsVisible="{Binding !IsStepsExpanded}"/>
                  <TextBlock Classes="meta" Text="▾" IsVisible="{Binding IsStepsExpanded}"/>
                </Panel>
                <TextBlock Grid.Column="1" Classes="section-label" Text="STEPS"
                           VerticalAlignment="Center"/>
                <TextBlock Grid.Column="3" Classes="meta" Text="{Binding StepsSummary}"
                           Foreground="{DynamicResource TextMuteBrush}"
                           VerticalAlignment="Center"/>
              </Grid>
            </Button>

            <!-- Expanded: add-step input + step rows -->
            <StackPanel IsVisible="{Binding IsStepsExpanded}" Spacing="6">
              <TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
                       PlaceholderText="Add step…"
                       Padding="8"
                       Background="{DynamicResource Surface3Brush}"
                       BorderBrush="{DynamicResource LineBrush}"
                       BorderThickness="1"
                       CornerRadius="8">
                <TextBox.KeyBindings>
                  <KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
                </TextBox.KeyBindings>
              </TextBox>

              <!-- Subtask rows -->
              <ItemsControl ItemsSource="{Binding Subtasks}">
            <ItemsControl.ItemTemplate>
              <DataTemplate DataType="vm:SubtaskRowViewModel">
                <Border Classes="subtask-row" Classes.done="{Binding Done}">
                  <Grid ColumnDefinitions="Auto,*">

                    <!-- Check circle -->
                    <Button Grid.Column="0"
                            Classes="flat"
                            Padding="0"
                            Margin="0,0,8,0"
                            VerticalAlignment="Center"
                            Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).ToggleSubtaskDoneCommand}"
                            CommandParameter="{Binding}">
                      <Ellipse Classes="task-check"
                               Classes.done="{Binding Done}"
                               Width="16" Height="16"
                               Cursor="Hand"/>
                    </Button>

                    <!-- Title / edit -->
                    <Panel Grid.Column="1" VerticalAlignment="Center">
                      <TextBlock Classes="subtask-title"
                                 Text="{Binding Title}"
                                 IsVisible="{Binding !IsEditing}"
                                 FontSize="{StaticResource FontSizeBody}"
                                 Foreground="{DynamicResource TextDimBrush}"
                                 VerticalAlignment="Center"
                                 TextWrapping="Wrap"
                                 Cursor="Ibeam"
                                 Tapped="OnSubtaskTitleTapped"/>
                      <TextBox Classes="subtask-edit"
                               Text="{Binding Title, Mode=TwoWay}"
                               IsVisible="{Binding IsEditing}"
                               FontSize="{StaticResource FontSizeBody}"
                               AcceptsReturn="False"
                               TextWrapping="Wrap"
                               LostFocus="OnSubtaskEditLostFocus">
                        <TextBox.KeyBindings>
                          <KeyBinding Gesture="Enter"
                                      Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).CommitSubtaskEditCommand}"
                                      CommandParameter="{Binding}"/>
                        </TextBox.KeyBindings>
                      </TextBox>
                    </Panel>

                  </Grid>
                </Border>
              </DataTemplate>
            </ItemsControl.ItemTemplate>
              </ItemsControl>
            </StackPanel>
          </StackPanel>
        </Border>

      </StackPanel>
      </ScrollViewer>
    </DockPanel>
  </Border>

</UserControl>