feat(header): add LSP status button to workspace header

src/components/features/playground/workspace/editor/components/header.tsx

@@ -4,6 +4,7 @@ import { RedoButton } from "./redo-button";
 import { UndoButton } from "./undo-button";
 import { ResetButton } from "./reset-button";
 import { FormatButton } from "./format-button";
+import { LspStatusButton } from "./lsp-status-button";
 import { LanguageSelector } from "./language-selector";
 
 interface WorkspaceEditorHeaderProps {
@@ -20,8 +21,9 @@ export function WorkspaceEditorHeader({
       className={cn("h-8 flex flex-none items-center px-2 border-b", className)}
     >
       <div className="w-full flex items-center justify-between">
-        <div className="flex items-center gap-x-2">
+        <div className="flex flex-nowrap items-center">
           <LanguageSelector />
+          <LspStatusButton />
         </div>
         <div className="flex items-center gap-x-2">
           <ResetButton />

src/components/features/playground/workspace/editor/components/lsp-status-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { useProblem } from "@/hooks/use-problem";
+import type { MonacoLanguageClient } from "monaco-languageclient";
+
+const getLspStatusColor = (client: MonacoLanguageClient | null) => {
+  if (!client) return "bg-amber-500";
+  return client.isRunning() ? "bg-emerald-500" : "bg-red-500";
+};
+
+export function LspStatusButton() {
+  const { monacoLanguageClient } = useProblem();
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            className="h-6 w-auto px-2 py-0 gap-1 border-none shadow-none hover:bg-muted"
+          >
+            <div className="h-3 w-3 flex items-center justify-center">
+              <div
+                className={`h-1.5 w-1.5 rounded-full transition-all ${getLspStatusColor(
+                  monacoLanguageClient
+                )}`}
+              />
+            </div>
+            LSP
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent className="px-2 py-1 text-xs">
+          Language Server
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}