fix(chat): replace NativeElement escape hatch with FunctionalUI ComboBox primitive (supersedes #973) (#991)

* fix(chat): keep session picker stable during renders

* fix(chat): stabilize native session picker host

Keep the session picker ComboBox attached as a declarative native child across FunctionalUI renders, and harden native control lifecycle handling for mount, ownership, and event routing.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* fix(ui): clean up native controls across render paths

* refactor(chat): replace NativeElement escape hatch with FunctionalUI ComboBox primitive

The #970 fix originally reached around FunctionalUI with a raw NativeElement
snapshot to keep the session picker open across status re-renders. Promote that
into a first-class rich ComboBox primitive so re-render stability is a framework
guarantee, not a per-call escape hatch.

- Add ComboItem + ItemComboBoxElement with static ItemsEqual; ConfigureItemComboBox
  only rebuilds items when the list actually changes, preserving an open flyout.
- Migrate both the session picker and the model picker (which had the same
  unfixed #970-class bug) onto the primitive.
- Remove NativeElement and its tests entirely.
- Add pure ItemComboBoxTests and source-contract ComposerSessionPickerTests
  guarding against escape-hatch regressions.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: arturict <arturict@users.noreply.github.com>
Co-authored-by: bakudies@microsoft.com <bakudies@microsoft.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Author: 4 people

src/OpenClaw.Tray.WinUI/Chat/ChannelGroup.cs

@@ -0,0 +1,3 @@
+namespace OpenClawTray.Chat;
+
+public record ChannelGroup(string AgentLabel, (string Id, string Title)[] Sessions);

src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs

@@ -38,8 +38,6 @@ namespace OpenClawTray.Chat;
 /// banner that <c>InputBar</c> used to render are preserved here above the
 /// composer.
 /// </summary>
-public record ChannelGroup(string AgentLabel, (string Id, string Title)[] Sessions);
-
 public record OpenClawComposerProps(
     string ConnectionState,
     bool TurnActive,
@@ -93,6 +91,9 @@ public sealed class OpenClawComposer : Component<OpenClawComposerProps>
     // model id string. Selecting it routes to OnModelCleared (tri-state clear)
     // rather than OnModelChanged.
     private static readonly object ClearModelTag = new();
+    // Reserved id used to represent the "default / clear" model row in the rich ComboBox
+    // primitive (which keys selection by string id). Cannot collide with a real SelectionId.
+    private const string ClearModelId = "\u0000__default__";
 
     // Thinking levels matching the gateway's sessions.patch thinkingLevel values.
     // "medium" is the default when the session has no explicit thinkingLevel set.
@@ -246,69 +247,35 @@ public override Element Render()
         };
 
         // ── Row 1: three compact dropdowns ─────────────────────────────
-        // Build grouped session ComboBox directly (bypassing the FunctionalUI
-        // ComboBox helper which only supports flat string[] items).
+        // Grouped session picker via the reconciled rich ComboBox primitive. The primitive is
+        // preserved by render path and only rebuilds its rows when the item set changes, so an
+        // open dropdown survives unrelated status/thinking re-renders (the #970 regression).
         var groups = Props.AvailableChannels;
-        var channelCombo = Border()
-            .Set(border =>
+        var multipleGroups = groups.Length > 1;
+        var sessionItems = new List<ComboItem>();
+        foreach (var group in groups)
+        {
+            if (multipleGroups)
+                sessionItems.Add(new ComboItem("", group.AgentLabel, Enabled: false, IsHeader: true));
+            foreach (var session in group.Sessions)
+                sessionItems.Add(new ComboItem(session.Id, session.Title, Indent: multipleGroups ? 8 : 0));
+        }
+
+        var onChannelChanged = Props.OnChannelChanged;
+        var channelCombo = ComboBox(sessionItems, Props.ChannelId ?? "", id => onChannelChanged(id))
+            .Set(cb =>
             {
-                var cb = new ComboBox
-                {
-                    MinWidth = 0,
-                    Width = double.NaN,
-                    Height = 28,
-                    FontSize = 11,
-                    Padding = new Thickness(8, 0, 4, 0),
-                    CornerRadius = composerCornerRadius,
-                    HorizontalAlignment = HorizontalAlignment.Stretch,
-                    VerticalAlignment = VerticalAlignment.Center,
-                };
+                cb.MinWidth = 0;
+                cb.Width = double.NaN;
+                cb.Height = 28;
+                cb.FontSize = 11;
+                cb.Padding = new Thickness(8, 0, 4, 0);
+                cb.CornerRadius = composerCornerRadius;
+                cb.HorizontalAlignment = HorizontalAlignment.Stretch;
+                cb.VerticalAlignment = VerticalAlignment.Center;
                 Microsoft.UI.Xaml.Automation.AutomationProperties.SetName(
                     cb,
                     LocalizationHelper.GetString("Chat_Composer_Accessibility_Session"));
-
-                ComboBoxItem? selectedItem = null;
-                foreach (var group in groups)
-                {
-                    if (groups.Length > 1)
-                    {
-                        cb.Items.Add(new ComboBoxItem
-                        {
-                            Content = group.AgentLabel,
-                            IsEnabled = false,
-                            FontWeight = Microsoft.UI.Text.FontWeights.SemiBold,
-                            FontSize = 10,
-                            Padding = new Thickness(4, 2, 4, 2),
-                            IsHitTestVisible = false,
-                        });
-                    }
-                    foreach (var session in group.Sessions)
-                    {
-                        var item = new ComboBoxItem
-                        {
-                            Content = session.Title,
-                            Tag = session.Id,
-                            Padding = groups.Length > 1
-                                ? new Thickness(16, 4, 4, 4)
-                                : new Thickness(8, 4, 4, 4),
-                        };
-                        cb.Items.Add(item);
-                        if (session.Id == (Props.ChannelId ?? ""))
-                            selectedItem = item;
-                    }
-                }
-
-                if (selectedItem != null)
-                    cb.SelectedItem = selectedItem;
-
-                var onChanged = Props.OnChannelChanged;
-                cb.SelectionChanged += (_, _) =>
-                {
-                    if (cb.SelectedItem is ComboBoxItem { Tag: string id })
-                        onChanged(id);
-                };
-
-                border.Child = cb;
             });
 
         // ── Model picker (provider-rich) ─────────────────────────────────
@@ -357,58 +324,42 @@ public override Element Render()
             modelEntries.Add((Props.CurrentModel ?? "model", Props.CurrentModel ?? "", false, true));
         }
 
-        var modelSelectedIndex = modelEntries.FindIndex(e => e.IsCurrent);
+        // Provider-rich model picker via the same reconciled primitive. Unavailable rows stay
+        // visible but disabled; the default/clear row maps to a reserved id.
+        var modelItems = new List<ComboItem>(modelEntries.Count);
+        string? modelSelectedId = null;
+        foreach (var entry in modelEntries)
+        {
+            var id = ReferenceEquals(entry.Tag, ClearModelTag)
+                ? ClearModelId
+                : entry.Tag as string ?? "";
+            modelItems.Add(new ComboItem(id, entry.Label, Enabled: entry.Selectable));
+            if (entry.IsCurrent) modelSelectedId ??= id;
+        }
 
-        // Build directly so unavailable rows can be displayed but not selected.
-        var modelCombo = Border()
-            .Set(border =>
+        var onModelChanged = Props.OnModelChanged;
+        var onModelCleared = Props.OnModelCleared;
+        var modelCombo = ComboBox(modelItems, modelSelectedId, id =>
             {
-                var cb = new ComboBox
-                {
-                    MinWidth = 0,
-                    Width = double.NaN,
-                    Height = 28,
-                    FontSize = 11,
-                    Padding = new Thickness(8, 0, 4, 0),
-                    CornerRadius = composerCornerRadius,
-                    HorizontalAlignment = HorizontalAlignment.Stretch,
-                    VerticalAlignment = VerticalAlignment.Center,
-                    IsEnabled = messageOptionControlsEnabled,
-                };
+                if (id == ClearModelId)
+                    onModelCleared?.Invoke();
+                else if (!string.IsNullOrEmpty(id))
+                    onModelChanged(id);
+            })
+            .Set(cb =>
+            {
+                cb.MinWidth = 0;
+                cb.Width = double.NaN;
+                cb.Height = 28;
+                cb.FontSize = 11;
+                cb.Padding = new Thickness(8, 0, 4, 0);
+                cb.CornerRadius = composerCornerRadius;
+                cb.HorizontalAlignment = HorizontalAlignment.Stretch;
+                cb.VerticalAlignment = VerticalAlignment.Center;
+                cb.IsEnabled = messageOptionControlsEnabled;
                 Microsoft.UI.Xaml.Automation.AutomationProperties.SetName(
                     cb,
                     LocalizationHelper.GetString("Chat_Composer_Accessibility_Model"));
-
-                ComboBoxItem? selectedItem = null;
-                for (int i = 0; i < modelEntries.Count; i++)
-                {
-                    var entry = modelEntries[i];
-                    var item = new ComboBoxItem
-                    {
-                        Content = entry.Label,
-                        Tag = entry.Tag,
-                        IsEnabled = entry.Selectable,
-                        Padding = new Thickness(8, 4, 4, 4),
-                    };
-                    cb.Items.Add(item);
-                    if (i == modelSelectedIndex) selectedItem = item;
-                }
-
-                if (selectedItem != null)
-                    cb.SelectedItem = selectedItem;
-
-                var onModelChanged = Props.OnModelChanged;
-                var onModelCleared = Props.OnModelCleared;
-                cb.SelectionChanged += (_, _) =>
-                {
-                    if (cb.SelectedItem is not ComboBoxItem { IsEnabled: true } sel) return;
-                    if (ReferenceEquals(sel.Tag, ClearModelTag))
-                        onModelCleared?.Invoke();
-                    else if (sel.Tag is string id && !string.IsNullOrEmpty(id))
-                        onModelChanged(id);
-                };
-
-                border.Child = cb;
             })
             .VAlign(VerticalAlignment.Center);
 

src/OpenClawTray.FunctionalUI/FunctionalUI.cs

@@ -199,6 +199,30 @@ public sealed record ProgressRingElement(double? Value) : Element;
 public sealed record SliderElement(double Value, double Minimum, double Maximum, Action<double>? OnChanged) : Element;
 public sealed record ColorPickerElement(Color Value, Action<Color>? OnChanged) : Element;
 public sealed record ComboBoxElement(string[] Items, int SelectedIndex, Action<int>? OnSelectionChanged) : Element;
+/// <summary>
+/// A single row for the rich <see cref="ItemComboBoxElement"/> primitive. Pure data (no WinUI
+/// types) so it can be constructed and diffed off the UI thread and unit-tested directly.
+/// Headers render as non-selectable group labels; normal rows carry a stable <paramref name="Id"/>.
+/// </summary>
+public sealed record ComboItem(string Id, string Label, bool Enabled = true, bool IsHeader = false, double Indent = 0);
+/// <summary>
+/// A reconciled ComboBox that supports grouped/headered, indented, individually-enabled rows and
+/// selection by stable id. Unlike hand-rolling a native <c>ComboBox</c> inside a setter, this
+/// element is preserved by render path and only rebuilds its rows when the item set actually
+/// changes, so an open dropdown survives unrelated re-renders (the #970 regression).
+/// </summary>
+public sealed record ItemComboBoxElement(IReadOnlyList<ComboItem> Items, string? SelectedId, Action<string>? OnSelectionChanged) : Element
+{
+    /// <summary>Pure, order-sensitive value comparison of two item lists. Testable off the UI thread.</summary>
+    public static bool ItemsEqual(IReadOnlyList<ComboItem> left, IReadOnlyList<ComboItem> right)
+    {
+        if (ReferenceEquals(left, right)) return true;
+        if (left is null || right is null || left.Count != right.Count) return false;
+        for (var i = 0; i < left.Count; i++)
+            if (left[i] != right[i]) return false;
+        return true;
+    }
+}
 public sealed record ImageElement(string Source) : Element;
 public sealed record BorderElement(Element? Child) : Element;
 public sealed record StackElement(Orientation Orientation, double Spacing, IReadOnlyList<Element?> Children) : Element;
@@ -591,6 +615,8 @@ public static ColorPickerElement ColorPicker(Color value, Action<Color>? onChang
         new(value, onChanged);
     public static ComboBoxElement ComboBox(string[] items, int selectedIndex = -1, Action<int>? onSelectionChanged = null) =>
         new(items, selectedIndex, onSelectionChanged);
+    public static ItemComboBoxElement ComboBox(IReadOnlyList<ComboItem> items, string? selectedId = null, Action<string>? onSelectionChanged = null) =>
+        new(items, selectedId, onSelectionChanged);
     public static ImageElement Image(string source) => new(source);
     public static BorderElement Border(Element? child = null) => new(child);
     public static FlexRowElement FlexRow(params Element?[] children) => new(children);
@@ -754,6 +780,7 @@ public static TextBlockElement SemiBold(this TextBlockElement element) =>
     public static SliderElement Set(this SliderElement element, Action<Slider> setter) => element.AddSetter(setter);
     public static ColorPickerElement Set(this ColorPickerElement element, Action<ColorPicker> setter) => element.AddSetter(setter);
     public static ComboBoxElement Set(this ComboBoxElement element, Action<ComboBox> setter) => element.AddSetter(setter);
+    public static ItemComboBoxElement Set(this ItemComboBoxElement element, Action<ComboBox> setter) => element.AddSetter(setter);
     public static ImageElement Set(this ImageElement element, Action<Image> setter) => element.AddSetter(setter);
     public static BorderElement Set(this BorderElement element, Action<Border> setter) => element.AddSetter(setter);
     public static ProgressRingElement Set(this ProgressRingElement element, Action<ProgressRing> setter) => element.AddSetter(setter);
@@ -975,6 +1002,7 @@ private UIElement RenderElementCore(Element element, string path, List<Action> e
             SliderElement e => ConfigureSlider(GetOrCreate<Slider>(path), e),
             ColorPickerElement e => ConfigureColorPicker(GetOrCreate<ColorPicker>(path), e),
             ComboBoxElement e => ConfigureComboBox(GetOrCreate<ComboBox>(path), e),
+            ItemComboBoxElement e => ConfigureItemComboBox(GetOrCreate<ComboBox>(path), e),
             ImageElement e => ConfigureImage(GetOrCreate<Image>(path), e),
             BorderElement e => ConfigureBorder(GetOrCreate<Border>(path), e, path, effects),
             StackElement e => ConfigureStack(GetOrCreate<Border>(path), e, path, effects),
@@ -1262,6 +1290,68 @@ private ComboBox ConfigureComboBox(ComboBox control, ComboBoxElement element)
         return control;
     }
 
+    private ComboBox ConfigureItemComboBox(ComboBox control, ItemComboBoxElement element)
+    {
+        control.SelectionChanged -= ItemComboBoxSelectionChanged;
+        var previous = control.Tag as ItemComboBoxElement;
+        control.Tag = element;
+
+        // Rebuild the row containers only when the item set actually changes. Rebuilding on every
+        // render would dismiss an open dropdown, which is the #970 session-picker regression.
+        if (previous is null || !ItemComboBoxElement.ItemsEqual(previous.Items, element.Items))
+        {
+            control.Items.Clear();
+            foreach (var item in element.Items)
+                control.Items.Add(CreateComboBoxItem(item));
+        }
+
+        // Reconcile selection by stable id every render (a status re-render must not change it).
+        ComboBoxItem? target = null;
+        if (element.SelectedId is { } selectedId)
+        {
+            foreach (var candidate in control.Items)
+            {
+                if (candidate is ComboBoxItem { Tag: string id } container && id == selectedId)
+                {
+                    target = container;
+                    break;
+                }
+            }
+        }
+        if (!ReferenceEquals(control.SelectedItem, target))
+            control.SelectedItem = target;
+
+        // Reattach only after programmatic mutations so those don't fire the user callback.
+        control.SelectionChanged += ItemComboBoxSelectionChanged;
+        ApplyModifiers(control, element);
+        ApplySetters(control, element);
+        return control;
+    }
+
+    private static ComboBoxItem CreateComboBoxItem(ComboItem item)
+    {
+        if (item.IsHeader)
+        {
+            return new ComboBoxItem
+            {
+                Content = item.Label,
+                IsEnabled = false,
+                IsHitTestVisible = false,
+                FontWeight = Microsoft.UI.Text.FontWeights.SemiBold,
+                FontSize = 10,
+                Padding = new Thickness(4, 2, 4, 2),
+            };
+        }
+
+        return new ComboBoxItem
+        {
+            Content = item.Label,
+            Tag = item.Id,
+            IsEnabled = item.Enabled,
+            Padding = new Thickness(8 + item.Indent, 4, 4, 4),
+        };
+    }
+
     private Image ConfigureImage(Image control, ImageElement element)
     {
         var sourceUri = new Uri(element.Source);
@@ -2103,6 +2193,12 @@ private static void ComboBoxSelectionChanged(object sender, SelectionChangedEven
             element.OnSelectionChanged?.Invoke(combo.SelectedIndex);
     }
 
+    private static void ItemComboBoxSelectionChanged(object sender, SelectionChangedEventArgs e)
+    {
+        if (sender is ComboBox { Tag: ItemComboBoxElement element, SelectedItem: ComboBoxItem { Tag: string id } })
+            element.OnSelectionChanged?.Invoke(id);
+    }
+
     private static void MenuFlyoutItemClick(object sender, RoutedEventArgs e)
     {
         if (sender is MenuFlyoutItem { Tag: MenuFlyoutItemData data })

tests/OpenClaw.Tray.Tests/ComposerSessionPickerTests.cs

@@ -0,0 +1,46 @@
+namespace OpenClaw.Tray.Tests;
+
+/// <summary>
+/// Source-contract guards for the composer pickers. These assert the composer builds its session
+/// and model dropdowns through the reconciled FunctionalUI ComboBox primitive rather than
+/// hand-rolling a native <c>ComboBox</c> inside a setter — the imperative escape hatch that caused
+/// the #970 "dropdown slams shut on status render" regression.
+/// </summary>
+public sealed class ComposerSessionPickerTests
+{
+    private static string ComposerSource() => File.ReadAllText(Path.Combine(
+        TestRepositoryPaths.GetRepositoryRoot(),
+        "src",
+        "OpenClaw.Tray.WinUI",
+        "Chat",
+        "OpenClawComposer.cs"));
+
+    [Fact]
+    public void SessionPicker_UsesReconciledItemComboBoxPrimitive()
+    {
+        var composer = ComposerSource();
+
+        Assert.Contains("var sessionItems = new List<ComboItem>();", composer);
+        Assert.Contains("ComboBox(sessionItems, Props.ChannelId ?? \"\"", composer);
+    }
+
+    [Fact]
+    public void ModelPicker_UsesReconciledItemComboBoxPrimitive()
+    {
+        var composer = ComposerSource();
+
+        Assert.Contains("ComboBox(modelItems, modelSelectedId", composer);
+        Assert.Contains("if (id == ClearModelId)", composer);
+    }
+
+    [Fact]
+    public void Composer_DoesNotHandRollNativePickersOrSnapshots()
+    {
+        var composer = ComposerSource();
+
+        // The escape-hatch patterns that produced #970 must not return.
+        Assert.DoesNotContain("border.Child = cb;", composer);
+        Assert.DoesNotContain("SessionPickerSnapshot", composer);
+        Assert.DoesNotContain("Native(", composer);
+    }
+}

tests/OpenClaw.Tray.Tests/OpenClaw.Tray.Tests.csproj

@@ -37,6 +37,7 @@
     <Compile Include="..\..\src\OpenClaw.Tray.WinUI\Chat\DebugChatSurfaceOverrides.cs" Link="Chat\DebugChatSurfaceOverrides.cs" />
     <Compile Include="..\..\src\OpenClaw.Tray.WinUI\Chat\ChatEntryMetadata.cs" Link="Chat\ChatEntryMetadata.cs" />
     <Compile Include="..\..\src\OpenClaw.Tray.WinUI\Chat\ChatUsageFormatter.cs" Link="Chat\ChatUsageFormatter.cs" />
+    <Compile Include="..\..\src\OpenClaw.Tray.WinUI\Chat\ChannelGroup.cs" Link="Chat\ChannelGroup.cs" />
     <Compile Include="..\..\src\OpenClaw.Tray.WinUI\Chat\ChatMarkdownSanitizer.cs" Link="Chat\ChatMarkdownSanitizer.cs" />
     <Compile Include="..\..\src\OpenClaw.Tray.WinUI\Chat\OpenClawChatDataProvider.cs" Link="Chat\OpenClawChatDataProvider.cs" />
   </ItemGroup>