releases/ClaudeDo
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

style(ui): session terminal header, line columns, LIVE chip

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mika kuns
2026-04-20 11:36:39 +02:00
parent c3f077e3b6
commit 01af8cb7d7
3 changed files with 159 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/ClaudeDo.Ui/Design/IslandStyles.axaml
View File

@@ -364,6 +364,84 @@
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
</Style>
<!-- ============================================================ -->
<!-- TERMINAL HEADER -->
<!-- ============================================================ -->
<!-- traffic-light dot colors -->
<Style Selector="Ellipse.dot-red">
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="8" />
<Setter Property="Fill" Value="#5A2A26" />
</Style>
<Style Selector="Ellipse.dot-yellow">
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="8" />
<Setter Property="Fill" Value="#6A5A28" />
</Style>
<Style Selector="Ellipse.dot-green">
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="8" />
<Setter Property="Fill" Value="#2F4D2F" />
</Style>
<!-- LIVE chip (pulsing dot + text) -->
<Style Selector="Border.live-chip">
<Setter Property="Padding" Value="5,2" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="Background" Value="#267C9166" />
</Style>
<Style Selector="Border.live-chip > StackPanel > TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="9" />
<Setter Property="Foreground" Value="{StaticResource AccentBrush}" />
<Setter Property="LetterSpacing" Value="1.2" />
</Style>
<Style Selector="Border.live-chip > StackPanel > Ellipse">
<Setter Property="Width" Value="6" />
<Setter Property="Height" Value="6" />
<Setter Property="Fill" Value="{StaticResource AccentBrush}" />
</Style>
<Style Selector="Border.live-chip.pulsing > StackPanel > Ellipse">
<Style.Animations>
<Animation Duration="0:0:1.4" IterationCount="INFINITE" Easing="CubicEaseInOut">
<KeyFrame Cue="0%"> <Setter Property="Opacity" Value="1.0"/></KeyFrame>
<KeyFrame Cue="50%"> <Setter Property="Opacity" Value="0.3"/></KeyFrame>
<KeyFrame Cue="100%"><Setter Property="Opacity" Value="1.0"/></KeyFrame>
</Animation>
</Style.Animations>
</Style>
<!-- Terminal log-line timestamp column -->
<Style Selector="TextBlock.log-ts">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="10" />
<Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
<Setter Property="Width" Value="60" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="0,0,4,0" />
</Style>
<!-- Kind marker column -->
<Style Selector="TextBlock.log-kind">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="10" />
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
<Setter Property="Width" Value="46" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="0,0,6,0" />
</Style>
<Style Selector="TextBlock.log-kind[Tag=log-tool]">
<Setter Property="Foreground" Value="{StaticResource SageBrush}" />
</Style>
<Style Selector="TextBlock.log-kind[Tag=log-claude]">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
</Style>
<Style Selector="TextBlock.log-kind[Tag=log-stderr]">
<Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
</Style>
<Style Selector="TextBlock.log-kind[Tag=log-done]">
<Setter Property="Foreground" Value="{StaticResource MossBrightBrush}" />
</Style>
<!-- ============================================================ -->
<!-- WORKTREE MODAL STATUS BADGES -->
<!-- Tag="M" → peat, "A" → moss, "D" → blood, "?" → faint -->

12
src/ClaudeDo.Ui/ViewModels/Islands/LogLineViewModel.cs
View File

@@ -6,6 +6,18 @@ public sealed class LogLineViewModel
{
public required LogKind Kind { get; init; }
public required string Text { get; init; }
public string TimestampFormatted { get; } = DateTime.Now.ToString("HH:mm:ss");
public string KindMarker => Kind switch
{
LogKind.Sys => "sys",
LogKind.Tool => "tool",
LogKind.Claude => "claude",
LogKind.Stdout => "out",
LogKind.Stderr => "err",
LogKind.Done => "done",
LogKind.Msg => "claude",
_ => "",
};
public string ClassName => Kind switch
{
LogKind.Sys => "log-sys",

82
src/ClaudeDo.Ui/Views/Islands/SessionTerminalView.axaml
View File

@@ -3,33 +3,89 @@
xmlns:vm="using:ClaudeDo.Ui.ViewModels.Islands"
x:Class="ClaudeDo.Ui.Views.Islands.SessionTerminalView"
x:DataType="vm:DetailsIslandViewModel">
<Border Classes="terminal" Padding="10">
<Border Classes="terminal" Margin="18,8,18,0">
<DockPanel LastChildFill="True">
<!-- Prompt input bar (docked to bottom) -->
<Grid DockPanel.Dock="Bottom" ColumnDefinitions="Auto,*" Margin="0,8,0,0">
<TextBlock Grid.Column="0" Text="[you]" FontFamily="{DynamicResource MonoFamily}"
<!-- ── Terminal header bar ── -->
<Grid DockPanel.Dock="Top" ColumnDefinitions="Auto,*,Auto"
Background="{DynamicResource Surface2Brush}"
Height="28">
<!-- Traffic-light dots -->
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="4"
VerticalAlignment="Center" Margin="10,0,0,0">
<Ellipse Classes="dot-red"/>
<Ellipse Classes="dot-yellow"/>
<Ellipse Classes="dot-green"/>
</StackPanel>
<!-- Session label -->
<TextBlock Grid.Column="1"
Text="{Binding BranchLine, StringFormat='claude-session · {0}'}"
FontFamily="{DynamicResource MonoFont}" FontSize="10"
LetterSpacing="0.8"
Foreground="{DynamicResource TextMuteBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<!-- LIVE chip -->
<Border Grid.Column="2" Classes="live-chip"
Classes.pulsing="{Binding IsRunning}"
Margin="0,0,8,0" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center">
<Ellipse VerticalAlignment="Center"/>
<TextBlock Text="LIVE" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</Grid>
<!-- ── Prompt input (docked bottom) ── -->
<Grid DockPanel.Dock="Bottom" ColumnDefinitions="Auto,*"
Margin="0,0,0,0"
Background="{DynamicResource Surface2Brush}">
<Border Grid.ColumnSpan="2"
BorderBrush="{DynamicResource LineBrush}"
BorderThickness="0,1,0,0"/>
<TextBlock Grid.Column="0" Text="›"
FontFamily="{DynamicResource MonoFont}"
FontSize="11" Foreground="{DynamicResource MossBrush}"
VerticalAlignment="Center" Margin="0,0,8,0"/>
<TextBox Grid.Column="1" Text="{Binding PromptInput, Mode=TwoWay}"
FontFamily="{DynamicResource MonoFamily}" FontSize="11">
VerticalAlignment="Center" Margin="10,0,8,0"/>
<TextBox Grid.Column="1"
Text="{Binding PromptInput, Mode=TwoWay}"
FontFamily="{DynamicResource MonoFont}" FontSize="11"
Background="Transparent" BorderThickness="0"
Padding="0,6">
<TextBox.KeyBindings>
<KeyBinding Gesture="Enter" Command="{Binding SendPromptCommand}"/>
</TextBox.KeyBindings>
</TextBox>
</Grid>
<!-- Log output -->
<ScrollViewer Name="LogScroll" VerticalScrollBarVisibility="Auto">
<!-- ── Log output ── -->
<ScrollViewer Name="LogScroll" VerticalScrollBarVisibility="Auto"
Padding="10,8,10,4">
<ItemsControl ItemsSource="{Binding Log}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="vm:LogLineViewModel">
<TextBlock Text="{Binding Text}" Tag="{Binding ClassName}"
FontFamily="{DynamicResource MonoFamily}" FontSize="11"
Foreground="{DynamicResource TextDimBrush}"
TextWrapping="Wrap"/>
<Grid ColumnDefinitions="60,46,*" Margin="0,1">
<!-- Timestamp -->
<TextBlock Grid.Column="0"
Classes="log-ts"
Text="{Binding TimestampFormatted}"/>
<!-- Kind marker -->
<TextBlock Grid.Column="1"
Classes="log-kind"
Tag="{Binding ClassName}"
Text="{Binding KindMarker}"/>
<!-- Message text — inherits terminal TextBlock color from parent selector -->
<TextBlock Grid.Column="2"
Text="{Binding Text}" Tag="{Binding ClassName}"
FontFamily="{DynamicResource MonoFont}" FontSize="11"
Foreground="{DynamicResource TextDimBrush}"
TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
</Border>
</UserControl>