Fix some linting issues

Tiltfile

@@ -26,10 +26,10 @@ local_resource(
 local_resource(
     "frontend-serve",
     labels=["frontend"],
-    deps=["frontend/src"],
+    deps=["studio/src"],
     resource_deps=["node_modules", "api-dist"],
     serve_cmd="npm run dev",
-    serve_dir="frontend",
+    serve_dir="studio",
     trigger_mode=TRIGGER_MODE_MANUAL,
 )
 
@@ -57,4 +57,4 @@ local_resource(
     resource_deps=["node_modules", "db-generate", "db-migrate"],
     serve_cmd="npm run dev",
     serve_dir="api",
-)
+)

api/src/serve-frontend-build.ts

@@ -17,10 +17,10 @@ const __dirname = dirname(__filename);
  */
 const POSSIBLE_FRONTEND_BUILD_PATHS = [
   /* For when we `npm run dev` from the api folder */
-  path.resolve(__dirname, "..", "..", "frontend", "dist"),
+  path.resolve(__dirname, "..", "..", "studio", "dist"),
   /* For when we run via `npx`
      **NOTE**
-     This path assumes we are running from the `dist` folder in a compiled version of the api, 
+     This path assumes we are running from the `dist` folder in a compiled version of the api,
      and that the frontend build has been copy pasted into the selfsame `dist` folder.
   */
   path.resolve(__dirname, "..", "..", "dist"),

biome.jsonc

@@ -41,9 +41,16 @@
       }
     },
     {
-      "include": ["frontend"],
+      "include": ["studio"],
       "linter": {
-        "enabled": false
+        "enabled": true,
+        "rules": {
+          "suspicious": {
+            "noArrayIndexKey": {
+              "level": "off"
+            }
+          }
+        }
       }
     },
     {

package.json

@@ -14,7 +14,7 @@
     "dev:frontend": "pnpm --filter @fiberplane/studio-frontend dev",
     "clean:fpx-studio": "pnpm run clean:api && pnpm run clean:frontend",
     "clean:api": "rimraf api/dist",
-    "clean:frontend": "rimraf frontend/dist",
+    "clean:frontend": "rimraf studio/dist",
     "format": "biome check . --write",
     "lint": "pnpm --recursive lint"
   },

packages/client-library-otel/src/async-hooks/AbstractAsyncHooksContextManager.ts

@@ -101,13 +101,17 @@ export abstract class AbstractAsyncHooksContextManager
     ee: T,
   ): T {
     const map = this._getPatchMap(ee);
-    if (map !== undefined) return ee;
+    if (map !== undefined) {
+      return ee;
+    }
     this._createPatchMap(ee);
 
     // patch methods that add a listener to propagate context
     // biome-ignore lint/complexity/noForEach: this is from the original code
     ADD_LISTENER_METHODS.forEach((methodName) => {
-      if (ee[methodName] === undefined) return;
+      if (ee[methodName] === undefined) {
+        return;
+      }
       ee[methodName] = this._patchAddListener(ee, ee[methodName], context);
     });
     // patch methods that remove a listener

studio/biome.jsonc

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "extends": ["../biome.jsonc"],
+  "files": {
+    "ignore": ["dist", "node_modules"]
+  },
+  "overrides": [
+    {
+      "include": ["src"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "suspicious": {
+            "noArrayIndexKey": {
+              "level": "off"
+            }
+          }
+        }
+      }
+    }
+  ]
+}

studio/package.json

@@ -7,9 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "typecheck": "tsc --noEmit",
-    "lint": "biome lint . && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && tsc",
-    "lint:ci": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && tsc",
     "format": "biome check . --write",
+    "lint": "biome lint . && pnpm run typecheck",
     "preview": "vite preview",
     "deploy": "pnpm run build && wrangler pages deploy dist",
     "test": "vitest --run"

studio/src/App.tsx

@@ -1,6 +1,6 @@
 import { QueryClientProvider, queryClient } from "@/queries";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { ReactNode, useEffect } from "react";
+import { type ReactNode, useEffect } from "react";
 import {
   Route,
   BrowserRouter as Router,

studio/src/Layout.tsx

@@ -1,6 +1,6 @@
 import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
 import type React from "react";
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import { NavLink } from "react-router-dom";
 import FpxIcon from "./assets/fpx.svg";
 import { WebhoncBadge } from "./components/WebhoncBadge";

studio/src/components/Ping.tsx

@@ -4,8 +4,8 @@ const Ping: React.FC<{ className?: string }> = ({ className }) => {
   return (
     <div className={cn("relative inline-flex", className)} role="status">
       <div className="w-4 h-4">
-        <div className="absolute w-full h-full rounded-full bg-blue-500 opacity-75 animate-ping"></div>
-        <div className="absolute top-1/2 left-1/2 w-2 h-2 -mt-1 -ml-1 rounded-full bg-blue-500"></div>
+        <div className="absolute w-full h-full rounded-full bg-blue-500 opacity-75 animate-ping" />
+        <div className="absolute top-1/2 left-1/2 w-2 h-2 -mt-1 -ml-1 rounded-full bg-blue-500" />
       </div>
       <span className="sr-only">Awaiting signal...</span>
     </div>

studio/src/components/WebhoncBadge/WebhoncBadge.tsx

@@ -23,7 +23,7 @@ export function WebhoncBadge() {
               "bg-muted/20 text-muted-foreground": !url,
             },
           )}
-          onClick={() => copyToClipboard(url!)}
+          onClick={() => url && copyToClipboard(url)}
           onMouseEnter={() => setIsHovering(true)}
           onMouseLeave={() => setIsHovering(false)}
           title="Copy public URL to clipboard"

studio/src/components/ui/DataTable.tsx

@@ -10,11 +10,11 @@ import { isModifierKeyPressed } from "@/utils";
 import { useHandler } from "@fiberplane/hooks";
 import {
   type ColumnDef,
-  PaginationState,
+  type PaginationState,
   type Row,
   type RowData,
-  RowModel,
-  Table as TableType,
+  type RowModel,
+  type Table as TableType,
   flexRender,
   getCoreRowModel,
   useReactTable,
@@ -115,17 +115,28 @@ export function DataTable<TData, TValue>({
 
   const handleNextRow = useHandler(() => {
     setSelectedRowIndex((prevIndex) => {
-      if (prevIndex === null) return 0;
-      if (prevIndex + 1 >= rows.length) return prevIndex;
+      if (prevIndex === null) {
+        return 0;
+      }
+
+      if (prevIndex + 1 >= rows.length) {
+        return prevIndex;
+      }
 
       return prevIndex + 1;
     });
   });
 
   const handlePrevRow = useHandler(() => {
     setSelectedRowIndex((prevIndex) => {
-      if (prevIndex === null) return 0;
-      if (prevIndex - 1 < 0) return prevIndex;
+      if (prevIndex === null) {
+        return 0;
+      }
+
+      if (prevIndex - 1 < 0) {
+        return prevIndex;
+      }
+
       return prevIndex - 1;
     });
   });

studio/src/components/ui/button/Button.tsx

@@ -1,5 +1,5 @@
 import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "@/utils";

studio/src/components/ui/command.tsx

@@ -1,4 +1,4 @@
-import { type DialogProps } from "@radix-ui/react-dialog";
+import type { DialogProps } from "@radix-ui/react-dialog";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
 import * as React from "react";

studio/src/components/ui/form.tsx

@@ -1,11 +1,11 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import {
   Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
   FormProvider,
   useFormContext,
 } from "react-hook-form";

studio/src/components/ui/pagination.tsx

@@ -5,7 +5,7 @@ import {
 } from "@radix-ui/react-icons";
 import * as React from "react";
 
-import { ButtonProps } from "@/components/ui/button";
+import type { ButtonProps } from "@/components/ui/button";
 import { buttonVariants } from "@/components/ui/button/variants";
 import { cn } from "@/utils";
 

studio/src/components/ui/toaster.tsx

@@ -13,20 +13,16 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props}>
+          <div className="grid gap-1">
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </div>
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
       <ToastViewport />
     </ToastProvider>
   );

studio/src/components/ui/use-toast.ts

@@ -93,9 +93,9 @@ export const reducer = (state: State, action: Action): State => {
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
-        state.toasts.forEach((toast) => {
+        for (const toast of state.toasts) {
           addToRemoveQueue(toast.id);
-        });
+        }
       }
 
       return {
@@ -130,9 +130,10 @@ let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
   memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
+
+  for (const listener of listeners) {
     listener(memoryState);
-  });
+  }
 }
 
 type Toast = Omit<ToasterToast, "id">;
@@ -154,7 +155,9 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss();
+        if (!open) {
+          dismiss();
+        }
       },
     },
   });
@@ -177,7 +180,7 @@ function useToast() {
         listeners.splice(index, 1);
       }
     };
-  }, [state]);
+  }, []);
 
   return {
     ...state,

studio/src/main.tsx

@@ -3,7 +3,12 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+const root = document.getElementById("root");
+if (!root) {
+  throw new Error("Application failed to start: missing root element");
+}
+
+ReactDOM.createRoot(root).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

studio/src/pages/RequestDetailsPage/RequestDetailsPageV2/RequestDetailsPageV2Content.tsx

@@ -12,13 +12,13 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
-import { MizuOrphanLog } from "@/queries";
-import { OtelSpan } from "@/queries/traces-otel";
+import type { MizuOrphanLog } from "@/queries";
+import type { OtelSpan } from "@/queries/traces-otel";
 import { cn } from "@/utils";
 import { EmptyState } from "../EmptyState";
 import { TraceDetailsTimeline, TraceDetailsV2 } from "../v2";
 import { HttpSummary, SummaryV2 } from "../v2/SummaryV2";
-import { getVendorInfo } from "../v2/vendorify-traces";
+import type { getVendorInfo } from "../v2/vendorify-traces";
 import { useRequestWaterfall } from "./useRequestWaterfall";
 
 export type SpanWithVendorInfo = {

studio/src/pages/RequestDetailsPage/RequestDetailsPageV2/useOrphanLogs.ts

@@ -1,5 +1,5 @@
-import { MizuOrphanLog, OtelSpan, isMizuOrphanLog } from "@/queries";
-import { OtelEvent } from "@/queries/traces-otel";
+import { type MizuOrphanLog, type OtelSpan, isMizuOrphanLog } from "@/queries";
+import type { OtelEvent } from "@/queries/traces-otel";
 import { safeParseJson } from "@/utils";
 import { useMemo } from "react";
 import { getString } from "../v2/otel-helpers";

studio/src/pages/RequestDetailsPage/RequestDetailsPageV2/useRequestWaterfall.ts

@@ -1,7 +1,10 @@
-import { MizuOrphanLog, OtelSpan } from "@/queries";
+import type { MizuOrphanLog, OtelSpan } from "@/queries";
 import { useMemo } from "react";
 import { getVendorInfo } from "../v2/vendorify-traces";
-import { SpanWithVendorInfo, Waterfall } from "./RequestDetailsPageV2Content";
+import type {
+  SpanWithVendorInfo,
+  Waterfall,
+} from "./RequestDetailsPageV2Content";
 
 export function useRequestWaterfall(
   spans: Array<OtelSpan>,