AX Agent 메인 UI를 claw-code 축으로 전면 재배치

- ChatWindow 메인 레이아웃을 기존 카드형 AX 틀에서 벗어나 사이드바·본문·컴포저 중심의 더 평평한 claw-code 스타일로 재정렬 - 창 기본 크기, 사이드바 폭, 상단 탭 헤더, 검색 바, 빈 상태, 컴포저 외곽선과 입력축을 다시 조정해 메시지 축과 입력축이 같은 중심선을 공유하도록 변경 - 메시지 버블, compact pill, 이전 대화 로드 카드, planning 카드의 패딩·코너·메타 밀도를 낮춰 transcript 우선 시각 언어로 통일 - README와 docs/DEVELOPMENT.md에 2026-04-05 18:30 (KST) 기준 작업 이력 및 claw-code 대비 진척율 반영 - 검증: dotnet build src/AxCopilot/AxCopilot.csproj -c Release -v minimal -p:OutputPath=bin\\verify\\ -p:IntermediateOutputPath=obj\\verify\\ (경고 0 / 오류 0)
2026-04-05 16:03:26 +09:00
parent ed1b8497c6
commit aa3de8a6fd
4 changed files with 148 additions and 150 deletions
--- a/src/AxCopilot/Views/ChatWindow.xaml.cs
+++ b/src/AxCopilot/Views/ChatWindow.xaml.cs
@@ -2879,12 +2879,12 @@ public partial class ChatWindow : Window

            if (animated)
            {
-                AnimateSidebar(0, 248, () => SidebarColumn.MinWidth = 184);
+            AnimateSidebar(0, 220, () => SidebarColumn.MinWidth = 168);
            }
            else
            {
-                SidebarColumn.MinWidth = 184;
-                SidebarColumn.Width = new GridLength(248);
+            SidebarColumn.MinWidth = 168;
+            SidebarColumn.Width = new GridLength(220);
            }
            return;
        }
@@ -4161,7 +4161,7 @@ public partial class ChatWindow : Window
            Background = Brushes.Transparent,
            BorderBrush = borderBrush,
            BorderThickness = new Thickness(1),
-            Padding = new Thickness(8, 4, 8, 4),
+            Padding = new Thickness(7, 3, 7, 3),
            Cursor = System.Windows.Input.Cursors.Hand,
            Foreground = primaryText,
            HorizontalAlignment = HorizontalAlignment.Center,
@@ -4176,17 +4176,16 @@ public partial class ChatWindow : Window
                {
                    Text = "\uE70D",
                    FontFamily = new FontFamily("Segoe MDL2 Assets"),
-                    FontSize = 9,
+                    FontSize = 8,
                    Foreground = secondaryText,
-                    Margin = new Thickness(0, 0, 5, 0),
+                    Margin = new Thickness(0, 0, 4, 0),
                    VerticalAlignment = VerticalAlignment.Center,
                },
                new TextBlock
                {
                    Text = $"이전 대화 {hiddenCount:N0}개",
-                    FontSize = 10,
-                    FontWeight = FontWeights.SemiBold,
-                    Foreground = primaryText,
+                    FontSize = 9.25,
+                    Foreground = secondaryText,
                    VerticalAlignment = VerticalAlignment.Center,
                }
            }
@@ -4201,8 +4200,8 @@ public partial class ChatWindow : Window

        return new Border
        {
-            CornerRadius = new CornerRadius(12),
-            Margin = new Thickness(0, 2, 0, 10),
+            CornerRadius = new CornerRadius(10),
+            Margin = new Thickness(0, 2, 0, 8),
            Padding = new Thickness(0),
            Background = Brushes.Transparent,
            BorderBrush = Brushes.Transparent,
@@ -4332,12 +4331,12 @@ public partial class ChatWindow : Window
    {
        return new Border
        {
-            Background = hintBg,
-            BorderBrush = borderBrush,
-            BorderThickness = new Thickness(1),
+            Background = Brushes.Transparent,
+            BorderBrush = Brushes.Transparent,
+            BorderThickness = new Thickness(0),
            CornerRadius = new CornerRadius(999),
-            Padding = new Thickness(8, 4, 8, 4),
-            Margin = new Thickness(10, 3, 170, 3),
+            Padding = new Thickness(6, 2, 6, 2),
+            Margin = new Thickness(8, 2, 220, 2),
            HorizontalAlignment = HorizontalAlignment.Left,
            Child = new StackPanel
            {
@@ -4348,16 +4347,16 @@ public partial class ChatWindow : Window
                    {
                        Text = "\uE9CE",
                        FontFamily = new FontFamily("Segoe MDL2 Assets"),
-                        FontSize = 9,
+                        FontSize = 8,
                        Foreground = accentBrush,
                        VerticalAlignment = VerticalAlignment.Center,
                    },
                    new TextBlock
                    {
                        Text = summary,
-                        FontSize = 9.5,
+                        FontSize = 8.75,
                        Foreground = secondaryText,
-                        Margin = new Thickness(5, 0, 0, 0),
+                        Margin = new Thickness(4, 0, 0, 0),
                        VerticalAlignment = VerticalAlignment.Center,
                    }
                }
@@ -4381,12 +4380,12 @@ public partial class ChatWindow : Window

        if (isUser)
        {
-            // 사용자: 우측 정렬, 얇고 단정한 카드
+            // 사용자: claw-code 쪽처럼 더 얇은 transcript 버블
            var wrapper = new StackPanel
            {
                HorizontalAlignment = HorizontalAlignment.Right,
                MaxWidth = GetMessageMaxWidth(),
-                Margin = new Thickness(208, 2, 12, 2),
+                Margin = new Thickness(240, 3, 10, 3),
            };

            var bubble = new Border
@@ -4394,16 +4393,16 @@ public partial class ChatWindow : Window
                Background = userBubbleBg,
                BorderBrush = borderBrush,
                BorderThickness = new Thickness(1),
-                CornerRadius = new CornerRadius(11),
-                Padding = new Thickness(10, 6.5, 10, 6.5),
+                CornerRadius = new CornerRadius(9),
+                Padding = new Thickness(11, 7, 11, 7),
                Child = new TextBlock
                {
                    Text = content,
                    TextAlignment = TextAlignment.Left,
-                    FontSize = 11.25,
+                    FontSize = 12,
                    Foreground = primaryText,
                    TextWrapping = TextWrapping.Wrap,
-                    LineHeight = 17.5,
+                    LineHeight = 18,
                }
            };
            wrapper.Children.Add(bubble);
@@ -4414,7 +4413,7 @@ public partial class ChatWindow : Window
                Orientation = Orientation.Horizontal,
                HorizontalAlignment = HorizontalAlignment.Right,
                Opacity = 0,
-                Margin = new Thickness(0, 1, 0, 0),
+                Margin = new Thickness(0, 2, 0, 0),
            };
            var capturedUserContent = content;
            var userBtnColor = secondaryText;
@@ -4431,7 +4430,7 @@ public partial class ChatWindow : Window
            userBottomBar.Children.Add(new TextBlock
            {
                Text = timestamp.ToString("HH:mm"),
-                FontSize = 7.5, Opacity = 0.36,
+                FontSize = 8, Opacity = 0.34,
                Foreground = TryFindResource("SecondaryText") as Brush ?? Brushes.Gray,
                HorizontalAlignment = HorizontalAlignment.Right,
                VerticalAlignment = VerticalAlignment.Center,
@@ -4464,24 +4463,24 @@ public partial class ChatWindow : Window
                return;
            }

-            // 어시스턴트: 좌측 정렬, 정돈된 카드
+            // 어시스턴트: 카드보다 transcript 행에 가까운 스타일
            var container = new StackPanel
            {
                HorizontalAlignment = HorizontalAlignment.Left,
                MaxWidth = GetMessageMaxWidth(),
-                Margin = new Thickness(4, 2, 178, 2)
+                Margin = new Thickness(2, 4, 210, 4)
            };
            if (animate) ApplyMessageEntryAnimation(container);

            // AI 에이전트 이름 + 아이콘
            var (agentName, _, _) = GetAgentIdentity();
-            var headerSp = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(2, 0, 0, 0.5) };
+            var headerSp = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(2, 0, 0, 1.5) };

            var iconBlock = new TextBlock
            {
                Text = "\uE945",
                FontFamily = new FontFamily("Segoe MDL2 Assets"),
-                FontSize = 6.5,
+                FontSize = 7.5,
                Foreground = secondaryText,
                VerticalAlignment = VerticalAlignment.Center,
            };
@@ -4490,10 +4489,10 @@ public partial class ChatWindow : Window
            headerSp.Children.Add(new TextBlock
            {
                Text = agentName,
-                FontSize = 7.5,
-                FontWeight = FontWeights.Normal,
+                FontSize = 8.5,
+                FontWeight = FontWeights.Medium,
                Foreground = secondaryText,
-                Margin = new Thickness(2.5, 0, 0, 0),
+                Margin = new Thickness(4, 0, 0, 0),
                VerticalAlignment = VerticalAlignment.Center,
            });
            container.Children.Add(headerSp);
@@ -4503,8 +4502,8 @@ public partial class ChatWindow : Window
                Background = assistantBubbleBg,
                BorderBrush = borderBrush,
                BorderThickness = new Thickness(1),
-                CornerRadius = new CornerRadius(11),
-                Padding = new Thickness(10, 6.5, 10, 6.5),
+                CornerRadius = new CornerRadius(9),
+                Padding = new Thickness(11, 8, 11, 8),
            };
            var contentStack = new StackPanel();

@@ -4633,7 +4632,7 @@ public partial class ChatWindow : Window
            {
                Orientation = Orientation.Horizontal,
                HorizontalAlignment = HorizontalAlignment.Left,
-                Margin = new Thickness(2, 0.5, 0, 0),
+                Margin = new Thickness(2, 2, 0, 0),
                Opacity = 0
            };

@@ -4653,7 +4652,7 @@ public partial class ChatWindow : Window
            actionBar.Children.Add(new TextBlock
            {
                Text = aiTimestamp.ToString("HH:mm"),
-                FontSize = 7.75, Opacity = 0.38,
+                FontSize = 8, Opacity = 0.34,
                Foreground = btnColor,
                VerticalAlignment = VerticalAlignment.Center,
                Margin = new Thickness(3, 0, 0, 0),
@@ -9413,17 +9412,18 @@ public partial class ChatWindow : Window
        var primaryText = TryFindResource("PrimaryText") as Brush ?? Brushes.Black;
        var secondaryText = TryFindResource("SecondaryText") as Brush ?? Brushes.DimGray;
        var itemBg = TryFindResource("ItemBackground") as Brush ?? BrushFromHex("#FFFFFF");
+        var hintBg = TryFindResource("HintBackground") as Brush ?? BrushFromHex("#F8FAFC");
        var borderBrush = TryFindResource("BorderColor") as Brush ?? BrushFromHex("#E2E8F0");
        var accentBrush = TryFindResource("AccentColor") as Brush ?? BrushFromHex("#4B5EFC");

        var card = new Border
        {
-            Background = itemBg,
+            Background = hintBg,
            BorderBrush = borderBrush,
            BorderThickness = new Thickness(1),
-            CornerRadius = new CornerRadius(14),
-            Padding = new Thickness(12, 10, 12, 10),
-            Margin = new Thickness(14, 4, 180, 8),
+            CornerRadius = new CornerRadius(10),
+            Padding = new Thickness(10, 8, 10, 8),
+            Margin = new Thickness(8, 3, 228, 6),
            HorizontalAlignment = HorizontalAlignment.Left,
            MaxWidth = GetMessageMaxWidth(),
        };
@@ -9431,20 +9431,20 @@ public partial class ChatWindow : Window
        var sp = new StackPanel();

        // 헤더
-        var header = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(0, 0, 0, 5) };
+        var header = new StackPanel { Orientation = Orientation.Horizontal, Margin = new Thickness(0, 0, 0, 4) };
        header.Children.Add(new TextBlock
        {
            Text = "\uE9D5", // plan icon
            FontFamily = new FontFamily("Segoe MDL2 Assets"),
-            FontSize = 10.5,
+            FontSize = 9,
            Foreground = accentBrush,
            VerticalAlignment = VerticalAlignment.Center,
-            Margin = new Thickness(0, 0, 5, 0),
+            Margin = new Thickness(0, 0, 4, 0),
        });
        header.Children.Add(new TextBlock
        {
            Text = $"작업 {steps.Count}개 · 0 완료",
-            FontSize = 10.25, FontWeight = FontWeights.SemiBold,
+            FontSize = 9.5, FontWeight = FontWeights.SemiBold,
            Foreground = secondaryText,
            VerticalAlignment = VerticalAlignment.Center,
        });
@@ -9460,7 +9460,7 @@ public partial class ChatWindow : Window
            Minimum = 0,
            Maximum = steps.Count,
            Value = 0,
-            Height = 4,
+            Height = 3,
            Foreground = accentBrush,
            Background = TryFindResource("HintBackground") as Brush ?? BrushFromHex("#E5E7EB"),
            VerticalAlignment = VerticalAlignment.Center,
@@ -9473,9 +9473,9 @@ public partial class ChatWindow : Window
        _planProgressText = new TextBlock
        {
            Text = "0%",
-            FontSize = 9.25, FontWeight = FontWeights.SemiBold,
+            FontSize = 8.5, FontWeight = FontWeights.SemiBold,
            Foreground = secondaryText,
-            Margin = new Thickness(6, 0, 0, 0),
+            Margin = new Thickness(5, 0, 0, 0),
            VerticalAlignment = VerticalAlignment.Center,
        };
        Grid.SetColumn(_planProgressText, 1);
@@ -9489,26 +9489,26 @@ public partial class ChatWindow : Window
            var stepRow = new StackPanel
            {
                Orientation = Orientation.Horizontal,
-                Margin = new Thickness(0, 1, 0, 1),
+                Margin = new Thickness(0, 1, 0, 0),
                Tag = i, // 인덱스 저장
            };

            stepRow.Children.Add(new TextBlock
            {
                Text = "○", // 빈 원 (미완료)
-                FontSize = 10,
+                FontSize = 9,
                Foreground = secondaryText,
                VerticalAlignment = VerticalAlignment.Center,
-                Margin = new Thickness(0, 0, 5, 0),
+                Margin = new Thickness(0, 0, 4, 0),
                Tag = "status",
            });
            stepRow.Children.Add(new TextBlock
            {
                Text = $"{i + 1}. {steps[i]}",
-                FontSize = 10,
+                FontSize = 9.5,
                Foreground = primaryText,
                TextWrapping = TextWrapping.Wrap,
-                MaxWidth = Math.Max(320, GetMessageMaxWidth() - 60),
+                MaxWidth = Math.Max(320, GetMessageMaxWidth() - 52),
                VerticalAlignment = VerticalAlignment.Center,
            });

@@ -10996,14 +10996,14 @@ public partial class ChatWindow : Window

        // claw-code처럼 메시지 축과 입력축이 같은 중심선을 공유하도록,
        // 본문 폭 상한을 조금 더 낮추고 창 폭 변화에 더 부드럽게 반응시킵니다.
-        var contentWidth = Math.Max(340, viewportWidth - 28);
-        var messageWidth = Math.Clamp(contentWidth * 0.88, 340, 880);
-        var composerWidth = Math.Clamp(contentWidth * 0.82, 340, 820);
+        var contentWidth = Math.Max(360, viewportWidth - 24);
+        var messageWidth = Math.Clamp(contentWidth * 0.9, 360, 960);
+        var composerWidth = Math.Clamp(contentWidth * 0.86, 360, 900);

        if (contentWidth < 760)
        {
-            messageWidth = Math.Clamp(contentWidth - 8, 332, 780);
-            composerWidth = Math.Clamp(contentWidth - 14, 328, 740);
+            messageWidth = Math.Clamp(contentWidth - 10, 344, 820);
+            composerWidth = Math.Clamp(contentWidth - 14, 340, 780);
        }

        var changed = false;