From 579b527dcd4613f909a3368963a6e3dcb41f48cd Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Mon, 20 Apr 2026 10:05:28 +0200
Subject: [PATCH] feat(ui): add island control styles

---
 src/ClaudeDo.Ui/Design/IslandStyles.axaml | 278 ++++++++++++++++++++++
 1 file changed, 278 insertions(+)
 create mode 100644 src/ClaudeDo.Ui/Design/IslandStyles.axaml

diff --git a/src/ClaudeDo.Ui/Design/IslandStyles.axaml b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
new file mode 100644
index 0000000..e5aa313
--- /dev/null
+++ b/src/ClaudeDo.Ui/Design/IslandStyles.axaml
@@ -0,0 +1,278 @@
+<!--
+  ClaudeDo component styles for Avalonia.
+  Depends on Tokens.axaml being merged first.
+
+  How to use each style:
+    <Border Classes="island">          — floating island container
+    <Border Classes="chip running">    — status chip
+    <Button Classes="icon-btn">        — 24×24 icon button
+    <Button Classes="btn primary">     — rounded-rect button
+    <TextBlock Classes="eyebrow">      — uppercase mono label
+    <Border Classes="agent-strip running"> — agent status strip
+    <Border Classes="terminal">        — terminal/log window
+-->
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+  <!-- ============================================================ -->
+  <!-- ISLAND                                                       -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.island">
+    <Setter Property="Background"    Value="{StaticResource IslandBackgroundBrush}" />
+    <Setter Property="BorderBrush"   Value="#0DFFFFFF" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius" Value="{StaticResource IslandCornerRadius}" />
+    <Setter Property="BoxShadow"    Value="{StaticResource IslandShadow}" />
+    <Setter Property="ClipToBounds" Value="True" />
+  </Style>
+
+  <!-- Island header separator (apply on the header Border inside an island) -->
+  <Style Selector="Border.island-header">
+    <Setter Property="Padding"         Value="{StaticResource IslandHeaderPadding}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="0,0,0,1" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- CHIPS / BADGES                                               -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.chip">
+    <Setter Property="CornerRadius"    Value="{StaticResource ChipCornerRadius}" />
+    <Setter Property="Padding"         Value="8,3" />
+    <Setter Property="Background"      Value="{StaticResource Surface2Brush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+  </Style>
+  <Style Selector="Border.chip > TextBlock">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="10" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+
+  <!-- Status variants — tint background 12% alpha of the status hue -->
+  <Style Selector="Border.chip.running">
+    <Setter Property="Background"  Value="#1F7C9166" />
+    <Setter Property="BorderBrush" Value="#4C7C9166" />
+  </Style>
+  <Style Selector="Border.chip.running > TextBlock">
+    <Setter Property="Foreground" Value="{StaticResource StatusRunningBrush}" />
+  </Style>
+
+  <Style Selector="Border.chip.review">
+    <Setter Property="Background"  Value="#1FD4A574" />
+    <Setter Property="BorderBrush" Value="#4CD4A574" />
+  </Style>
+  <Style Selector="Border.chip.review > TextBlock">
+    <Setter Property="Foreground" Value="{StaticResource StatusReviewBrush}" />
+  </Style>
+
+  <Style Selector="Border.chip.error">
+    <Setter Property="Background"  Value="#1FC87060" />
+    <Setter Property="BorderBrush" Value="#4CC87060" />
+  </Style>
+  <Style Selector="Border.chip.error > TextBlock">
+    <Setter Property="Foreground" Value="{StaticResource StatusErrorBrush}" />
+  </Style>
+
+  <!-- queued → Sage (#8B9D7A) -->
+  <Style Selector="Border.chip.queued">
+    <Setter Property="Background"  Value="#1F8B9D7A" />
+    <Setter Property="BorderBrush" Value="#4C8B9D7A" />
+  </Style>
+  <Style Selector="Border.chip.queued > TextBlock">
+    <Setter Property="Foreground" Value="{StaticResource StatusQueuedBrush}" />
+  </Style>
+
+  <!-- idle → TextMute (#6B7973) -->
+  <Style Selector="Border.chip.idle">
+    <Setter Property="Background"  Value="{StaticResource Surface2Brush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
+  </Style>
+  <Style Selector="Border.chip.idle > TextBlock">
+    <Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- BUTTONS                                                      -->
+  <!-- ============================================================ -->
+  <Style Selector="Button.btn">
+    <Setter Property="Background"      Value="{StaticResource Surface2Brush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="{StaticResource ButtonCornerRadius}" />
+    <Setter Property="Padding"         Value="10,6" />
+    <Setter Property="FontFamily"      Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"        Value="11" />
+    <Setter Property="Foreground"      Value="{StaticResource TextDimBrush}" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <BrushTransition Property="Background" Duration="0:0:0.12" />
+        <BrushTransition Property="BorderBrush" Duration="0:0:0.12" />
+      </Transitions>
+    </Setter>
+  </Style>
+  <Style Selector="Button.btn:pointerover /template/ ContentPresenter">
+    <Setter Property="Background"  Value="{StaticResource Surface3Brush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource LineBrightBrush}" />
+  </Style>
+  <Style Selector="Button.btn.primary">
+    <Setter Property="Background"  Value="{StaticResource AccentDimBrush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
+    <Setter Property="Foreground"  Value="{StaticResource TextBrush}" />
+  </Style>
+
+  <!-- Icon button: 24×24 square with hover surface -->
+  <Style Selector="Button.icon-btn">
+    <Setter Property="Width"           Value="24" />
+    <Setter Property="Height"          Value="24" />
+    <Setter Property="Padding"         Value="0" />
+    <Setter Property="Background"      Value="Transparent" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="CornerRadius"    Value="6" />
+    <Setter Property="Foreground"      Value="{StaticResource TextMuteBrush}" />
+  </Style>
+  <Style Selector="Button.icon-btn:pointerover /template/ ContentPresenter">
+    <Setter Property="Background" Value="{StaticResource Surface2Brush}" />
+    <Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- INPUTS                                                       -->
+  <!-- ============================================================ -->
+  <Style Selector="TextBox.search">
+    <Setter Property="Background"      Value="{StaticResource DeepBrush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius"    Value="{StaticResource InputCornerRadius}" />
+    <Setter Property="Padding"         Value="10,8" />
+    <Setter Property="FontSize"        Value="13" />
+    <Setter Property="Foreground"      Value="{StaticResource TextBrush}" />
+    <Setter Property="CaretBrush"      Value="{StaticResource AccentBrush}" />
+  </Style>
+  <Style Selector="TextBox.search:focus /template/ Border#PART_BorderElement">
+    <Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
+    <Setter Property="BoxShadow"   Value="0 0 0 3 #387C9166" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- TASK ROW                                                     -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.task-row">
+    <Setter Property="Padding"      Value="12,10" />
+    <Setter Property="CornerRadius" Value="8" />
+    <Setter Property="Background"   Value="Transparent" />
+    <Setter Property="Cursor"       Value="Hand" />
+  </Style>
+  <Style Selector="Border.task-row:pointerover">
+    <Setter Property="Background" Value="{StaticResource Surface2Brush}" />
+  </Style>
+  <Style Selector="Border.task-row.selected">
+    <Setter Property="Background"      Value="{StaticResource Surface3Brush}" />
+    <Setter Property="BorderBrush"     Value="{StaticResource AccentBrush}" />
+    <Setter Property="BorderThickness" Value="0,0,0,0" />
+    <!-- Left-edge accent bar: use a nested Border child with Width=2 instead of inset shadow -->
+  </Style>
+
+  <!-- Checkbox indicator (the 18px circle that replaces the native CheckBox template) -->
+  <Style Selector="Ellipse.task-check">
+    <Setter Property="Width"  Value="18" />
+    <Setter Property="Height" Value="18" />
+    <Setter Property="StrokeThickness" Value="1.5" />
+    <Setter Property="Stroke" Value="{StaticResource TextFaintBrush}" />
+    <Setter Property="Fill"   Value="Transparent" />
+  </Style>
+  <Style Selector="Ellipse.task-check.done">
+    <Setter Property="Stroke" Value="{StaticResource AccentBrush}" />
+    <Setter Property="Fill"   Value="{StaticResource AccentBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- AGENT STRIP                                                  -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.agent-strip">
+    <Setter Property="Padding"         Value="12,10" />
+    <Setter Property="CornerRadius"    Value="10" />
+    <Setter Property="Background"      Value="{StaticResource Surface2Brush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="BorderBrush"     Value="{StaticResource LineBrush}" />
+  </Style>
+  <Style Selector="Border.agent-strip.running">
+    <Setter Property="Background"  Value="#147C9166" />
+    <Setter Property="BorderBrush" Value="#4C7C9166" />
+  </Style>
+  <Style Selector="Border.agent-strip.review">
+    <Setter Property="Background"  Value="#14D4A574" />
+    <Setter Property="BorderBrush" Value="#4CD4A574" />
+  </Style>
+  <Style Selector="Border.agent-strip.error">
+    <Setter Property="Background"  Value="#14C87060" />
+    <Setter Property="BorderBrush" Value="#4CC87060" />
+  </Style>
+
+  <!-- queued → Sage tint -->
+  <Style Selector="Border.agent-strip.queued">
+    <Setter Property="Background"  Value="#148B9D7A" />
+    <Setter Property="BorderBrush" Value="#4C8B9D7A" />
+  </Style>
+
+  <!-- idle → neutral (same as base, explicit for clarity) -->
+  <Style Selector="Border.agent-strip.idle">
+    <Setter Property="Background"  Value="{StaticResource Surface2Brush}" />
+    <Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- TERMINAL / LOG                                               -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.terminal">
+    <Setter Property="Background"   Value="#FF080C0B" />
+    <Setter Property="CornerRadius" Value="8" />
+    <Setter Property="Padding"      Value="12" />
+    <Setter Property="BorderBrush"  Value="{StaticResource LineBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+  </Style>
+  <Style Selector="Border.terminal TextBlock">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="11" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+  <Style Selector="Border.terminal TextBlock.log-sys">
+    <Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
+  </Style>
+  <Style Selector="Border.terminal TextBlock.log-tool">
+    <Setter Property="Foreground" Value="{StaticResource SageBrush}" />
+  </Style>
+  <Style Selector="Border.terminal TextBlock.log-claude">
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+  </Style>
+  <!-- log-stdout: program output — dim text, same as base -->
+  <Style Selector="Border.terminal TextBlock.log-stdout">
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+  <Style Selector="Border.terminal TextBlock.log-stderr">
+    <Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
+  </Style>
+  <Style Selector="Border.terminal TextBlock.log-done">
+    <Setter Property="Foreground" Value="{StaticResource MossBrightBrush}" />
+  </Style>
+  <!-- log-msg: generic informational message — slightly brighter than sys -->
+  <Style Selector="Border.terminal TextBlock.log-msg">
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- LIST NAV ITEM                                                -->
+  <!-- ============================================================ -->
+  <Style Selector="Border.list-item">
+    <Setter Property="Padding"      Value="10,7" />
+    <Setter Property="CornerRadius" Value="8" />
+    <Setter Property="Cursor"       Value="Hand" />
+  </Style>
+  <Style Selector="Border.list-item:pointerover">
+    <Setter Property="Background" Value="{StaticResource Surface2Brush}" />
+  </Style>
+  <Style Selector="Border.list-item.active">
+    <Setter Property="Background" Value="{StaticResource AccentSoftBrush}" />
+  </Style>
+
+</Styles>