From b81d6e0b4f00cb37e34230d0bf2540fd1ef418c5 Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Tue, 11 Aug 2026 15:14:39 +0200
Subject: [PATCH] feat(ui): render dependency-chain rail, step badge, and
 after-chip in TaskRowView

Reuses the existing 24px indent track (now gated on ShowAsChild OR
ShowAsChainMember) instead of a second mechanism, adds a round step-number
badge centered on the rail line, and a dimmed "after X" chip for chain
members whose head isn't in view or that render as a planning child.
---
 src/ClaudeDo.Localization/locales/de.json     |  1 +
 src/ClaudeDo.Localization/locales/en.json     |  1 +
 src/ClaudeDo.Ui/Design/IslandStyles.axaml     | 19 +++++++++++
 .../Views/Islands/TaskRowView.axaml           | 33 ++++++++++++++++---
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/ClaudeDo.Localization/locales/de.json b/src/ClaudeDo.Localization/locales/de.json
index 23fc6f17..c12f1075 100644
--- a/src/ClaudeDo.Localization/locales/de.json
+++ b/src/ClaudeDo.Localization/locales/de.json
@@ -163,6 +163,7 @@
     "badgeDraft": "ENTWURF",
     "badgePlanned": "GEPLANT",
     "badgeManual": "MANUELL",
+    "chainAfterPrefix": "nach",
     "manualTip": "Manuelle Erinnerung — Claude nimmt sie nie auf",
     "ctxMarkManual": "Als manuell markieren",
     "ctxMarkClaudeTask": "Als Claude-Aufgabe markieren",
diff --git a/src/ClaudeDo.Localization/locales/en.json b/src/ClaudeDo.Localization/locales/en.json
index 30858b5b..50d8b47b 100644
--- a/src/ClaudeDo.Localization/locales/en.json
+++ b/src/ClaudeDo.Localization/locales/en.json
@@ -163,6 +163,7 @@
     "badgeDraft": "DRAFT",
     "badgePlanned": "PLANNED",
     "badgeManual": "MANUAL",
+    "chainAfterPrefix": "after",
     "manualTip": "Manual reminder — Claude never picks this up",
     "ctxMarkManual": "Mark as manual",
     "ctxMarkClaudeTask": "Mark as Claude task",
diff --git a/src/ClaudeDo.Ui/Design/IslandStyles.axaml b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
index 9b7d5994..ebfd59c5 100644
--- a/src/ClaudeDo.Ui/Design/IslandStyles.axaml
+++ b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
@@ -1045,6 +1045,25 @@
     <Setter Property="Background" Value="{DynamicResource ManualBadgeBrush}"/>
   </Style>
 
+  <!-- ============================================================ -->
+  <!-- CHAIN DEPENDENCY RAIL (step badge on the 24px indent track)  -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.chain-step-badge">
+    <Setter Property="Width"           Value="16"/>
+    <Setter Property="Height"          Value="16"/>
+    <Setter Property="CornerRadius"    Value="{StaticResource PillCornerRadius}"/>
+    <Setter Property="Background"      Value="{StaticResource Surface2Brush}"/>
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}"/>
+    <Setter Property="BorderThickness" Value="1"/>
+  </Style>
+  <Style Selector="Border.chain-step-badge > TextBlock">
+    <Setter Property="FontFamily"          Value="{StaticResource MonoFont}"/>
+    <Setter Property="FontSize"            Value="{StaticResource FontSizeEyebrow}"/>
+    <Setter Property="Foreground"          Value="{StaticResource TextDimBrush}"/>
+    <Setter Property="HorizontalAlignment" Value="Center"/>
+    <Setter Property="VerticalAlignment"   Value="Center"/>
+  </Style>
+
   <!-- ============================================================ -->
   <!-- SHARED MODAL STYLES (promoted from per-modal Window.Styles)  -->
   <!-- ============================================================ -->
diff --git a/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
index 213cd0e5..98de03ff 100644
--- a/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
+++ b/src/ClaudeDo.Ui/Views/Islands/TaskRowView.axaml
@@ -18,15 +18,29 @@
                  StrokeDashArray="4,3" Fill="Transparent" RadiusX="8" RadiusY="8"/>
     </Grid>
 
-    <!-- Indent wrapper: col 0 = 24px child indent track, col 1 = content -->
-    <Grid Grid.Row="1" ColumnDefinitions="Auto,*">
+    <!-- Indent wrapper: col 0 = 24px child/chain indent track, col 1 = content -->
+    <Grid Grid.Row="1" ColumnDefinitions="24,*">
 
-      <!-- Indent track (only while the parent shares this view; orphaned children render flat) -->
-      <Border Grid.Column="0" Width="24" IsVisible="{Binding ShowAsChild}" VerticalAlignment="Stretch">
+      <!-- Indent track (only while the parent/chain-head shares this view; orphaned rows render flat) -->
+      <Border Grid.Column="0" VerticalAlignment="Stretch">
+        <Border.IsVisible>
+          <MultiBinding Converter="{x:Static BoolConverters.Or}">
+            <Binding Path="ShowAsChild"/>
+            <Binding Path="ShowAsChainMember"/>
+          </MultiBinding>
+        </Border.IsVisible>
         <Rectangle Width="1" Fill="{DynamicResource LineBrush}"
                    HorizontalAlignment="Right" Margin="0,4"/>
       </Border>
 
+      <!-- Chain step badge: centered on the rail line, half laid over the card's left edge -->
+      <Border Grid.Column="0" Grid.ColumnSpan="2" Classes="chain-step-badge"
+              IsVisible="{Binding ShowAsChainMember}"
+              HorizontalAlignment="Left" VerticalAlignment="Center"
+              Margin="16,0,0,0">
+        <TextBlock Text="{Binding ChainStep}"/>
+      </Border>
+
       <!-- Main task card -->
       <Border Grid.Column="1" Classes="task-row"
               Margin="0,2"
@@ -172,6 +186,17 @@
               </StackPanel>
             </Border>
 
+            <!-- Chain-after chip: the head-relative fallback when this row isn't rendered as a
+                 rail member (planning child, or the head is filtered out of this view). -->
+            <Border Classes="chip chip-tag"
+                    IsVisible="{Binding ChainAfterLabel, Converter={StaticResource NotNullToBool}}">
+              <TextBlock>
+                <Run Text="{loc:Tr tasks.chainAfterPrefix}"/>
+                <Run Text=" "/>
+                <Run Text="{Binding ChainAfterLabel}"/>
+              </TextBlock>
+            </Border>
+
           </StackPanel>
         </StackPanel>