From 0b062651176340c8415f9cc2ccf24f17f9dbcc91 Mon Sep 17 00:00:00 2001
From: Codex CLI <codex@example.com>
Date: Wed, 27 Aug 2025 03:00:31 -0500
Subject: [PATCH 1/4] UI: Replace two-column Grid with SplitView; add narrow
 pane toggle; add WidthToBooleanConverter and width-based DisplayMode triggers
 for a responsive layout across Web, Desktop, Android.

---
 .../Converters/WidthToBooleanConverter.cs     |  31 +++
 src/AdvancedCalculator/Views/MainView.axaml   | 205 +++++++++++-------
 2 files changed, 153 insertions(+), 83 deletions(-)
 create mode 100644 src/AdvancedCalculator/Converters/WidthToBooleanConverter.cs

diff --git a/src/AdvancedCalculator/Converters/WidthToBooleanConverter.cs b/src/AdvancedCalculator/Converters/WidthToBooleanConverter.cs
new file mode 100644
index 0000000..6efa5f6
--- /dev/null
+++ b/src/AdvancedCalculator/Converters/WidthToBooleanConverter.cs
@@ -0,0 +1,31 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace AdvancedCalculator.Converters;
+
+// Returns true if width (double) is less than the provided threshold (parameter),
+// otherwise false. Default threshold is 640 when parameter is null or invalid.
+public class WidthToBooleanConverter : IValueConverter
+{
+    public static readonly WidthToBooleanConverter Instance = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo? culture)
+    {
+        if (value is double width)
+        {
+            double threshold = 640;
+            if (parameter is double p)
+                threshold = p;
+            else if (parameter is string s && double.TryParse(s, NumberStyles.Number, CultureInfo.InvariantCulture, out var parsed))
+                threshold = parsed;
+
+            return width < threshold;
+        }
+        return false;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo? culture)
+        => throw new NotSupportedException();
+}
+
diff --git a/src/AdvancedCalculator/Views/MainView.axaml b/src/AdvancedCalculator/Views/MainView.axaml
index 71ffac9..35b2c61 100644
--- a/src/AdvancedCalculator/Views/MainView.axaml
+++ b/src/AdvancedCalculator/Views/MainView.axaml
@@ -10,92 +10,131 @@
              x:DataType="vm:MainViewModel">
   <UserControl.Resources>
     <conv:BoolToGridLengthConverter x:Key="BoolToGridLengthConverter" />
+    <conv:WidthToBooleanConverter x:Key="WidthToBooleanConverter" />
   </UserControl.Resources>
+  <!-- Replace columns with a responsive SplitView -->
+  <SplitView x:Name="RootSplit"
+             OpenPaneLength="320"
+             CompactPaneLength="0">
+    <!-- Responsive behavior: set DisplayMode and IsPaneOpen based on width -->
+    <SplitView.Styles>
+      <Style Selector="SplitView#RootSplit">
+        <Style.Triggers>
+          <!-- Narrow: Overlay mode, pane closed by default -->
+          <DataTrigger Value="True"
+                       Binding="{Binding $parent[Window].Bounds.Width,
+                                         Converter={StaticResource WidthToBooleanConverter},
+                                         ConverterParameter=640}">
+            <Setter Property="DisplayMode" Value="Overlay" />
+            <Setter Property="IsPaneOpen" Value="False" />
+          </DataTrigger>
+          <!-- Wide: Inline mode, pane open -->
+          <DataTrigger Value="False"
+                       Binding="{Binding $parent[Window].Bounds.Width,
+                                         Converter={StaticResource WidthToBooleanConverter},
+                                         ConverterParameter=640}">
+            <Setter Property="DisplayMode" Value="Inline" />
+            <Setter Property="IsPaneOpen" Value="True" />
+          </DataTrigger>
+        </Style.Triggers>
+      </Style>
+    </SplitView.Styles>
 
-  <Grid ColumnDefinitions="*,3*">
-    <!-- Left column: Variables + Functions -->
-    <Grid Grid.Column="0">
-      <Grid.RowDefinitions>
-        <RowDefinition Height="*" />
-        <RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
-      </Grid.RowDefinitions>
+    <!-- Left pane: Variables + Functions -->
+    <SplitView.Pane>
+      <Grid>
+        <Grid.RowDefinitions>
+          <RowDefinition Height="*" />
+          <RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
+        </Grid.RowDefinitions>
 
-      <!-- Variables list -->
-      <ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1">
-        <ListBox.ItemTemplate>
-          <DataTemplate x:DataType="m:VariableItem">
-            <Grid ColumnDefinitions="Auto,*,Auto" Margin="4,2">
-              <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
-                         FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
-              <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
-              <StackPanel Grid.Column="2" Spacing="2">
-                <TextBlock Text="{Binding Value}" />
-                <TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
+        <!-- Variables list -->
+        <ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1">
+          <ListBox.ItemTemplate>
+            <DataTemplate x:DataType="m:VariableItem">
+              <Grid ColumnDefinitions="Auto,*,Auto" Margin="4,2">
+                <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
+                           FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
+                <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
+                <StackPanel Grid.Column="2" Spacing="2">
+                  <TextBlock Text="{Binding Value}" />
+                  <TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
+                </StackPanel>
+              </Grid>
+            </DataTemplate>
+          </ListBox.ItemTemplate>
+        </ListBox>
+
+        <!-- Function definitions -->
+        <ListBox Grid.Row="1" BorderThickness="0"
+                 ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}">
+          <ListBox.ItemTemplate>
+            <DataTemplate x:DataType="m:FunctionDefinitionItem">
+              <StackPanel Spacing="2" Margin="4,6">
+                <StackPanel Orientation="Horizontal" Spacing="6">
+                  <TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
+                  <TextBlock Text="{Binding FunctionName}" FontWeight="Bold" />
+                </StackPanel>
+                <TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" />
+                <ItemsControl ItemsSource="{Binding FunctionArguments}">
+                  <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                      <StackPanel>
+                        <TextBlock Text="{Binding Key}" />
+                        <TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
+                      </StackPanel>
+                    </DataTemplate>
+                  </ItemsControl.ItemTemplate>
+                </ItemsControl>
               </StackPanel>
-            </Grid>
-          </DataTemplate>
-        </ListBox.ItemTemplate>
-      </ListBox>
-
-      <!-- Function definitions -->
-      <ListBox Grid.Row="1" BorderThickness="0"
-               ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}">
-        <ListBox.ItemTemplate>
-          <DataTemplate x:DataType="m:FunctionDefinitionItem">
-            <StackPanel Spacing="2" Margin="4,6">
-              <StackPanel Orientation="Horizontal" Spacing="6">
-                <TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
-                <TextBlock Text="{Binding FunctionName}" FontWeight="Bold" />
-              </StackPanel>
-              <TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" />
-              <ItemsControl ItemsSource="{Binding FunctionArguments}">
-                <ItemsControl.ItemTemplate>
-                  <DataTemplate>
-                    <StackPanel>
-                      <TextBlock Text="{Binding Key}" />
-                      <TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
-                    </StackPanel>
-                  </DataTemplate>
-                </ItemsControl.ItemTemplate>
-              </ItemsControl>
-            </StackPanel>
-          </DataTemplate>
-        </ListBox.ItemTemplate>
-      </ListBox>
-    </Grid>
-
-    <!-- GridSplitter between columns -->
-    <GridSplitter Grid.Column="0" HorizontalAlignment="Right" Width="5" Background="Transparent" />
-
-    <!-- Right column: History + Input -->
-    <Grid Grid.Column="1" RowDefinitions="*,Auto">
-      <!-- History -->
-      <ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}">
-        <ListBox.ItemTemplate>
-          <DataTemplate x:DataType="m:HistoryItem">
-            <Grid ColumnDefinitions="Auto,*" Margin="4,2">
-              <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
-                         FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
-              <StackPanel Grid.Column="1">
-                <TextBlock Text="{Binding Input}" />
-                <TextBlock Text="{Binding Output}" FontWeight="Bold" />
-              </StackPanel>
-            </Grid>
-          </DataTemplate>
-        </ListBox.ItemTemplate>
-      </ListBox>
-
-      <!-- Input Row -->
-      <Grid Grid.Row="1" ColumnDefinitions="Auto,*" Margin="4">
-        <Button Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
-          <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
-        </Button>
-        <TextBox Grid.Column="1" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
-          <InputElement.KeyBindings>
-            <KeyBinding Gesture="Enter" Command="{Binding SubmitCommand}" />
-          </InputElement.KeyBindings>
-        </TextBox>
+            </DataTemplate>
+          </ListBox.ItemTemplate>
+        </ListBox>
       </Grid>
-    </Grid>
-  </Grid>
+    </SplitView.Pane>
+
+    <!-- Right content: History + Input -->
+    <SplitView.Content>
+      <Grid RowDefinitions="*,Auto">
+        <!-- History -->
+        <ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}">
+          <ListBox.ItemTemplate>
+            <DataTemplate x:DataType="m:HistoryItem">
+              <Grid ColumnDefinitions="Auto,*" Margin="4,2">
+                <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
+                           FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
+                <StackPanel Grid.Column="1">
+                  <TextBlock Text="{Binding Input}" />
+                  <TextBlock Text="{Binding Output}" FontWeight="Bold" />
+                </StackPanel>
+              </Grid>
+            </DataTemplate>
+          </ListBox.ItemTemplate>
+        </ListBox>
+
+        <!-- Input Row -->
+        <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*" Margin="4">
+          <!-- Pane toggle: visible on narrow only -->
+          <ToggleButton Margin="0,0,6,0"
+                        IsVisible="{Binding $parent[Window].Bounds.Width,
+                                            Converter={StaticResource WidthToBooleanConverter},
+                                            ConverterParameter=640}"
+                        IsChecked="{Binding #RootSplit.IsPaneOpen}">
+            <TextBlock Text="≡" FontSize="18"/>
+          </ToggleButton>
+
+          <!-- Toggle functions panel inside the pane -->
+          <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
+            <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
+          </Button>
+
+          <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
+            <InputElement.KeyBindings>
+              <KeyBinding Gesture="Enter" Command="{Binding SubmitCommand}" />
+            </InputElement.KeyBindings>
+          </TextBox>
+        </Grid>
+      </Grid>
+    </SplitView.Content>
+  </SplitView>
 </UserControl>

From 055c2fae036353bc8663198f20f906bc165a5f6c Mon Sep 17 00:00:00 2001
From: Codex CLI <codex@example.com>
Date: Wed, 27 Aug 2025 03:03:07 -0500
Subject: [PATCH 2/4] UX touch-friendly: add Evaluate button; increase min
 sizes/spacing; make variables/functions tap-to-insert via
 InsertVariable/InsertFunction commands.

---
 .../ViewModels/MainViewModel.cs               | 31 ++++++++
 src/AdvancedCalculator/Views/MainView.axaml   | 77 +++++++++++--------
 2 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/src/AdvancedCalculator/ViewModels/MainViewModel.cs b/src/AdvancedCalculator/ViewModels/MainViewModel.cs
index 1611402..7be1cf6 100644
--- a/src/AdvancedCalculator/ViewModels/MainViewModel.cs
+++ b/src/AdvancedCalculator/ViewModels/MainViewModel.cs
@@ -41,6 +41,37 @@ public partial class MainViewModel : ViewModelBase
         IsFunctionsPanelOpen = !IsFunctionsPanelOpen;
     }
 
+    // Insert helpers for touch: appends tokens to the input box
+    [RelayCommand]
+    private void InsertVariable(string? variableName)
+    {
+        if (string.IsNullOrWhiteSpace(variableName))
+            return;
+        InsertToken(variableName);
+    }
+
+    [RelayCommand]
+    private void InsertFunction(string? functionName)
+    {
+        if (string.IsNullOrWhiteSpace(functionName))
+            return;
+        InsertToken(functionName + "()");
+    }
+
+    private void InsertToken(string token)
+    {
+        if (string.IsNullOrEmpty(InputText))
+        {
+            InputText = token;
+            return;
+        }
+
+        if (!char.IsWhiteSpace(InputText[^1]))
+            InputText += " ";
+
+        InputText += token;
+    }
+
     [RelayCommand(AllowConcurrentExecutions = false)]
     private async Task Submit()
     {
diff --git a/src/AdvancedCalculator/Views/MainView.axaml b/src/AdvancedCalculator/Views/MainView.axaml
index 35b2c61..f693853 100644
--- a/src/AdvancedCalculator/Views/MainView.axaml
+++ b/src/AdvancedCalculator/Views/MainView.axaml
@@ -49,44 +49,52 @@
         </Grid.RowDefinitions>
 
         <!-- Variables list -->
-        <ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1">
+        <ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1" HorizontalContentAlignment="Stretch">
           <ListBox.ItemTemplate>
             <DataTemplate x:DataType="m:VariableItem">
-              <Grid ColumnDefinitions="Auto,*,Auto" Margin="4,2">
-                <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
-                           FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
-                <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
-                <StackPanel Grid.Column="2" Spacing="2">
-                  <TextBlock Text="{Binding Value}" />
-                  <TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
-                </StackPanel>
-              </Grid>
+              <Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                      CommandParameter="{Binding VariableName}"
+                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44">
+                <Grid ColumnDefinitions="Auto,*,Auto">
+                  <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
+                             FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
+                  <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
+                  <StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
+                    <TextBlock Text="{Binding Value}" />
+                    <TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
+                  </StackPanel>
+                </Grid>
+              </Button>
             </DataTemplate>
           </ListBox.ItemTemplate>
         </ListBox>
 
         <!-- Function definitions -->
-        <ListBox Grid.Row="1" BorderThickness="0"
+        <ListBox Grid.Row="1" BorderThickness="0" HorizontalContentAlignment="Stretch"
                  ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}">
           <ListBox.ItemTemplate>
             <DataTemplate x:DataType="m:FunctionDefinitionItem">
-              <StackPanel Spacing="2" Margin="4,6">
-                <StackPanel Orientation="Horizontal" Spacing="6">
-                  <TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
-                  <TextBlock Text="{Binding FunctionName}" FontWeight="Bold" />
+              <Button Command="{Binding DataContext.InsertFunctionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                      CommandParameter="{Binding FunctionName}"
+                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44">
+                <StackPanel Spacing="8">
+                  <StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
+                    <TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
+                    <TextBlock Text="{Binding FunctionName}" FontWeight="Bold" />
+                  </StackPanel>
+                  <TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" />
+                  <ItemsControl ItemsSource="{Binding FunctionArguments}">
+                    <ItemsControl.ItemTemplate>
+                      <DataTemplate>
+                        <StackPanel>
+                          <TextBlock Text="{Binding Key}" />
+                          <TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
+                        </StackPanel>
+                      </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                  </ItemsControl>
                 </StackPanel>
-                <TextBlock Text="{Binding FunctionDescription}" FontStyle="Italic" TextWrapping="Wrap" />
-                <ItemsControl ItemsSource="{Binding FunctionArguments}">
-                  <ItemsControl.ItemTemplate>
-                    <DataTemplate>
-                      <StackPanel>
-                        <TextBlock Text="{Binding Key}" />
-                        <TextBlock Text="{Binding Value}" FontStyle="Italic" Margin="8,0,0,0" />
-                      </StackPanel>
-                    </DataTemplate>
-                  </ItemsControl.ItemTemplate>
-                </ItemsControl>
-              </StackPanel>
+              </Button>
             </DataTemplate>
           </ListBox.ItemTemplate>
         </ListBox>
@@ -113,7 +121,7 @@
         </ListBox>
 
         <!-- Input Row -->
-        <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*" Margin="4">
+        <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4" ColumnSpacing="6">
           <!-- Pane toggle: visible on narrow only -->
           <ToggleButton Margin="0,0,6,0"
                         IsVisible="{Binding $parent[Window].Bounds.Width,
@@ -124,15 +132,16 @@
           </ToggleButton>
 
           <!-- Toggle functions panel inside the pane -->
-          <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
+          <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0" MinHeight="40" MinWidth="40">
             <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
           </Button>
 
-          <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
-            <InputElement.KeyBindings>
-              <KeyBinding Gesture="Enter" Command="{Binding SubmitCommand}" />
-            </InputElement.KeyBindings>
-          </TextBox>
+          <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinHeight="44"/>
+          
+          <!-- Explicit evaluate button for touch -->
+          <Button Grid.Column="3" Command="{Binding SubmitCommand}" MinHeight="44" Padding="16,8">
+            <TextBlock Text="Evaluate"/>
+          </Button>
         </Grid>
       </Grid>
     </SplitView.Content>

From a212870d09e5880f51e842726890b1825bf2b592 Mon Sep 17 00:00:00 2001
From: Codex CLI <codex@example.com>
Date: Wed, 27 Aug 2025 03:07:30 -0500
Subject: [PATCH 3/4] A11y + empty states: add AutomationProperties names to
 controls; overlay empty-state hints for Variables and History; add input
 Watermark.

---
 src/AdvancedCalculator/Views/MainView.axaml | 124 +++++++++++++-------
 1 file changed, 84 insertions(+), 40 deletions(-)

diff --git a/src/AdvancedCalculator/Views/MainView.axaml b/src/AdvancedCalculator/Views/MainView.axaml
index f693853..ba2be2e 100644
--- a/src/AdvancedCalculator/Views/MainView.axaml
+++ b/src/AdvancedCalculator/Views/MainView.axaml
@@ -48,35 +48,56 @@
           <RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
         </Grid.RowDefinitions>
 
-        <!-- Variables list -->
-        <ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1" HorizontalContentAlignment="Stretch">
-          <ListBox.ItemTemplate>
-            <DataTemplate x:DataType="m:VariableItem">
-              <Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
-                      CommandParameter="{Binding VariableName}"
-                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44">
-                <Grid ColumnDefinitions="Auto,*,Auto">
-                  <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
-                             FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
-                  <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
-                  <StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
-                    <TextBlock Text="{Binding Value}" />
-                    <TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
-                  </StackPanel>
-                </Grid>
-              </Button>
-            </DataTemplate>
-          </ListBox.ItemTemplate>
-        </ListBox>
+        <!-- Variables list with empty-state hint overlay -->
+        <Grid Grid.Row="0">
+          <ListBox ItemsSource="{Binding Variables}" SelectedIndex="-1" HorizontalContentAlignment="Stretch"
+                   AutomationProperties.Name="Variables list">
+            <ListBox.ItemTemplate>
+              <DataTemplate x:DataType="m:VariableItem">
+                <Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                        CommandParameter="{Binding VariableName}"
+                        Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
+                        AutomationProperties.Name="Insert variable">
+                  <Grid ColumnDefinitions="Auto,*,Auto">
+                    <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
+                               FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
+                    <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
+                    <StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
+                      <TextBlock Text="{Binding Value}" />
+                      <TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
+                    </StackPanel>
+                  </Grid>
+                </Button>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
+          <TextBlock Text="No variables yet. Define with: x = 5"
+                     IsVisible="False"
+                     IsHitTestVisible="False"
+                     Opacity="0.6"
+                     HorizontalAlignment="Center" VerticalAlignment="Center">
+            <TextBlock.Styles>
+              <Style Selector="TextBlock">
+                <Style.Triggers>
+                  <DataTrigger Binding="{Binding Variables.Count}" Value="0">
+                    <Setter Property="IsVisible" Value="True" />
+                  </DataTrigger>
+                </Style.Triggers>
+              </Style>
+            </TextBlock.Styles>
+          </TextBlock>
+        </Grid>
 
         <!-- Function definitions -->
         <ListBox Grid.Row="1" BorderThickness="0" HorizontalContentAlignment="Stretch"
-                 ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}">
+                 ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}"
+                 AutomationProperties.Name="Functions list">
           <ListBox.ItemTemplate>
             <DataTemplate x:DataType="m:FunctionDefinitionItem">
               <Button Command="{Binding DataContext.InsertFunctionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                       CommandParameter="{Binding FunctionName}"
-                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44">
+                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
+                      AutomationProperties.Name="Insert function">
                 <StackPanel Spacing="8">
                   <StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
                     <TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
@@ -105,20 +126,38 @@
     <SplitView.Content>
       <Grid RowDefinitions="*,Auto">
         <!-- History -->
-        <ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}">
-          <ListBox.ItemTemplate>
-            <DataTemplate x:DataType="m:HistoryItem">
-              <Grid ColumnDefinitions="Auto,*" Margin="4,2">
-                <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
-                           FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
-                <StackPanel Grid.Column="1">
-                  <TextBlock Text="{Binding Input}" />
-                  <TextBlock Text="{Binding Output}" FontWeight="Bold" />
-                </StackPanel>
-              </Grid>
-            </DataTemplate>
-          </ListBox.ItemTemplate>
-        </ListBox>
+        <Grid Grid.Row="0">
+          <ListBox ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}"
+                   AutomationProperties.Name="History list">
+            <ListBox.ItemTemplate>
+              <DataTemplate x:DataType="m:HistoryItem">
+                <Grid ColumnDefinitions="Auto,*" Margin="4,2">
+                  <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
+                             FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
+                  <StackPanel Grid.Column="1">
+                    <TextBlock Text="{Binding Input}" />
+                    <TextBlock Text="{Binding Output}" FontWeight="Bold" />
+                  </StackPanel>
+                </Grid>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
+          <TextBlock Text="No history yet. Enter an expression and Evaluate."
+                     IsVisible="False"
+                     IsHitTestVisible="False"
+                     Opacity="0.6"
+                     HorizontalAlignment="Center" VerticalAlignment="Center">
+            <TextBlock.Styles>
+              <Style Selector="TextBlock">
+                <Style.Triggers>
+                  <DataTrigger Binding="{Binding History.Count}" Value="0">
+                    <Setter Property="IsVisible" Value="True" />
+                  </DataTrigger>
+                </Style.Triggers>
+              </Style>
+            </TextBlock.Styles>
+          </TextBlock>
+        </Grid>
 
         <!-- Input Row -->
         <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4" ColumnSpacing="6">
@@ -127,19 +166,24 @@
                         IsVisible="{Binding $parent[Window].Bounds.Width,
                                             Converter={StaticResource WidthToBooleanConverter},
                                             ConverterParameter=640}"
-                        IsChecked="{Binding #RootSplit.IsPaneOpen}">
+                        IsChecked="{Binding #RootSplit.IsPaneOpen}"
+                        AutomationProperties.Name="Open side panel">
             <TextBlock Text="≡" FontSize="18"/>
           </ToggleButton>
 
           <!-- Toggle functions panel inside the pane -->
-          <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0" MinHeight="40" MinWidth="40">
+          <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0" MinHeight="40" MinWidth="40"
+                  AutomationProperties.Name="Toggle functions panel">
             <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
           </Button>
 
-          <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinHeight="44"/>
+          <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinHeight="44"
+                   AutomationProperties.Name="Expression input"
+                   Watermark="Type an expression (e.g., 2 + 2)"/>
           
           <!-- Explicit evaluate button for touch -->
-          <Button Grid.Column="3" Command="{Binding SubmitCommand}" MinHeight="44" Padding="16,8">
+          <Button Grid.Column="3" Command="{Binding SubmitCommand}" MinHeight="44" Padding="16,8"
+                  AutomationProperties.Name="Evaluate">
             <TextBlock Text="Evaluate"/>
           </Button>
         </Grid>

From 7e40c1dc0bb878a1c4d7ded75867e01b15ae236b Mon Sep 17 00:00:00 2001
From: Codex CLI <codex@example.com>
Date: Wed, 27 Aug 2025 03:15:47 -0500
Subject: [PATCH 4/4] Styles: add shared Typography/Scroll resources; add
 platform overrides (Desktop/Android/Browser) and load via App; switch icons
 to resource-based sizes and cap history text lines.

---
 .../Styles/Android.axaml                      | 17 +++++++++
 .../Styles/Browser.axaml                      | 16 +++++++++
 .../Styles/Desktop.axaml                      | 16 +++++++++
 src/AdvancedCalculator/App.axaml              |  2 ++
 src/AdvancedCalculator/App.axaml.cs           | 36 +++++++++++++++++++
 src/AdvancedCalculator/Styles/Scroll.axaml    | 21 +++++++++++
 .../Styles/Typography.axaml                   | 30 ++++++++++++++++
 src/AdvancedCalculator/Views/MainView.axaml   | 12 +++----
 8 files changed, 144 insertions(+), 6 deletions(-)
 create mode 100644 src/AdvancedCalculator.Android/Styles/Android.axaml
 create mode 100644 src/AdvancedCalculator.Browser/Styles/Browser.axaml
 create mode 100644 src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
 create mode 100644 src/AdvancedCalculator/Styles/Scroll.axaml
 create mode 100644 src/AdvancedCalculator/Styles/Typography.axaml

diff --git a/src/AdvancedCalculator.Android/Styles/Android.axaml b/src/AdvancedCalculator.Android/Styles/Android.axaml
new file mode 100644
index 0000000..30f7e04
--- /dev/null
+++ b/src/AdvancedCalculator.Android/Styles/Android.axaml
@@ -0,0 +1,17 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Android overrides: larger, touch-first -->
+  <x:Double x:Key="FontSizeBase">16</x:Double>
+  <x:Double x:Key="FontSizeLarge">18</x:Double>
+  <x:Double x:Key="IconSizeM">24</x:Double>
+  <x:Double x:Key="LineHeightBase">1.35</x:Double>
+
+  <!-- Thin overlay-like scrollbars -->
+  <Style Selector="ScrollBar:vertical">
+    <Setter Property="Width" Value="8"/>
+  </Style>
+  <Style Selector="ScrollBar:horizontal">
+    <Setter Property="Height" Value="8"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator.Browser/Styles/Browser.axaml b/src/AdvancedCalculator.Browser/Styles/Browser.axaml
new file mode 100644
index 0000000..3842c71
--- /dev/null
+++ b/src/AdvancedCalculator.Browser/Styles/Browser.axaml
@@ -0,0 +1,16 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Browser overrides: middle ground -->
+  <x:Double x:Key="FontSizeBase">15</x:Double>
+  <x:Double x:Key="IconSizeM">22</x:Double>
+  <x:Double x:Key="LineHeightBase">1.3</x:Double>
+
+  <!-- Slightly thinner scrollbars on web -->
+  <Style Selector="ScrollBar:vertical">
+    <Setter Property="Width" Value="8"/>
+  </Style>
+  <Style Selector="ScrollBar:horizontal">
+    <Setter Property="Height" Value="8"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator.Desktop/Styles/Desktop.axaml b/src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
new file mode 100644
index 0000000..7a951d8
--- /dev/null
+++ b/src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
@@ -0,0 +1,16 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Desktop overrides: slightly denser -->
+  <x:Double x:Key="FontSizeBase">13</x:Double>
+  <x:Double x:Key="LineHeightBase">1.2</x:Double>
+  <x:Double x:Key="IconSizeM">20</x:Double>
+
+  <!-- Scrollbars a bit thicker on desktop -->
+  <Style Selector="ScrollBar:vertical">
+    <Setter Property="Width" Value="12"/>
+  </Style>
+  <Style Selector="ScrollBar:horizontal">
+    <Setter Property="Height" Value="12"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator/App.axaml b/src/AdvancedCalculator/App.axaml
index 5e686cd..8d7bed3 100644
--- a/src/AdvancedCalculator/App.axaml
+++ b/src/AdvancedCalculator/App.axaml
@@ -6,6 +6,8 @@
 
     <Application.Styles>
         <FluentTheme />
+        <StyleInclude Source="avares://AdvancedCalculator/Styles/Typography.axaml"/>
+        <StyleInclude Source="avares://AdvancedCalculator/Styles/Scroll.axaml"/>
     </Application.Styles>
 
     <Application.Resources>
diff --git a/src/AdvancedCalculator/App.axaml.cs b/src/AdvancedCalculator/App.axaml.cs
index e967b3b..32716eb 100644
--- a/src/AdvancedCalculator/App.axaml.cs
+++ b/src/AdvancedCalculator/App.axaml.cs
@@ -5,6 +5,8 @@ using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Data.Core.Plugins;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
+using System;
 
 namespace AdvancedCalculator;
 
@@ -21,6 +23,40 @@ public partial class App : Application
         // Without this line you will get duplicate validations from both Avalonia and CT
         BindingPlugins.DataValidators.RemoveAt(0);
 
+        // Load platform-specific styles (typography, scrollbars overrides)
+        try
+        {
+            var styles = Current?.Styles;
+            if (styles is not null)
+            {
+                if (OperatingSystem.IsAndroid())
+                {
+                    styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
+                    {
+                        Source = new Uri("avares://AdvancedCalculator.Android/Styles/Android.axaml")
+                    });
+                }
+                else if (OperatingSystem.IsBrowser())
+                {
+                    styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
+                    {
+                        Source = new Uri("avares://AdvancedCalculator.Browser/Styles/Browser.axaml")
+                    });
+                }
+                else
+                {
+                    styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
+                    {
+                        Source = new Uri("avares://AdvancedCalculator.Desktop/Styles/Desktop.axaml")
+                    });
+                }
+            }
+        }
+        catch
+        {
+            // If a platform-specific style dictionary is missing, continue without failing.
+        }
+
         if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
         {
             desktop.MainWindow = new MainWindow
diff --git a/src/AdvancedCalculator/Styles/Scroll.axaml b/src/AdvancedCalculator/Styles/Scroll.axaml
new file mode 100644
index 0000000..ea9284d
--- /dev/null
+++ b/src/AdvancedCalculator/Styles/Scroll.axaml
@@ -0,0 +1,21 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Shared scrolling defaults -->
+  <Style Selector="ListBox">
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
+    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
+  </Style>
+
+  <Style Selector="ScrollViewer">
+    <Setter Property="CanScrollHorizontally" Value="False"/>
+  </Style>
+
+  <!-- Thin-ish scrollbars by default; platform overrides will adjust -->
+  <Style Selector="ScrollBar:vertical">
+    <Setter Property="Width" Value="10"/>
+  </Style>
+  <Style Selector="ScrollBar:horizontal">
+    <Setter Property="Height" Value="10"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator/Styles/Typography.axaml b/src/AdvancedCalculator/Styles/Typography.axaml
new file mode 100644
index 0000000..eb80272
--- /dev/null
+++ b/src/AdvancedCalculator/Styles/Typography.axaml
@@ -0,0 +1,30 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Shared typography resources -->
+  <x:Double x:Key="FontSizeSmall">12</x:Double>
+  <x:Double x:Key="FontSizeBase">14</x:Double>
+  <x:Double x:Key="FontSizeLarge">16</x:Double>
+  <x:Double x:Key="FontSizeXL">20</x:Double>
+
+  <x:Double x:Key="IconSizeS">18</x:Double>
+  <x:Double x:Key="IconSizeM">22</x:Double>
+  <x:Double x:Key="IconSizeL">26</x:Double>
+
+  <x:Double x:Key="LineHeightTight">1.1</x:Double>
+  <x:Double x:Key="LineHeightBase">1.25</x:Double>
+  <x:Double x:Key="LineHeightRelaxed">1.4</x:Double>
+
+  <!-- Defaults for text -->
+  <Style Selector="TextBlock">
+    <Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeBase}"/>
+    <Setter Property="TextWrapping" Value="Wrap"/>
+    <Setter Property="LineHeight" Value="{DynamicResource LineHeightBase}"/>
+  </Style>
+
+  <!-- Subtle caption text helper -->
+  <Style Selector="TextBlock.caption">
+    <Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeSmall}"/>
+    <Setter Property="Opacity" Value="0.85"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator/Views/MainView.axaml b/src/AdvancedCalculator/Views/MainView.axaml
index ba2be2e..d5fc5e7 100644
--- a/src/AdvancedCalculator/Views/MainView.axaml
+++ b/src/AdvancedCalculator/Views/MainView.axaml
@@ -59,8 +59,8 @@
                         Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
                         AutomationProperties.Name="Insert variable">
                   <Grid ColumnDefinitions="Auto,*,Auto">
-                    <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
-                               FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
+                <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
+                           FontSize="{DynamicResource IconSizeM}" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
                     <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
                     <StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
                       <TextBlock Text="{Binding Value}" />
@@ -132,11 +132,11 @@
             <ListBox.ItemTemplate>
               <DataTemplate x:DataType="m:HistoryItem">
                 <Grid ColumnDefinitions="Auto,*" Margin="4,2">
-                  <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
-                             FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
+                <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
+                           FontSize="{DynamicResource IconSizeM}" VerticalAlignment="Center" Margin="0,0,8,0" />
                   <StackPanel Grid.Column="1">
-                    <TextBlock Text="{Binding Input}" />
-                    <TextBlock Text="{Binding Output}" FontWeight="Bold" />
+                    <TextBlock Text="{Binding Input}" MaxLines="3" />
+                    <TextBlock Text="{Binding Output}" FontWeight="Bold" MaxLines="2" />
                   </StackPanel>
                 </Grid>
               </DataTemplate>