From f148c1ac6b9d43b6a692c0d233dc004c419ee9a9 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Wed, 4 Nov 2026 04:56:21 +0800
Subject: [PATCH] fix(debugger): muted breakpoints show as grey dots, not as
 disabled ones (#1104)

With Mute Breakpoints on (remembered per project), every breakpoint was drawn as a hollow red circle, the disabled look. Muted breakpoints now use the grey muted icon; disabled ones keep the hollow circle. Method breakpoints and field watchpoints follow the same rule.
---
 src/features/debugger/__tests__/editor.test.ts   |  2 ++
 src/features/debugger/editor/breakpointGutter.ts | 10 +++++++---
 src/features/debugger/editor/editor.module.css   | 12 +++++++++++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/features/debugger/__tests__/editor.test.ts b/src/features/debugger/__tests__/editor.test.ts
index c7967b7d5..626bc4eea 100644
--- a/src/features/debugger/__tests__/editor.test.ts
+++ b/src/features/debugger/__tests__/editor.test.ts
@@ -86,6 +86,8 @@ describe("breakpoint look", () => {
     expect(lookOf(b, { verified: true } as never, false, true)).toBe("verified");
     expect(lookOf(b, { verified: false } as never, false, true)).toBe("unverified");
     expect(lookOf({ ...b, enabled: false }, { verified: true } as never, false, true)).toBe("disabled");
+    expect(lookOf(b, { verified: true } as never, true, true)).toBe("muted");
+    expect(lookOf({ ...b, enabled: false }, undefined, true, false)).toBe("disabled");
   });
 });
 
diff --git a/src/features/debugger/editor/breakpointGutter.ts b/src/features/debugger/editor/breakpointGutter.ts
index ada2140ce..704f442f5 100644
--- a/src/features/debugger/editor/breakpointGutter.ts
+++ b/src/features/debugger/editor/breakpointGutter.ts
@@ -35,6 +35,7 @@ import styles from "./editor.module.css";
 export type BreakpointLook =
   | "normal"
   | "disabled"
+  | "muted"
   | "unverified"
   | "verified"
   | "conditional"
@@ -47,7 +48,9 @@ export type BreakpointLook =
   | "fieldVerified";
 
 export function lookOf(b: BreakpointEntry, status: BreakpointStatus | undefined, muted: boolean, running: boolean) {
-  if (!b.enabled || muted) return "disabled";
+  if (!b.enabled) return "disabled";
+  // Mute Breakpoints: IDEA's grey dot, so it isn't taken for a disabled breakpoint.
+  if (muted) return "muted";
   if (running && status && !status.verified) return "unverified";
   if (!suspends(b)) return "log";
   if (isConditional(b)) return "conditional";
@@ -61,7 +64,8 @@ export function specialLook(
   muted: boolean,
   running: boolean,
 ): BreakpointLook {
-  if (!b.enabled || muted) return b.kind === "method" ? "methodDisabled" : "fieldDisabled";
+  if (!b.enabled) return b.kind === "method" ? "methodDisabled" : "fieldDisabled";
+  if (muted) return "muted";
   if (running && status && !status.verified) return "unverified";
   if (running && status?.verified) return b.kind === "method" ? "methodVerified" : "fieldVerified";
   return b.kind;
@@ -81,7 +85,7 @@ class BreakpointMarker extends GutterMarker {
 }
 
 const bpLine = Decoration.line({ class: styles.bpLine });
-const DISABLED_LOOKS = new Set<BreakpointLook>(["disabled", "methodDisabled", "fieldDisabled"]);
+const DISABLED_LOOKS = new Set<BreakpointLook>(["disabled", "muted", "methodDisabled", "fieldDisabled"]);
 
 const setMarkers = StateEffect.define<RangeSet<BreakpointMarker>>();
 
diff --git a/src/features/debugger/editor/editor.module.css b/src/features/debugger/editor/editor.module.css
index 9df44b822..24653ac75 100644
--- a/src/features/debugger/editor/editor.module.css
+++ b/src/features/debugger/editor/editor.module.css
@@ -25,12 +25,22 @@
   background: var(--danger);
 }
 
-/* Disabled / muted: hollow circle. */
+/* Disabled: hollow circle. */
 .disabled::before {
   background: transparent;
   border: 1.5px solid var(--danger);
 }
 
+/* Mute Breakpoints (expui breakpointMuted). */
+.muted::before {
+  border-radius: 0;
+  background: url("../../../ui/expui/breakpoints/breakpointMuted.svg") center / contain no-repeat;
+}
+
+:global(:root[data-theme^="dark"]) .muted::before {
+  background-image: url("../../../ui/expui/breakpoints/breakpointMuted_dark.svg");
+}
+
 /* Not bound by the adapter. */
 .unverified::before {
   background: var(--fg-gutter);