fix: playground not dimming unused using statements

.chronus/changes/fix-playground-unused-using-dimming-2026-5-27.md

@@ -0,0 +1,7 @@
+---
+changeKind: fix
+packages:
+  - "@typespec/playground"
+---
+
+Fix unused `using` statements not being dimmed in the playground editor

packages/playground/src/react/playground.tsx

@@ -3,7 +3,7 @@ import { $ } from "@typespec/compiler/typekit";
 import { Pane, SplitPane } from "@typespec/react-components";
 import "@typespec/react-components/style.css";
 import debounce from "debounce";
-import { KeyCode, KeyMod, MarkerSeverity, Uri, editor } from "monaco-editor";
+import { KeyCode, KeyMod, MarkerSeverity, MarkerTag, Uri, editor } from "monaco-editor";
 import {
   useCallback,
   useEffect,
@@ -13,7 +13,6 @@ import {
   type FunctionComponent,
   type ReactNode,
 } from "react";
-import { CompletionItemTag } from "vscode-languageserver";
 import { resolveVirtualPath } from "../browser-host.js";
 import { EditorCommandBar } from "../editor-command-bar/editor-command-bar.js";
 import { getMonacoRange, updateDiagnosticsForCodeFixes } from "../services.js";
@@ -289,7 +288,7 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
         ...getMonacoRange(typespecCompiler, diag.target),
         message: diag.message,
         severity: diag.severity === "error" ? MarkerSeverity.Error : MarkerSeverity.Warning,
-        tags: diag.code === "deprecated" ? [CompletionItemTag.Deprecated] : undefined,
+        tags: diag.code === "deprecated" ? [MarkerTag.Deprecated] : undefined,
       }));
 
       // Update code action provider with current diagnostics (for codefix support).

packages/playground/src/services.ts

@@ -79,7 +79,27 @@ export async function registerMonacoLanguage(host: BrowserHost) {
       const model = monaco.editor.getModel(monaco.Uri.parse(url));
       return model ? MonacoToLsp.textDocumentForModel(model) : undefined;
     },
-    sendDiagnostics() {},
+    sendDiagnostics({ uri, diagnostics }) {
+      const model = monaco.editor.getModel(monaco.Uri.parse(uri));
+      if (!model) return;
+
+      // Apply visual tag markers (e.g., dim unused code, strikethrough deprecated) from LSP diagnostics.
+      // Regular error/warning markers are managed by the playground's own compilation.
+      // The LSP DiagnosticTag values (Unnecessary=1, Deprecated=2) match Monaco's MarkerTag values.
+      const taggedMarkers: monaco.editor.IMarkerData[] = diagnostics
+        .filter((d) => d.tags !== undefined && d.tags.length > 0)
+        .map((d) => ({
+          severity: monaco.MarkerSeverity.Hint,
+          message: d.message,
+          startLineNumber: d.range.start.line + 1,
+          startColumn: d.range.start.character + 1,
+          endLineNumber: d.range.end.line + 1,
+          endColumn: d.range.end.character + 1,
+          tags: d.tags?.map((t) => t as number as monaco.MarkerTag),
+        }));
+
+      monaco.editor.setModelMarkers(model, "lsp-tags", taggedMarkers);
+    },
     log: (log) => {
       switch (log.level) {
         case "error":