Only badge the lobster for attention states (disconnected, error)

Per group feedback a constant green connected dot is distracting. The tray
and desktop icons now show a status badge only for attention states:

- disconnected / neutral -> grey dot
- error -> red dot with a white minus (-) glyph

Connected and connecting render the plain lobster with no badge.

- StatusBadgeIconFactory.ShouldBadge()/HasDash() encode the policy; Compose
  takes a nullable dot colour (null = plain lobster) and an optional dash.
- Update StatusBadgeIconFactoryTests for the new policy and dash rendering.

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

Author: karkarl

src/OpenClaw.Tray.WinUI/Helpers/StatusBadgeIconFactory.cs

@@ -11,10 +11,16 @@
 namespace OpenClawTray.Helpers;
 
 /// <summary>
-/// Builds application icons that mirror the companion-app connection status dot:
-/// the lobster mascot with a coloured status dot rendered in the bottom-right
-/// corner. Composed icons are cached per <see cref="ConnectionStatusAccent"/> and
-/// written to a temp folder as multi-resolution .ico files so both the tray icon
+/// Builds application icons that surface the connection status on the lobster
+/// mascot as a small badge in the bottom-right corner. To avoid a distracting
+/// always-on indicator, only attention states are badged:
+/// <list type="bullet">
+///   <item>disconnected / neutral → a grey dot,</item>
+///   <item>error → a red dot with a white "-" (minus) glyph.</item>
+/// </list>
+/// Healthy states (connected, connecting) render the plain lobster with no badge.
+/// Composed icons are cached per <see cref="ConnectionStatusAccent"/> and written
+/// to a temp folder as multi-resolution .ico files so both the tray icon
 /// (<see cref="WinUIEx.TrayIcon.SetIcon(string)"/>) and the desktop/taskbar window
 /// icon (<c>Window.SetIcon(string)</c>) can consume them.
 /// </summary>
@@ -64,6 +70,18 @@ public static string GetBadgedIconPath(ConnectionStatusAccent accent)
         _ => Color.FromArgb(158, 158, 158),                              // Gray   – disconnected / neutral
     };
 
+    /// <summary>
+    /// Whether <paramref name="accent"/> gets a status badge. Only attention states
+    /// are badged so the icon is quiet when everything is healthy: disconnected
+    /// (neutral) and error (critical). Connected/connecting render the plain lobster.
+    /// </summary>
+    public static bool ShouldBadge(ConnectionStatusAccent accent) =>
+        accent is ConnectionStatusAccent.Neutral or ConnectionStatusAccent.Critical;
+
+    /// <summary>Whether the badge carries the "-" (minus) glyph. Only the error state does.</summary>
+    public static bool HasDash(ConnectionStatusAccent accent) =>
+        accent is ConnectionStatusAccent.Critical;
+
     private static (string Path, bool IsFallback) Build(ConnectionStatusAccent accent)
     {
         var fallback = Path.Combine(AssetsPath, "openclaw.ico");
@@ -72,8 +90,12 @@ private static (string Path, bool IsFallback) Build(ConnectionStatusAccent accen
             Directory.CreateDirectory(OutputDir);
             var outputPath = Path.Combine(OutputDir, $"openclaw-{accent}".ToLowerInvariant() + ".ico");
 
+            // Only attention states (neutral/critical) get a dot; healthy states
+            // render the plain lobster (null dot colour).
+            Color? dotColor = ShouldBadge(accent) ? DotColor(accent) : null;
+
             using var baseImage = LoadBaseImage();
-            File.WriteAllBytes(outputPath, CreateIcoBytes(baseImage, DotColor(accent), Sizes));
+            File.WriteAllBytes(outputPath, CreateIcoBytes(baseImage, dotColor, HasDash(accent), Sizes));
             return (outputPath, false);
         }
         catch (Exception ex)
@@ -84,15 +106,16 @@ private static (string Path, bool IsFallback) Build(ConnectionStatusAccent accen
     }
 
     /// <summary>
-    /// Composes the badged lobster at every requested size and packs the frames
-    /// into a single multi-resolution .ico byte array. Exposed for testing.
+    /// Composes the (optionally badged) lobster at every requested size and packs
+    /// the frames into a single multi-resolution .ico byte array. A null
+    /// <paramref name="dotColor"/> renders the plain lobster. Exposed for testing.
     /// </summary>
-    internal static byte[] CreateIcoBytes(Bitmap baseImage, Color dotColor, IReadOnlyList<int> sizes)
+    internal static byte[] CreateIcoBytes(Bitmap baseImage, Color? dotColor, bool withDash, IReadOnlyList<int> sizes)
     {
         var frames = new List<byte[]>(sizes.Count);
         foreach (var size in sizes)
         {
-            using var composed = Compose(baseImage, size, dotColor);
+            using var composed = Compose(baseImage, size, dotColor, withDash);
             using var ms = new MemoryStream();
             composed.Save(ms, ImageFormat.Png);
             frames.Add(ms.ToArray());
@@ -139,7 +162,7 @@ internal static double DotFraction(int size)
         return maxFraction + (t * (minFraction - maxFraction));
     }
 
-    internal static Bitmap Compose(Bitmap baseImage, int size, Color dotColor)
+    internal static Bitmap Compose(Bitmap baseImage, int size, Color? dotColor, bool withDash = false)
     {
         var bmp = new Bitmap(size, size, PixelFormat.Format32bppArgb);
         bmp.SetResolution(96, 96);
@@ -153,6 +176,10 @@ internal static Bitmap Compose(Bitmap baseImage, int size, Color dotColor)
 
         g.DrawImage(baseImage, new Rectangle(0, 0, size, size));
 
+        // No badge for healthy states: render the plain lobster.
+        if (dotColor is not Color color)
+            return bmp;
+
         // Dot geometry: bottom-right corner with a white ring for contrast against
         // both the red mascot and arbitrary taskbar backgrounds. The dot scales by
         // size so it is legible on tiny tray icons yet subtle on large icons; the
@@ -167,9 +194,20 @@ internal static Bitmap Compose(Bitmap baseImage, int size, Color dotColor)
         using (var ringBrush = new SolidBrush(Color.White))
             g.FillEllipse(ringBrush, outerX, outerY, outer, outer);
 
-        using (var dotBrush = new SolidBrush(dotColor))
+        using (var dotBrush = new SolidBrush(color))
             g.FillEllipse(dotBrush, outerX + ring, outerY + ring, dot, dot);
 
+        // Error badge carries a white "-" (minus) glyph centred on the dot.
+        if (withDash)
+        {
+            float cx = outerX + ring + (dot / 2f);
+            float cy = outerY + ring + (dot / 2f);
+            float dashW = dot * 0.52f;
+            float dashH = Math.Max(2f, dot * 0.18f);
+            using var dashBrush = new SolidBrush(Color.White);
+            g.FillRectangle(dashBrush, cx - (dashW / 2f), cy - (dashH / 2f), dashW, dashH);
+        }
+
         return bmp;
     }
 

tests/OpenClaw.Tray.Tests/StatusBadgeIconFactoryTests.cs

@@ -1,5 +1,6 @@
 using OpenClawTray.Helpers;
 using OpenClawTray.Services;
+using System;
 using System.Drawing;
 using System.Drawing.Imaging;
 using System.IO;
@@ -9,8 +10,9 @@
 namespace OpenClaw.Tray.Tests;
 
 /// <summary>
-/// Verifies the lobster tray/desktop icon is composed with a status dot in the
-/// bottom-right corner, mirroring the companion-app connection status.
+/// Verifies the lobster tray/desktop icon badge policy: only attention states are
+/// badged (grey dot for disconnected, red dot with a "-" for error); healthy
+/// states (connected/connecting) render the plain lobster with no badge.
 /// </summary>
 [SupportedOSPlatform("windows")]
 public sealed class StatusBadgeIconFactoryTests
@@ -26,6 +28,26 @@ public void DotColor_MapsAccentToStatusColor(int accent, int r, int g, int b)
         Assert.Equal(Color.FromArgb(r, g, b), color);
     }
 
+    [Theory]
+    [InlineData((int)ConnectionStatusAccent.Neutral, true)]
+    [InlineData((int)ConnectionStatusAccent.Critical, true)]
+    [InlineData((int)ConnectionStatusAccent.Success, false)]
+    [InlineData((int)ConnectionStatusAccent.Caution, false)]
+    public void ShouldBadge_OnlyNeutralAndCritical(int accent, bool expected)
+    {
+        Assert.Equal(expected, StatusBadgeIconFactory.ShouldBadge((ConnectionStatusAccent)accent));
+    }
+
+    [Theory]
+    [InlineData((int)ConnectionStatusAccent.Critical, true)]
+    [InlineData((int)ConnectionStatusAccent.Neutral, false)]
+    [InlineData((int)ConnectionStatusAccent.Success, false)]
+    [InlineData((int)ConnectionStatusAccent.Caution, false)]
+    public void HasDash_OnlyCritical(int accent, bool expected)
+    {
+        Assert.Equal(expected, StatusBadgeIconFactory.HasDash((ConnectionStatusAccent)accent));
+    }
+
     [Fact]
     public void Compose_DrawsDotInBottomRightCorner()
     {
@@ -34,33 +56,49 @@ public void Compose_DrawsDotInBottomRightCorner()
         // Fully transparent base so the only opaque pixels come from the dot.
 
         using var composed = StatusBadgeIconFactory.Compose(
-            baseImage, size, StatusBadgeIconFactory.DotColor(ConnectionStatusAccent.Success));
+            baseImage, size, StatusBadgeIconFactory.DotColor(ConnectionStatusAccent.Neutral));
 
-        // Bottom-right region carries the coloured dot.
+        // Bottom-right region carries the dot.
         var dotPixel = composed.GetPixel((int)(size * 0.80), (int)(size * 0.80));
         Assert.True(dotPixel.A > 200, "Dot should be opaque in the bottom-right corner");
-        Assert.True(dotPixel.G > dotPixel.R && dotPixel.G > dotPixel.B, "Success dot should read green");
 
         // Top-left stays transparent (no badge, base was empty).
         var cornerPixel = composed.GetPixel(2, 2);
         Assert.True(cornerPixel.A < 40, "Top-left corner should remain transparent");
     }
 
     [Fact]
-    public void DotFraction_ScalesLargerOnTinyIconsAndSubtlerOnLargeIcons()
+    public void Compose_NullColor_RendersPlainLobsterWithNoBadge()
     {
-        // Tiny tray icons get the largest dot for legibility.
-        Assert.Equal(0.44, StatusBadgeIconFactory.DotFraction(16), 3);
-        Assert.Equal(0.44, StatusBadgeIconFactory.DotFraction(32), 3);
+        const int size = 64;
+        using var baseImage = new Bitmap(size, size, PixelFormat.Format32bppArgb);
+        // Transparent base + null dot colour => the whole icon stays transparent.
 
-        // Large taskbar / alt-tab icons get the subtlest dot.
-        Assert.Equal(0.26, StatusBadgeIconFactory.DotFraction(256), 3);
+        using var composed = StatusBadgeIconFactory.Compose(baseImage, size, dotColor: null);
 
-        // Monotonically shrinks as the icon grows between the two extremes.
-        var f48 = StatusBadgeIconFactory.DotFraction(48);
-        var f128 = StatusBadgeIconFactory.DotFraction(128);
-        Assert.True(f48 < 0.44 && f48 > f128, "48px dot fraction sits between the extremes");
-        Assert.True(f128 > 0.26 && f128 < f48, "128px dot fraction is subtler than 48px but above the floor");
+        var dotPixel = composed.GetPixel((int)(size * 0.80), (int)(size * 0.80));
+        Assert.True(dotPixel.A < 40, "Healthy state should render no dot in the bottom-right corner");
+    }
+
+    [Fact]
+    public void Compose_ErrorState_DrawsRedDotWithWhiteDash()
+    {
+        const int size = 64;
+        using var baseImage = new Bitmap(size, size, PixelFormat.Format32bppArgb);
+
+        using var composed = StatusBadgeIconFactory.Compose(
+            baseImage, size, StatusBadgeIconFactory.DotColor(ConnectionStatusAccent.Critical), withDash: true);
+
+        var (cx, cy, dot) = DotCenter(size);
+
+        // Centre of the dot is covered by the white minus glyph.
+        var centre = composed.GetPixel((int)cx, (int)cy);
+        Assert.True(centre.R > 230 && centre.G > 230 && centre.B > 230, "Dash centre should be white");
+
+        // Below the dash (still inside the dot) reads red.
+        var belowDash = composed.GetPixel((int)cx, (int)(cy + dot * 0.30f));
+        Assert.True(belowDash.A > 200 && belowDash.R > belowDash.G && belowDash.R > belowDash.B,
+            "Dot around the dash should read red");
     }
 
     [Fact]
@@ -70,13 +108,30 @@ public void Compose_UsesDistinctColorPerAccent()
         using var baseImage = new Bitmap(size, size, PixelFormat.Format32bppArgb);
         var px = (int)(size * 0.80);
 
-        using var success = StatusBadgeIconFactory.Compose(baseImage, size, StatusBadgeIconFactory.DotColor(ConnectionStatusAccent.Success));
+        using var neutral = StatusBadgeIconFactory.Compose(baseImage, size, StatusBadgeIconFactory.DotColor(ConnectionStatusAccent.Neutral));
         using var critical = StatusBadgeIconFactory.Compose(baseImage, size, StatusBadgeIconFactory.DotColor(ConnectionStatusAccent.Critical));
 
-        var green = success.GetPixel(px, px);
+        var gray = neutral.GetPixel(px, px);
         var red = critical.GetPixel(px, px);
-        Assert.True(green.G > green.R, "Success dot is green-dominant");
-        Assert.True(red.R > red.G, "Critical dot is red-dominant");
+        Assert.True(Math.Abs(gray.R - gray.G) < 20 && Math.Abs(gray.G - gray.B) < 20, "Neutral dot is grey");
+        Assert.True(red.R > red.G && red.R > red.B, "Critical dot is red-dominant");
+    }
+
+    [Fact]
+    public void DotFraction_ScalesLargerOnTinyIconsAndSubtlerOnLargeIcons()
+    {
+        // Tiny tray icons get the largest dot for legibility.
+        Assert.Equal(0.44, StatusBadgeIconFactory.DotFraction(16), 3);
+        Assert.Equal(0.44, StatusBadgeIconFactory.DotFraction(32), 3);
+
+        // Large taskbar / alt-tab icons get the subtlest dot.
+        Assert.Equal(0.26, StatusBadgeIconFactory.DotFraction(256), 3);
+
+        // Monotonically shrinks as the icon grows between the two extremes.
+        var f48 = StatusBadgeIconFactory.DotFraction(48);
+        var f128 = StatusBadgeIconFactory.DotFraction(128);
+        Assert.True(f48 < 0.44 && f48 > f128, "48px dot fraction sits between the extremes");
+        Assert.True(f128 > 0.26 && f128 < f48, "128px dot fraction is subtler than 48px but above the floor");
     }
 
     [Fact]
@@ -86,7 +141,7 @@ public void CreateIcoBytes_ProducesValidMultiSizeIcon()
         using var baseImage = new Bitmap(256, 256, PixelFormat.Format32bppArgb);
 
         var bytes = StatusBadgeIconFactory.CreateIcoBytes(
-            baseImage, StatusBadgeIconFactory.DotColor(ConnectionStatusAccent.Caution), sizes);
+            baseImage, StatusBadgeIconFactory.DotColor(ConnectionStatusAccent.Critical), withDash: true, sizes);
 
         // ICONDIR header: reserved=0, type=1 (icon), count=frames.
         Assert.Equal(0, bytes[0] | bytes[1]);
@@ -100,11 +155,37 @@ public void CreateIcoBytes_ProducesValidMultiSizeIcon()
         Assert.NotNull(icon);
     }
 
+    [Fact]
+    public void CreateIcoBytes_NullColor_ProducesValidPlainIcon()
+    {
+        var sizes = new[] { 16, 32 };
+        using var baseImage = new Bitmap(256, 256, PixelFormat.Format32bppArgb);
+
+        var bytes = StatusBadgeIconFactory.CreateIcoBytes(baseImage, dotColor: null, withDash: false, sizes);
+
+        using var stream = new MemoryStream(bytes);
+        using var icon = new Icon(stream);
+        Assert.NotNull(icon);
+    }
+
     [Fact]
     public void IconSizes_CoverTrayAndTaskbarResolutions()
     {
         Assert.Contains(16, StatusBadgeIconFactory.IconSizes);   // tray at 100% DPI
         Assert.Contains(32, StatusBadgeIconFactory.IconSizes);   // tray at 200% DPI / taskbar
         Assert.Contains(256, StatusBadgeIconFactory.IconSizes);  // high-DPI taskbar
     }
+
+    // Mirrors the dot geometry in StatusBadgeIconFactory.Compose so tests can sample
+    // the dot centre precisely.
+    private static (float Cx, float Cy, float Dot) DotCenter(int size)
+    {
+        float dot = size * (float)StatusBadgeIconFactory.DotFraction(size);
+        float ring = Math.Max(1f, dot * 0.14f);
+        float pad = size * 0.02f;
+        float outer = dot + (ring * 2f);
+        float outerX = size - outer - pad;
+        float outerY = size - outer - pad;
+        return (outerX + ring + (dot / 2f), outerY + ring + (dot / 2f), dot);
+    }
 }