Replace ESLint with Biome for web/

Sources/devtail/PopOutProcessView.swift

@@ -15,6 +15,12 @@ struct PopOutProcessView: View {
           .frame(maxWidth: .infinity, maxHeight: .infinity)
       }
     }
-    .background(Color(nsColor: .textBackgroundColor))
+    .frame(maxWidth: .infinity, maxHeight: .infinity)
+    .background {
+      Rectangle()
+        .fill(.ultraThinMaterial)
+        .opacity(0.6)
+        .ignoresSafeArea()
+    }
   }
 }

Sources/devtail/PopOutWindowManager.swift

@@ -22,11 +22,15 @@ final class PopOutWindowManager {
 
     let window = NSWindow(
       contentRect: NSRect(x: 0, y: 0, width: 480, height: 400),
-      styleMask: [.titled, .closable, .resizable, .miniaturizable],
+      styleMask: [.titled, .closable, .resizable, .miniaturizable, .fullSizeContentView],
       backing: .buffered,
       defer: false
     )
 
+    window.titlebarAppearsTransparent = true
+    window.isOpaque = false
+    window.backgroundColor = .clear
+
     let hostingView = NSHostingView(rootView: PopOutProcessView(buffer: buffer))
     window.contentView = hostingView
     window.title = title

web/biome.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.11/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["**"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "error"
+      },
+      "correctness": {
+        "noUnusedVariables": "error",
+        "noUnusedImports": "error",
+        "noUnusedFunctionParameters": "error"
+      },
+      "style": {
+        "useBlockStatements": "error"
+      },
+      "complexity": {
+        "noImportantStyles": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "always"
+    }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

web/package.json

@@ -6,24 +6,22 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "check": "biome check --write .",
+    "lint": "biome lint .",
+    "format": "biome check --write .",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@biomejs/biome": "^2.3.5",
     "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.4.0",
     "tailwindcss": "^4.2.2",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.58.0",

web/src/App.css

@@ -26,12 +26,24 @@
   opacity: 0;
   animation: fadeInUp 0.7s cubic-bezier(0.25, 0, 0, 1) forwards;
 }
-.hero-stagger:nth-child(1) { animation-delay: 0.05s; }
-.hero-stagger:nth-child(2) { animation-delay: 0.15s; }
-.hero-stagger:nth-child(3) { animation-delay: 0.25s; }
-.hero-stagger:nth-child(4) { animation-delay: 0.35s; }
-.hero-stagger:nth-child(5) { animation-delay: 0.45s; }
-.hero-stagger:nth-child(6) { animation-delay: 0.55s; }
+.hero-stagger:nth-child(1) {
+  animation-delay: 0.05s;
+}
+.hero-stagger:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.hero-stagger:nth-child(3) {
+  animation-delay: 0.25s;
+}
+.hero-stagger:nth-child(4) {
+  animation-delay: 0.35s;
+}
+.hero-stagger:nth-child(5) {
+  animation-delay: 0.45s;
+}
+.hero-stagger:nth-child(6) {
+  animation-delay: 0.55s;
+}
 
 /* ── Scroll reveal ── */
 .scroll-reveal {

web/src/App.tsx

@@ -54,9 +54,11 @@ function App() {
           }
         });
       },
-      { threshold: 0.1, rootMargin: "-40px 0px" }
+      { threshold: 0.1, rootMargin: "-40px 0px" },
     );
-    els.forEach((el) => observer.observe(el));
+    for (const el of els) {
+      observer.observe(el);
+    }
     return () => observer.disconnect();
   }, []);
 
@@ -91,7 +93,9 @@ function App() {
               <h1 className="hero-stagger text-[2.75rem] sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black leading-[1] tracking-[-0.04em]">
                 <span className="block">YOUR TERMINAL</span>
                 <span className="block">IS TAKEN.</span>
-                <span className="block text-accent">YOUR MENU BAR ISN&rsquo;T.</span>
+                <span className="block text-accent">
+                  YOUR MENU BAR ISN&rsquo;T.
+                </span>
               </h1>
 
               <p className="hero-stagger mt-6 md:mt-8 text-base md:text-lg text-muted-foreground max-w-xl leading-relaxed">

web/src/index.css

@@ -1,12 +1,12 @@
 @import "tailwindcss";
 
 @theme {
-  --color-background: #0A0A0A;
-  --color-foreground: #FAFAFA;
-  --color-muted: #1A1A1A;
+  --color-background: #0a0a0a;
+  --color-foreground: #fafafa;
+  --color-muted: #1a1a1a;
   --color-muted-foreground: #737373;
-  --color-accent: #FF3D00;
-  --color-accent-foreground: #0A0A0A;
+  --color-accent: #ff3d00;
+  --color-accent-foreground: #0a0a0a;
   --color-border: #262626;
 
   --font-sans: "Inter Tight", "Inter", system-ui, sans-serif;

web/src/main.tsx

@@ -1,10 +1,14 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
 
-createRoot(document.getElementById('root')!).render(
+const root = document.getElementById("root");
+if (!root) {
+  throw new Error("Root element not found");
+}
+createRoot(root).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);

web/vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
-})
+});